<script lang="ts" setup>
// NOTE: Library
import { computed, onMounted, reactive, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { getRole } from 'src/services/keycloak';

// NOTE:  Components
import TableReport from './Table/TableReport.vue';

// NOTE: Stores & Type
import { baseUrl } from 'stores/utils';
import { hslaColors as colorsQuotation } from 'src/pages/05_quotation/constants';
import { hslaColors as colorsInvoice } from 'src/pages/10_invoice/constants';
import { useNavigator } from 'src/stores/navigator';
import {
  ViewMode,
  pageTabs,
  colReportQuotation,
  colReport,
  colReportProduct,
  colReportSale,
} from './constants';
import useFlowStore from 'src/stores/flow';
import { useReportStore } from 'src/stores/report';
import BadgeComponent from 'src/components/BadgeComponent.vue';
import Expansion from 'src/components/14_report/Expansion.vue';
import { SaveButton } from 'src/components/button';

// NOTE: Variable
const navigatorStore = useNavigator();
const reportStore = useReportStore();
const flow = useFlowStore();

const {
  dataReportQuotation,
  dataReportInvoice,
  dataReportReceipt,
  dataReportSale,
  dataReportProduct,
} = storeToRefs(reportStore);

const userRoles = computed(() => getRole() || []);

async function fetchReportQuotation() {
  dataReportQuotation.value = (await reportStore.getReportQuotation()) || [];
}
async function fetchReportInvoice() {
  dataReportInvoice.value = (await reportStore.getReportInvoice()) || [];
}

async function fetchReportReceipt() {
  dataReportReceipt.value = (await reportStore.getReportReceipt()) || [];
}
async function fetchReportSale() {
  dataReportSale.value = (await reportStore.getReportSale()) || undefined;
}
async function fetchReportProduct() {
  dataReportProduct.value = (await reportStore.getReportProduct()) || [];
}

onMounted(async () => {
  navigatorStore.current.title = 'report.title';
  navigatorStore.current.path = [{ text: '' }];
});

const isExecutive = computed(() => {
  const roles = userRoles.value;
  return roles.includes('executive') || roles.includes('system');
});

const filteredTabs = computed(() => {
  return pageTabs.filter((tab) => {
    if (!isExecutive.value) {
      return !tab.by.includes('admin');
    }

    return true;
  });
});

const pageState = reactive({
  currentTab: isExecutive.value ? ViewMode.Product : ViewMode.Document,
});

async function fetchReportTab() {
  switch (pageState.currentTab) {
    case ViewMode.Document: {
      await fetchReportQuotation();
      await fetchReportInvoice();
      await fetchReportReceipt();
      break;
    }
    case ViewMode.Invoice: {
      await fetchReportInvoice();
      break;
    }
    case ViewMode.Product: {
      await fetchReportProduct();
      break;
    }
    case ViewMode.Sale: {
      await fetchReportSale();
      break;
    }
  }
}

onMounted(async () => {
  await fetchReportTab();
});

watch([() => pageState.currentTab], async () => {
  await fetchReportTab();
});
</script>

<template>
  <div class="column full-height no-wrap">
    <section class="col surface-1 rounded bordered overflow-hidden">
      <div class="column full-height">
        <!-- SEC: header content -->
        <header
          class="row surface-3 justify-between full-width items-center"
          style="z-index: 1"
        >
          <nav class="surface-2 bordered-b q-px-md full-width">
            <q-tabs
              inline-label
              mobile-arrows
              dense
              v-model="pageState.currentTab"
              align="left"
              class="full-width"
              active-color="info"
            >
              <q-tab
                v-for="tab in filteredTabs"
                :name="tab.value"
                :key="tab.value"
                @click="
                  () => {
                    pageState.currentTab = tab.value;
                    flow.rotate();
                  }
                "
              >
                <div
                  class="row text-capitalize"
                  :class="
                    pageState.currentTab === tab.value
                      ? 'text-bold'
                      : 'app-text-muted'
                  "
                >
                  {{ $t(`report.view.${tab.label}`) }}
                </div>
              </q-tab>
            </q-tabs>
          </nav>
        </header>

        <!-- SEC: body content -->
        <article class="col surface-2 full-width scroll q-pa-md">
          <!-- #TODO change Table   -->
          <template v-if="pageState.currentTab === ViewMode.Document">
            <div class="q-gutter-y-md">
              <!-- Quotatio -->

              <Expansion default-opened>
                <template #header>
                  <div class="flex full-width items-center">
                    {{ $t('quotation.title') }}
                    <SaveButton
                      style="margin-left: auto"
                      :icon="'material-symbols:download'"
                      :label="$t('general.download')"
                      @click.stop="reportStore.downloadReportQuotation()"
                    />
                  </div>
                </template>

                <template #main>
                  <TableReport
                    :row="dataReportQuotation"
                    :columns="colReportQuotation"
                  >
                    <template #status="{ item }">
                      <BadgeComponent
                        :title="$t(`quotation.status.${item.row.status}`)"
                        :hsla-color="colorsQuotation[item.row.status] || ''"
                      />
                    </template>
                  </TableReport>
                </template>
              </Expansion>

              <!-- Invoice -->
              <Expansion default-opened>
                <template #header>
                  <div class="flex full-width items-center">
                    {{ $t('invoice.title') }}
                    <SaveButton
                      style="margin-left: auto"
                      :icon="'material-symbols:download'"
                      :label="$t('general.download')"
                      @click.stop="reportStore.downloadReportInvoice()"
                    />
                  </div>
                </template>
                <template #main>
                  <TableReport :row="dataReportInvoice" :columns="colReport">
                    <template #status="{ item }">
                      <BadgeComponent
                        :title="$t(`invoice.status.${item.row.status}`)"
                        :hsla-color="colorsInvoice[item.row.status] || ''"
                      />
                    </template>
                  </TableReport>
                </template>
              </Expansion>

              <!-- Receipt -->
              <Expansion default-opened>
                <template #header>
                  <div class="flex full-width items-center">
                    {{ $t('receipt.title') }}
                    <SaveButton
                      style="margin-left: auto"
                      :icon="'material-symbols:download'"
                      :label="$t('general.download')"
                      @click.stop="reportStore.downloadReportReceipt()"
                    />
                  </div>
                </template>
                <template #main>
                  <TableReport :row="dataReportReceipt" :columns="colReport">
                    <template #status="{ item }">
                      <BadgeComponent
                        :title="$t(`invoice.status.${item.row.status}`)"
                        :hsla-color="colorsInvoice[item.row.status] || ''"
                      />
                    </template>
                  </TableReport>
                </template>
              </Expansion>
            </div>
          </template>

          <template v-if="pageState.currentTab === ViewMode.Invoice">
            <Expansion default-opened>
              <template #header>
                <div class="flex full-width items-center">
                  {{ $t('invoice.title') }}
                  <SaveButton
                    style="margin-left: auto"
                    :icon="'material-symbols:download'"
                    :label="$t('general.download')"
                    @click.stop="reportStore.downloadReportInvoice()"
                  />
                </div>
              </template>
              <template #main>
                <TableReport :row="dataReportInvoice" :columns="colReport">
                  <template #status="{ item }">
                    <BadgeComponent
                      :title="$t(`invoice.status.${item.row.status}`)"
                      :hsla-color="colorsInvoice[item.row.status] || ''"
                    />
                  </template>
                </TableReport>
              </template>
            </Expansion>
          </template>

          <template v-if="pageState.currentTab === ViewMode.Product">
            <Expansion default-opened>
              <template #header>
                <div class="flex full-width items-center">
                  {{ $t('productService.title') }}
                  <SaveButton
                    style="margin-left: auto"
                    :icon="'material-symbols:download'"
                    :label="$t('general.download')"
                    @click.stop="reportStore.downloadReportInvoice()"
                  />
                </div>
              </template>
              <template #main>
                <TableReport
                  :row="dataReportProduct"
                  :columns="colReportProduct"
                />
              </template>
            </Expansion>
          </template>
          <template v-if="pageState.currentTab === ViewMode.Sale">
            <div class="q-gutter-y-md">
              <Expansion default-opened>
                <template #header>{{ $t('report.sale.byCustomer') }}</template>
                <template #main>
                  <TableReport
                    :row="
                      dataReportSale?.byCustomer.map((v) => {
                        return {
                          code: v.code,
                          name:
                            v.customer.customerType === 'CORP'
                              ? v.customerName
                              : $i18n.locale === 'eng'
                                ? `${v.firstNameEN} ${v.lastNameEN}`
                                : `${v.firstName} ${v.lastName}`,

                          _count: v._count,
                        };
                      })
                    "
                    :columns="colReportSale"
                  >
                    <template #name="{ item }">
                      {{ item.row.name }}
                    </template>
                  </TableReport>
                </template>
              </Expansion>
              <Expansion default-opened>
                <template #header>
                  {{ $t('report.sale.byProductGroup') }}
                </template>
                <template #main>
                  <TableReport
                    :row="
                      dataReportSale?.byProductGroup.map((v) => {
                        return {
                          code: v.code,
                          name: v.name,
                          _count: v._count,
                        };
                      })
                    "
                    :columns="colReportSale"
                  >
                    <template #name="{ item }">
                      {{ item.row.name }}
                    </template>
                  </TableReport>
                </template>
              </Expansion>
              <Expansion default-opened>
                <template #header>{{ $t('report.sale.bySale') }}</template>
                <template #main>
                  <TableReport
                    :row="
                      dataReportSale?.bySale.map((v) => {
                        return {
                          code: v.code,
                          name:
                            $i18n.locale === 'eng'
                              ? `${v.firstNameEN} ${v.lastNameEN}`
                              : `${v.firstName} ${v.lastName}`,
                          _count: v._count,
                          url: v.selectedImage,
                          id: v.id,
                          gender: v.gender,
                        };
                      })
                    "
                    :columns="colReportSale"
                  >
                    <template #name="{ item }">
                      <q-avatar size="md">
                        <q-img
                          class="text-center"
                          :ratio="1"
                          :src="`${baseUrl}/user/${item.row.id}/profile-image/${item.row.url}?ts=${Date.now()}`"
                        >
                          <template #error>
                            <div
                              class="no-padding full-width full-height flex items-center justify-center"
                              :style="`${item.row.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
                            >
                              <q-img
                                v-if="item.row.gender"
                                :src="
                                  item.row.gender === 'male'
                                    ? '/no-img-man.png'
                                    : '/no-img-female.png'
                                "
                              />
                              <q-icon
                                v-else
                                size="sm"
                                name="mdi-account-outline"
                                style="color: white"
                              />
                            </div>
                          </template>
                        </q-img>
                      </q-avatar>

                      {{ item.row.name }}
                    </template>
                  </TableReport>
                </template>
              </Expansion>
            </div>
          </template>
        </article>
      </div>
    </section>
  </div>
</template>
<style scoped></style>
