<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';

import { useStateStore } from 'stores/useStateStore';
import SalesClientTable from './SalesClientsTable.vue';
import SalesOrdersTable from './SalesOrdersTable.vue';
import SalesTicketsTable from './SalesTicketsTable.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';

const { t } = useI18n();
const stateStore = useStateStore();

const expanded = ref(true);

onMounted(async () => {
    stateStore.leftDrawer = false;
});

onUnmounted(() => (stateStore.leftDrawer = true));
</script>

<template>
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#searchbar">
            <VnSearchbar
                data-key="SalesMonitorTickets"
                url="SalesMonitors/salesFilter"
                :redirect="false"
                :label="t('searchBar.label')"
                :info="t('searchBar.info')"
            />
        </Teleport>
    </template>
    <QPage class="column items-center q-pa-md">
        <QCard class="full-width q-mb-lg">
            <QExpansionItem v-model="expanded" dense :duration="150">
                <template v-if="!expanded" #header>
                    <div class="row full-width">
                        <span class="flex col text-body1">
                            {{ t('salesMonitor.clientsOnWebsite') }}
                        </span>
                        <span class="flex col q-ml-xl text-body1">
                            {{ t('salesMonitor.recentOrderActions') }}
                        </span>
                    </div>
                </template>
                <template #default>
                    <div class="expansion-tables-container">
                        <QCardSection class="col">
                            <span class="flex col q-mb-sm text-body1">
                                {{ t('salesMonitor.clientsOnWebsite') }}
                            </span>
                            <SalesClientTable />
                        </QCardSection>
                        <QCardSection class="col">
                            <span class="flex col q-mb-sm text-body1">
                                {{ t('salesMonitor.recentOrderActions') }}
                            </span>
                            <SalesOrdersTable />
                        </QCardSection>
                    </div>
                </template>
            </QExpansionItem>
        </QCard>
        <QCard class="full-width">
            <QItem class="justify-between">
                <QItemLabel class="col slider-container">
                    <span class="text-body1"
                        >{{ t('salesMonitor.ticketsMonitor') }}
                    </span>
                    <QCardSection class="col" style="padding-inline: 0"
                        ><SalesTicketsTable />
                    </QCardSection>
                </QItemLabel>
            </QItem>
        </QCard>
    </QPage>
</template>

<style lang="scss" scoped>
.expansion-tables-container {
    display: flex;
    border-top: 1px solid $color-spacer;

    @media (max-width: $breakpoint-md-max) {
        flex-direction: column;
    }
}
</style>
