<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { ref, onMounted, computed } from 'vue';
import { Icon } from '@iconify/vue';
import { BranchContact } from 'src/stores/branch-contact/types';
import type { QTableProps } from 'quasar';

import useBranchStore from 'stores/branch';

import useUtilsStore, { dialog } from 'src/stores/utils';
import AppBox from 'components/app/AppBox.vue';
import AddButton from 'components/AddButton.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import StatCard from 'components/StatCardComponent.vue';
import BranchCard from 'components/01_branch-management/BranchCard.vue';
import FormDialog from 'components/FormDialog.vue';
import FormBranchInformation from 'components/01_branch-management/FormBranchInformation.vue';
import FormLocation from 'components/01_branch-management/FormLocation.vue';
import FormQr from 'components/01_branch-management/FormQr.vue';
import FormBranchContact from 'components/01_branch-management/FormBranchContact.vue';
import FormImage from 'components/01_branch-management/FormImage.vue';
import DrawerInfo from 'components/DrawerInfo.vue';
import InfoForm from 'components/02_personnel-management/InfoForm.vue';

import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';
import useFlowStore from 'src/stores/flow';

const { t } = useI18n();
const utilsStore = useUtilsStore();

const labelBtnStatus = ref<string>(t('all'));

const columns = [
  {
    name: 'branchLabelName',
    align: 'left',
    label: 'office',
    field: 'name',
    sortable: true,
  },
  {
    name: 'branchLabelAddress',
    align: 'left',
    label: 'address',
    field: 'address',
    sortable: true,
  },
  {
    name: 'branchLabelTel',
    align: 'left',
    label: 'formDialogInputTelephone',
    field: 'telephoneNo',
  },
  {
    name: 'branchLabelType',
    align: 'left',
    label: 'type',
    field: 'isHeadOffice',
  },
] satisfies QTableProps['columns'];

const modal = ref<boolean>(false);
const hideStat = ref(false);

const profileFileImg = ref<File | undefined>(undefined);
const imageUrl = ref<string | null>('');
const currentTreehHeadOfficeId = ref<string>('');

const inputFileImg = (() => {
  const element = document.createElement('input');
  element.type = 'file';
  element.accept = 'image/*';

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    if (typeof reader.result === 'string') imageUrl.value = reader.result;
  });

  element.addEventListener('change', () => {
    profileFileImg.value = element.files?.[0];
    if (profileFileImg.value) {
      reader.readAsDataURL(profileFileImg.value);
    }
  });

  return element;
})();

const profileFile = ref<File | undefined>(undefined);
const qrCodeimageUrl = ref<string | null>('');

const inputFile = (() => {
  const element = document.createElement('input');
  element.type = 'file';
  element.accept = 'image/*';

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    if (typeof reader.result === 'string') qrCodeimageUrl.value = reader.result;
  });

  element.addEventListener('change', () => {
    profileFile.value = element.files?.[0];
    if (profileFile.value) {
      reader.readAsDataURL(profileFile.value);
    }
  });

  return element;
})();

const branchStore = useBranchStore();
const flowStore = useFlowStore();
const { locale } = useI18n();

const { data: branchData } = storeToRefs(branchStore);

const treeData = computed(() => {
  const arr: BranchWithChildren[] = [];

  branchData.value?.result.forEach((a) => {
    if (a.isHeadOffice) arr.push(Object.assign(a, { branch: [] }));
    else arr.find((b) => b.id === a.headOfficeId)?.branch.push(a);
  });

  return arr;
});

async function calculateStats() {
  const _stats = await branchStore.stats();

  if (_stats) {
    stats.value = [
      {
        icon: 'mdi-office-building-outline',
        count: _stats.hq,
        label: 'branchHQLabel',
        color: 'pink',
      },
      {
        icon: 'mdi-home-group',
        count: _stats.br,
        label: 'branchLabel',
        color: 'purple',
      },
    ];
  }
}

onMounted(async () => {
  utilsStore.currentTitle.title = 'branchManagement';
  utilsStore.currentTitle.caption = 'branchManagementCaption';

  await branchStore.fetchList({ pageSize: 99999 });
  await calculateStats();

  flowStore.rotate();
});

const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');

const beforeBranch = ref<{ id: string; code: string }>({
  id: '',
  code: '',
});

const inputSearch = ref<string>('');
const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
const fieldDisplay = ref<
  (
    | 'branchLabelName'
    | 'branchLabelAddress'
    | 'branchLabelTel'
    | 'branchLabelType'
  )[]
>([
  'branchLabelName',
  'branchLabelTel',
  'branchLabelAddress',
  'branchLabelType',
]);
const fieldSelected = ref<
  (
    | 'branchLabelName'
    | 'branchLabelAddress'
    | 'branchLabelTel'
    | 'branchLabelType'
  )[]
>(fieldDisplay.value);
const fieldSelectedBranch = ref<{
  label: string;
  value: string;
}>({
  label: t('branchHQLabel'),
  value: 'branchHQLabel',
});

const stats = ref<
  { icon: string; count: number; label: string; color: 'pink' | 'purple' }[]
>([]);

const modeView = ref<boolean>(false);

const splitterModel = ref(25);

const defaultFormData = {
  headOfficeId: null,
  taxNo: '',
  nameEN: '',
  name: '',
  addressEN: '',
  address: '',
  zipCode: '',
  email: '',
  contactName: '',
  contact: '',
  telephoneNo: '',
  longitude: '',
  latitude: '',
  subDistrictId: '',
  districtId: '',
  provinceId: '',
  lineId: '',
};

const formDialogRef = ref();

const formType = ref<'create' | 'edit' | 'delete' | 'view'>('create');
const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
const currentHq = ref<{ id: string; code: string }>({ id: '', code: '' });
const currentEdit = ref<{ id: string; code: string }>({ id: '', code: '' });
const formData = ref<
  Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
>(structuredClone(defaultFormData));

const prevFormData = ref<
  Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
>(structuredClone(defaultFormData));

const modalDrawer = ref<boolean>(false);

function openDrawer() {
  modalDrawer.value = true;
}

function openDialog() {
  modal.value = true;
}

async function fetchBranchById(id: string) {
  const res = await branchStore.fetchById(id, { includeContact: true });

  if (res) {
    qrCodeimageUrl.value = res.qrCodeImageUrl;
    imageUrl.value = res.imageUrl;

    formData.value = {
      headOfficeId: res.headOfficeId,
      taxNo: res.taxNo,
      nameEN: res.nameEN,
      name: res.name,
      addressEN: res.addressEN,
      address: res.address,
      zipCode: res.zipCode,
      email: res.email,
      contactName: res.contactName,
      contact: res.contact.length > 0 ? res.contact[0].telephoneNo : ' ',
      telephoneNo: res.telephoneNo,
      longitude: res.longitude,
      latitude: res.latitude,
      subDistrictId: res.subDistrictId,
      districtId: res.districtId,
      provinceId: res.provinceId,
      lineId: res.lineId,
      status: res.status,
    };
  }
}

function clearData() {
  formData.value = structuredClone(defaultFormData);
  imageUrl.value = null;
  qrCodeimageUrl.value = null;
  currentEdit.value = {
    id: '',
    code: '',
  };
  profileFile.value = undefined;
}

async function undo() {
  formType.value = 'view';
  formData.value = prevFormData.value;
}

function triggerCreate(
  type: 'headOffice' | 'subBranch',
  id?: string,
  code?: string,
) {
  clearData();

  formTypeBranch.value = type;

  if (type === 'headOffice') {
    currentHq.value = {
      id: id ?? '',
      code: code ?? '',
    };
  }

  if (type === 'subBranch' && id && code) {
    formData.value.headOfficeId = id;
    formData.value.codeHeadOffice = code;
  }

  formType.value = 'create';
  openDialog();
}

function drawerEdit() {
  formType.value = 'edit';
  prevFormData.value = {
    ...formData.value,
  };
}

async function triggerEdit(
  openFormType: string,
  id: string,
  typeBranch: 'headOffice' | 'subBranch',
  code?: string,
) {
  await fetchBranchById(id);
  if (openFormType === 'form') {
    formType.value = 'edit';
    openDialog();
  }
  if (openFormType === 'drawer') {
    formType.value = 'view';
    openDrawer();
  }

  if (typeBranch === 'headOffice') {
    formData.value.codeHeadOffice = code;
  }

  const currentRecord = branchData.value.result.find((x) => x.id === id);

  if (!currentRecord) return;

  currentEdit.value = {
    id: currentRecord.id,
    code: currentRecord.code,
  };

  if (typeBranch === 'subBranch') {
    const currentRecordHead = branchData.value.result.find(
      (x) => x.id === currentRecord.headOfficeId,
    );

    formData.value.codeHeadOffice = currentRecordHead?.code;

    if (currentRecordHead) {
      currentHq.value.id = currentRecordHead.id;
      currentHq.value.code = currentRecordHead.code;
    } else {
      currentHq.value = currentEdit.value;
    }
  }

  formTypeBranch.value = typeBranch;
}

function triggerDelete(id: string) {
  if (id) {
    dialog({
      color: 'negative',
      icon: 'mdi-alert',
      title: t('deleteConfirmTitle'),
      actionText: t('agree'),
      persistent: true,
      message: t('deleteConfirmMessage'),
      action: async () => {
        await branchStore.deleteById(id);
        await branchStore.fetchList({ pageSize: 99999 });
        modalDrawer.value = false;
        await calculateStats();

        flowStore.rotate();
      },
      cancel: () => {},
    });
  }
}

async function onSubmit() {
  if (formType.value === 'edit') {
    delete formData.value['codeHeadOffice'];

    await branchStore.editById(
      currentEdit.value.id,
      {
        ...formData.value,
        status: undefined,
      },
      profileFile.value,
      profileFileImg.value,
    );

    await branchStore.fetchList({ pageSize: 99999 });
    modal.value = false;
    modalDrawer.value = false;
  }

  if (formType.value === 'create') {
    if (formTypeBranch.value === 'subBranch') {
      const currentRecord = branchData.value.result.find(
        (x) => x.id === formData.value.headOfficeId,
      );

      formData.value.headOfficeId = currentRecord?.id;
      delete formData.value['codeHeadOffice'];
    }

    await branchStore.create({
      ...formData.value,
      qrCodeImage: profileFile.value,
      imageUrl: profileFileImg.value,
    });

    await branchStore.fetchList({ pageSize: 99999 });
    modal.value = false;
  }

  const _stats = await branchStore.stats();

  if (_stats) {
    stats.value = [
      {
        icon: 'mdi-home',
        count: _stats.hq,
        label: 'branchHQLabel',
        color: 'pink',
      },
      {
        icon: 'mdi-domain',
        count: _stats.br,
        label: 'branchLabel',
        color: 'purple',
      },
    ];
  }
  flowStore.rotate();
}

function changeTitle(
  formType: 'edit' | 'create' | 'delete' | 'view',
  typeBranch: 'headOffice' | 'subBranch',
) {
  if (typeBranch === 'headOffice') {
    return formType === 'create'
      ? t('formDialogTitleCreateHeadOffice')
      : formType === 'view'
        ? t('formDialogTitleViewHeadOffice')
        : t('formDialogTitleEditHeadOffice');
  }
  if (typeBranch === 'subBranch') {
    return formType === 'create'
      ? t('formDialogTitleCreateSubBranch')
      : formType === 'view'
        ? t('formDialogTitleViewSubBranch')
        : t('formDialogTitleEditSubBranch');
  }
  return '';
}

watch(locale, () => {
  fieldSelectedBranch.value = {
    label: t(`${fieldSelectedBranch.value.label}`),
    value: fieldSelectedBranch.value.value,
  };
});
</script>

<template>
  <div class="column full-height no-wrap">
    <div class="text-body-2 q-mb-xs flex items-center">
      {{ $t('branchStatTitle') }}
      <q-btn
        class="q-ml-xs"
        icon="mdi-pin"
        color="primary"
        size="sm"
        flat
        dense
        rounded
        @click="hideStat = !hideStat"
        :style="hideStat ? 'rotate: 90deg' : ''"
        style="transition: 0.1s ease-in-out"
      />
    </div>

    <transition name="slide">
      <StatCard
        v-if="!hideStat"
        class="q-pb-md"
        label-i18n
        :branch="stats"
        :dark="$q.dark.isActive"
      />
    </transition>

    <div class="column col surface-1 rounded" :no-padding="!!branchData.total">
      <template v-if="!branchData.total">
        <TooltipComponent
          class="self-end"
          title="branchNoMainOfficeYet"
          caption="branchClickToCreateMainOffice"
          imgSrc="personnel-table-"
        />

        <div class="row items-center justify-center" style="flex-grow: 1">
          <AddButton
            label="branchAdd"
            @trigger="() => triggerCreate('headOffice')"
          />
        </div>
      </template>
      <template v-else>
        <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
          <q-splitter
            v-model="splitterModel"
            :limits="[25, 80]"
            style="width: 100%"
          >
            <template v-slot:before>
              <div class="rounded surface-1 scroll">
                <div
                  class="row bordered-b q-pl-sm text-weight-bold surface-2 items-center"
                  style="height: 50px"
                >
                  <div class="col">จัดการสาขาทั้งหมด</div>

                  <q-btn
                    round
                    flat
                    size="md"
                    dense
                    id="hq-add-btn"
                    class="q-mr-sm"
                    @click="
                      () => {
                        if (!currentHq.id) {
                          triggerCreate('headOffice');
                        } else {
                          triggerCreate(
                            'subBranch',
                            currentHq.id,
                            currentHq.code,
                          );
                        }
                      }
                    "
                  >
                    <Icon
                      icon="pixelarticons:plus"
                      class="cursor-pointer"
                      style="color: var(--foreground); scale: 1.5"
                    />
                  </q-btn>
                </div>

                <q-tree
                  :nodes="treeData"
                  node-key="id"
                  label-key="name"
                  children-key="branch"
                  style="color: var(--foreground)"
                >
                  <template #default-header="{ node }">
                    <div
                      class="row items-center justify-between full-width no-wrap"
                    >
                      <span>{{ node.name }}</span>
                      <div
                        class="row q-gutter-xs items-center no-wrap"
                        @click.stop
                      >
                        <q-btn
                          v-if="node.isHeadOffice"
                          :id="`create-sub-branch-btn-${node.name}`"
                          @click.stop="
                            triggerCreate('subBranch', node.id, node.code)
                          "
                          icon="mdi-file-plus-outline"
                          size="sm"
                          dense
                          round
                          flat
                        />

                        <q-btn
                          :id="`view-detail-btn-${node.name}`"
                          icon="mdi-dots-vertical"
                          size="sm"
                          dense
                          round
                          flat
                        >
                          <q-menu class="bordered">
                            <q-list v-close-popup>
                              <q-item
                                :id="`view-detail-btn-${node.name}-view`"
                                @click.stop="
                                  if (node.isHeadOffice) {
                                    triggerEdit(
                                      'drawer',
                                      node.id,
                                      'headOffice',
                                      node.code,
                                    );
                                  } else {
                                    triggerEdit('drawer', node.id, 'subBranch');
                                  }
                                "
                                clickable
                                dense
                                class="row q-py-sm"
                                style="white-space: nowrap"
                              >
                                <q-icon
                                  name="mdi-eye-outline"
                                  class="col-3"
                                  size="xs"
                                  style="color: hsl(var(--green-6-hsl))"
                                />
                                <span class="col-9 q-px-md flex items-center">
                                  {{ $t('viewDetail') }}
                                </span>
                              </q-item>

                              <q-item
                                :id="`view-detail-btn-${node.name}-edit`"
                                clickable
                                dense
                                class="row q-py-sm"
                                style="white-space: nowrap"
                                @click="
                                  () => {
                                    if (node.isHeadOffice) {
                                      triggerEdit(
                                        'form',
                                        node.id,
                                        'headOffice',
                                        node.code,
                                      );
                                    } else {
                                      triggerEdit('form', node.id, 'subBranch');
                                    }
                                  }
                                "
                              >
                                <q-icon
                                  name="mdi-pencil-outline"
                                  class="col-3"
                                  size="xs"
                                  style="color: hsl(var(--cyan-6-hsl))"
                                />
                                <span class="col-9 q-px-md flex items-center">
                                  {{ $t('edit') }}
                                </span>
                              </q-item>
                              <q-item
                                :id="`view-detail-btn-${node.name}-delete`"
                                dense
                                :clickable="node.status === 'CREATED'"
                                class="row"
                                :class="{
                                  'surface-3': node.status !== 'CREATED',
                                  'app-text-muted': node.status !== 'CREATED',
                                }"
                                style="white-space: nowrap"
                                @click="triggerDelete(node.id)"
                              >
                                <q-icon
                                  name="mdi-trash-can-outline"
                                  size="xs"
                                  class="col-3"
                                  :class="{
                                    'app-text-negative':
                                      node.status === 'CREATED',
                                  }"
                                />
                                <span class="col-9 q-px-md flex items-center">
                                  {{ $t('delete') }}
                                </span>
                              </q-item>

                              <q-item dense>
                                <q-item-section class="q-py-sm">
                                  <div class="q-pa-sm surface-2 rounded">
                                    <q-toggle
                                      :id="`view-detail-btn-${node.name}-status`"
                                      dense
                                      size="sm"
                                      :label="
                                        node.status !== 'INACTIVE'
                                          ? $t('switchOnLabel')
                                          : $t('switchOffLabel')
                                      "
                                      @click="
                                        async () => {
                                          const res =
                                            await branchStore.editById(
                                              node.id,
                                              {
                                                status:
                                                  node.status !== 'INACTIVE'
                                                    ? 'INACTIVE'
                                                    : 'ACTIVE',
                                              },
                                            );
                                          if (res) node.status = res.status;
                                        }
                                      "
                                      :model-value="
                                        node.status === 'CREATED' ||
                                        node.status === 'ACTIVE'
                                      "
                                    />
                                  </div>
                                </q-item-section>
                              </q-item>
                            </q-list>
                          </q-menu>
                        </q-btn>
                      </div>
                    </div>
                  </template>
                </q-tree>
              </div>
            </template>

            <template v-slot:after>
              <div class="column" style="height: 100%">
                <div
                  class="row justify-between q-pl-md items-center surface-2 bordered-b q-pr-md"
                  style="height: 50px"
                >
                  <div class="col-6">
                    <q-input
                      for="input-Search"
                      style="width: 250px"
                      :label-color="$q.dark.isActive ? 'white' : 'grey-10'"
                      outlined
                      dense
                      label="ค้นหา"
                      v-model="inputSearch"
                      debounce="500"
                    ></q-input>
                  </div>

                  <div class="col-6 row q-gutter-x-sm justify-end text-right">
                    <q-btn-dropdown
                      class="bordered rounded surface-1"
                      dense
                      unelevated
                      :label="labelBtnStatus"
                    >
                      <q-list>
                        <q-item
                          clickable
                          v-close-popup
                          @click="
                            async () => {
                              labelBtnStatus = $t('all');
                              statusFilter = 'all';
                            }
                          "
                        >
                          <q-item-section>
                            <q-item-label>{{ $t('all') }}</q-item-label>
                          </q-item-section>
                        </q-item>

                        <q-item
                          clickable
                          v-close-popup
                          @click="
                            async () => {
                              labelBtnStatus = $t('statusACTIVE');
                              statusFilter = 'statusACTIVE';
                            }
                          "
                        >
                          <q-item-section>
                            <q-item-label>
                              {{ $t('statusACTIVE') }}
                            </q-item-label>
                          </q-item-section>
                        </q-item>

                        <q-item
                          clickable
                          v-close-popup
                          @click="
                            async () => {
                              labelBtnStatus = $t('statusINACTIVE');
                              statusFilter = 'statusINACTIVE';
                            }
                          "
                        >
                          <q-item-section>
                            <q-item-label>
                              {{ $t('statusINACTIVE') }}
                            </q-item-label>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-btn-dropdown>

                    <q-select
                      id="select-field"
                      for="select-field"
                      :options="
                        fieldDisplay.map((v) => ({ label: $t(v), value: v }))
                      "
                      :display-value="$t('displayField')"
                      v-model="fieldSelected"
                      option-label="label"
                      option-value="value"
                      map-options
                      emit-value
                      outlined
                      multiple
                      dense
                    />

                    <!-- <q-btn
                      id="btn-filter"
                      icon="mdi-tune-vertical-variant"
                      size="sm"
                      class="bordered rounded surface-1"
                      :class="{ 'app-text-info': statusFilter !== 'all' }"
                      unelevated
                    >
                      <q-menu class="bordered">
                        <q-list v-close-popup dense>
                          <q-item
                            id="btn-filter-all"
                            clickable
                            class="flex items-center"
                            :class="{
                              'app-text-info': statusFilter === 'all',
                            }"
                            @click="statusFilter = 'all'"
                          >
                            {{ $t('all') }}
                          </q-item>
                          <q-item
                            id="btn-filter-active"
                            clickable
                            class="flex items-center"
                            :class="{
                              'app-text-info': statusFilter === 'statusACTIVE',
                            }"
                            @click="statusFilter = 'statusACTIVE'"
                          >
                            {{ $t('statusACTIVE') }}
                          </q-item>
                          <q-item
                            id="btn-filter-inactive"
                            clickable
                            class="flex items-center"
                            :class="{
                              'app-text-info':
                                statusFilter === 'statusINACTIVE',
                            }"
                            @click="statusFilter = 'statusINACTIVE'"
                          >
                            {{ $t('statusINACTIVE') }}
                          </q-item>
                        </q-list>
                      </q-menu>
                    </q-btn> -->

                    <q-btn-toggle
                      v-model="modeView"
                      id="btn-mode"
                      dense
                      class="no-shadow bordered rounded surface-1"
                      :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                      size="xs"
                      :options="[
                        { value: true, slot: 'folder' },
                        { value: false, slot: 'list' },
                      ]"
                    >
                      <template v-slot:folder>
                        <q-icon
                          name="mdi-view-grid-outline"
                          size="16px"
                          class="q-px-sm q-py-xs rounded"
                          :style="{
                            color: $q.dark.isActive
                              ? modeView
                                ? '#C9D3DB '
                                : '#787B7C'
                              : modeView
                                ? '#787B7C'
                                : '#C9D3DB',
                          }"
                        />
                      </template>
                      <template v-slot:list>
                        <q-icon
                          name="mdi-format-list-bulleted"
                          class="q-px-sm q-py-xs rounded"
                          size="16px"
                          :style="{
                            color: $q.dark.isActive
                              ? modeView === false
                                ? '#C9D3DB'
                                : '#787B7C'
                              : modeView === false
                                ? '#787B7C'
                                : '#C9D3DB',
                          }"
                        />
                      </template>
                    </q-btn-toggle>
                  </div>
                </div>
                <div style="position: relative; flex: 1">
                  <div
                    style="position: absolute; inset: 0"
                    class="scroll q-pa-md"
                  >
                    <q-table
                      flat
                      bordered
                      :rows="
                        treeData
                          .flatMap((v) => [v, ...v.branch])
                          .filter((v) => {
                            if (
                              statusFilter === 'statusACTIVE' &&
                              v.status === 'INACTIVE'
                            ) {
                              return false;
                            }
                            if (
                              statusFilter === 'statusINACTIVE' &&
                              v.status !== 'INACTIVE'
                            ) {
                              return false;
                            }

                            const terms = `${v.code} ${$i18n.locale === 'en-US' ? v.nameEN : v.name} ${v.telephoneNo}`;
                            if (inputSearch && !terms.includes(inputSearch)) {
                              return false;
                            }

                            if (
                              !!currentHq.id &&
                              currentHq.id === v.headOfficeId
                            ) {
                              return true;
                            }
                            if (fieldSelectedBranch.value === 'all')
                              return true;
                            if (fieldSelectedBranch.value === 'branchHQLabel')
                              return v.isHeadOffice;
                            if (fieldSelectedBranch.value === 'branchLabel')
                              return !v.isHeadOffice;

                            return false;
                          })
                      "
                      :columns="columns"
                      :grid="modeView"
                      card-container-class="row q-col-gutter-md"
                      row-key="name"
                      hide-pagination
                      :visible-columns="fieldSelected"
                    >
                      <template v-slot:header="props">
                        <q-tr class="surface-2" :props="props">
                          <q-th
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                          >
                            {{ $t(col.label) }}
                          </q-th>
                          <q-th auto-width />
                        </q-tr>
                      </template>

                      <template v-slot:body="props">
                        <q-tr
                          :class="{
                            'app-text-muted': props.row.status === 'INACTIVE',
                          }"
                          :props="props"
                          @click="
                            () => {
                              if (props.row.isHeadOffice) {
                                fieldSelectedBranch.value = '';
                                inputSearch = '';
                                currentHq = {
                                  id: props.row.id,
                                  code: props.row.code,
                                };
                                beforeBranch = {
                                  id: '',
                                  code: '',
                                };
                              }
                            }
                          "
                        >
                          <q-td
                            v-if="fieldSelected.includes('branchLabelName')"
                          >
                            <div class="row items-center">
                              <div
                                :class="{
                                  'status-active':
                                    props.row.status !== 'INACTIVE',
                                  'status-inactive':
                                    props.row.status === 'INACTIVE',
                                  'branch-card__hq': props.row.isHeadOffice,
                                  'branch-card__br': !props.row.isHeadOffice,
                                }"
                                style="
                                  width: 50px;
                                  display: flex;
                                  margin-bottom: var(--size-2);
                                "
                              >
                                <div class="branch-card__icon">
                                  <q-icon
                                    size="md"
                                    style="scale: 0.8"
                                    name="mdi-office-building-outline"
                                  />
                                </div>
                              </div>
                              <div class="col">
                                <div class="col">{{ props.row.name }}</div>
                                <div class="col app-text-muted">
                                  {{ props.row.code }}
                                </div>
                              </div>
                            </div>
                          </q-td>
                          <q-td
                            v-if="fieldSelected.includes('branchLabelAddress')"
                          >
                            {{ props.row.address }}
                          </q-td>
                          <q-td v-if="fieldSelected.includes('branchLabelTel')">
                            {{ props.row.contact[0].telephoneNo }}
                          </q-td>
                          <q-td
                            v-if="fieldSelected.includes('branchLabelType')"
                          >
                            {{
                              props.row.isHeadOffice
                                ? $t('branchHQLabel')
                                : $t('branchLabel')
                            }}
                          </q-td>
                          <q-td>
                            <q-btn
                              icon="mdi-eye"
                              size="sm"
                              dense
                              round
                              flat
                              @click.stop
                            />
                            <q-btn
                              icon="mdi-dots-vertical"
                              size="sm"
                              dense
                              round
                              flat
                              @click.stop
                            />
                          </q-td>
                        </q-tr>
                      </template>

                      <template v-slot:item="props">
                        <div class="col-6">
                          <BranchCard
                            :id="`branch-card-${props.row.name}`"
                            @click="
                              () => {
                                if (props.row.isHeadOffice) {
                                  fieldSelectedBranch.value = '';
                                  inputSearch = '';
                                  currentHq = {
                                    id: props.row.id,
                                    code: props.row.code,
                                  };
                                  beforeBranch = {
                                    id: '',
                                    code: '',
                                  };
                                }
                              }
                            "
                            :metadata="props.row"
                            :color="props.row.isHeadOffice ? 'hq' : 'br'"
                            :key="props.row.id"
                            :data="{
                              branchLabelCode: props.row.code,
                              branchLabelName:
                                $i18n.locale === 'en-US'
                                  ? props.row.nameEN
                                  : props.row.name,
                              branchLabelTel: props.row.contact
                                .map((c: BranchContact) => c.telephoneNo)
                                .join(','),
                              branchLabelAddress:
                                $i18n.locale === 'en-US'
                                  ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                                  : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
                              branchLabelType: $t(
                                props.row.isHeadOffice
                                  ? 'branchHQLabel'
                                  : 'branchLabel',
                              ),
                            }"
                            :field-selected="fieldSelected"
                            :badge-field="['branchLabelStatus']"
                            :inactive="props.row.status === 'INACTIVE'"
                            @view-detail="
                              (v) => {
                                triggerEdit(
                                  'drawer',
                                  v.id,
                                  v.isHeadOffice ? 'headOffice' : 'subBranch',
                                  v.code,
                                );
                              }
                            "
                          />
                        </div>
                      </template>
                    </q-table>
                  </div>

                  <!-- <BranchCard
                    class="col-6"
                    :id="`branch-card-${item.name}`"
                    v-for="item in treeData
                      .flatMap((v) => [v, ...v.branch])
                      .filter((v) => {
                        if (
                          statusFilter === 'statusACTIVE' &&
                          v.status === 'INACTIVE'
                        ) {
                          return false;
                        }
                        if (
                          statusFilter === 'statusINACTIVE' &&
                          v.status !== 'INACTIVE'
                        ) {
                          return false;
                        }

                        const terms = `${v.code} ${$i18n.locale === 'en-US' ? v.nameEN : v.name} ${v.telephoneNo}`;
                        if (inputSearch && !terms.includes(inputSearch)) {
                          return false;
                        }

                        if (!!currentHq.id && currentHq.id === v.headOfficeId) {
                          console.log('ทำงาน');

                          return true;
                        }
                        if (fieldSelectedBranch.value === 'all') return true;
                        if (fieldSelectedBranch.value === 'branchHQLabel')
                          return v.isHeadOffice;
                        if (fieldSelectedBranch.value === 'branchLabel')
                          return !v.isHeadOffice;

                        return false;
                      })"
                    @click="
                      () => {
                        if (item.isHeadOffice) {
                          fieldSelectedBranch.value = '';
                          inputSearch = '';
                          currentHq = { id: item.id, code: item.code };
                          beforeBranch = {
                            id: '',
                            code: '',
                          };
                        }
                      }
                    "
                    :metadata="item"
                    :color="item.isHeadOffice ? 'hq' : 'br'"
                    :key="item.id"
                    :data="{
                      branchLabelCode: item.code,
                      branchLabelName:
                        $i18n.locale === 'en-US' ? item.nameEN : item.name,
                      branchLabelTel: item.contact
                        .map((c) => c.telephoneNo)
                        .join(','),
                      branchLabelAddress:
                        $i18n.locale === 'en-US'
                          ? `${item.addressEN || ''} ${item.subDistrict?.nameEN || ''} ${item.district?.nameEN || ''} ${item.province?.nameEN || ''}`
                          : `${item.address || ''} ${item.subDistrict?.name || ''} ${item.district?.name || ''} ${item.province?.name || ''}`,
                      branchLabelType: $t(
                        item.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
                      ),
                    }"
                    :field-selected="fieldSelected"
                    :badge-field="['branchLabelStatus']"
                    :inactive="item.status === 'INACTIVE'"
                    @view-detail="
                      (v) => {
                        triggerEdit(
                          'drawer',
                          v.id,
                          v.isHeadOffice ? 'headOffice' : 'subBranch',
                          v.code,
                        );
                      }
                    "
                  /> -->
                </div>
              </div>
            </template>
          </q-splitter>

          <!-- <div class="tree-container bordered-r surface-2">
            <div class="row">
              <button
                style="border: none; background: transparent"
                :class="{ 'cursor-pointer': !!currentHq.id }"
                id="br-prev"
              >
                <Icon
                  icon="ep:arrow-left-bold"
                  width="21px"
                  :class="{ 'app-text-muted': !currentHq.id }"
                  @click="
                    () => {
                      if (currentHq.id) {
                        beforeBranch = currentHq;
                        currentHq = { id: '', code: '' };
                        fieldSelectedBranch = {
                          label: $t('branchHQLabel'),
                          value: 'branchHQLabel',
                        };
                      }
                    }
                  "
                />
              </button>

              <button
                style="border: none; background: transparent; padding: 0"
                :class="{ 'cursor-pointer': !!beforeBranch.id }"
                id="br-next"
              >
                <Icon
                  icon="ep:arrow-right-bold"
                  width="21px"
                  :class="{
                    'app-text-muted': !beforeBranch.id,
                  }"
                  @click="
                    () => {
                      if (beforeBranch.id) {
                        currentHq = beforeBranch;
                        beforeBranch = { id: '', code: '' };
                        fieldSelectedBranch = {
                          label: '',
                          value: '',
                        };
                      }
                    }
                  "
                />
              </button>

              <q-space />
            </div>
          </div> -->
          <!-- ssssssssssssssssssss -->

          <!-- ---- -->
        </div>
      </template>
    </div>
  </div>

  <FormDialog
    ref="formDialogRef"
    v-model:modal="modal"
    v-model:address="formData.address"
    v-model:addressEN="formData.addressEN"
    v-model:province-id="formData.provinceId"
    v-model:district-id="formData.districtId"
    v-model:sub-district-id="formData.subDistrictId"
    v-model:zip-code="formData.zipCode"
    :title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
    :titleFormAddress="$t('formDialogTitleAddress')"
    :address-title="$t('formDialogAddress')"
    :address-title-EN="$t('formDialogAddressEN')"
    :addressSeparator="true"
    :submit="
      () => {
        onSubmit();
      }
    "
    :close="() => (modal = false)"
  >
    <template #information>
      <FormBranchInformation
        v-model:code="formData.codeHeadOffice"
        v-model:code-sub-branch="currentEdit.code"
        v-model:taxNo="formData.taxNo"
        v-model:name="formData.name"
        v-model:nameEN="formData.nameEN"
        v-model:type-branch="formTypeBranch"
        :separator="true"
        :dense="true"
        :outlined="true"
        :readonly="formType === 'view'"
        :view="formType === 'view'"
        title="formDialogTitleInformation"
      />
    </template>

    <template #person>
      <FormBranchContact
        v-model:type-branch="formTypeBranch"
        v-model:telephone-no="formData.telephoneNo"
        v-model:contact="formData.contact"
        v-model:email="formData.email"
        v-model:contact-name="formData.contactName"
        v-model:line-id="formData.lineId"
        :separator="true"
        title="formDialogTitleContact"
        :dense="true"
        :outlined="true"
      />
    </template>

    <template #qr-code>
      <FormQr
        title="QR Code"
        :separator="true"
        :qr="qrCodeimageUrl"
        :readonly="formType === 'view'"
        @upload="
          () => {
            inputFile.click();
          }
        "
      />
    </template>

    <template #location>
      <FormLocation
        :readonly="formType === 'view'"
        :separator="true"
        v-model:latitude="formData.latitude"
        v-model:longitude="formData.longitude"
        title="formDialogTitleLocation"
      />
    </template>

    <template #by-type>
      <FormImage
        :readonly="formType === 'view'"
        v-model:image="imageUrl"
        @upload="
          () => {
            inputFileImg.click();
          }
        "
        :title="$t('formDialogTitleImg')"
      />
    </template>
  </FormDialog>

  <DrawerInfo
    ref="formDialogRef"
    v-model:drawerOpen="modalDrawer"
    :title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
    :titleFormAddress="$t('formDialogTitleAddress')"
    :addressSeparator="true"
    :undo="() => undo()"
    :isEdit="formType === 'edit'"
    :editData="() => drawerEdit()"
    :submit="() => onSubmit()"
    :delete-data="() => triggerDelete(currentEdit.id)"
    :close="() => ((modalDrawer = false), flowStore.rotate())"
    :statusBranch="formData.status"
  >
    <template #info>
      <InfoForm
        v-model:address="formData.address"
        v-model:addressEN="formData.addressEN"
        v-model:province-id="formData.provinceId"
        v-model:district-id="formData.districtId"
        v-model:sub-district-id="formData.subDistrictId"
        v-model:zip-code="formData.zipCode"
        :title-form-address="$t('formDialogTitleAddress')"
        :address-title="$t('formDialogAddress')"
        :address-title-e-n="$t('formDialogAddressEN')"
        :readonly="formType === 'view'"
      >
        <template #information>
          <FormBranchInformation
            v-model:code="formData.codeHeadOffice"
            v-model:code-sub-branch="currentEdit.code"
            v-model:taxNo="formData.taxNo"
            v-model:name="formData.name"
            v-model:nameEN="formData.nameEN"
            v-model:type-branch="formTypeBranch"
            :separator="true"
            :dense="true"
            :outlined="true"
            :readonly="formType === 'view'"
            :view="formType === 'view'"
            title="formDialogTitleInformation"
          />
        </template>

        <template #person>
          <FormBranchContact
            title="formDialogTitleContact"
            v-model:telephone-no="formData.telephoneNo"
            v-model:contact="formData.contact"
            v-model:email="formData.email"
            v-model:contact-name="formData.contactName"
            v-model:line-id="formData.lineId"
            :readonly="formType === 'view'"
            :view="formType === 'view'"
            :separator="true"
            :dense="true"
            :outlined="true"
          />
        </template>

        <template #qr-code>
          <FormQr
            :readonly="formType === 'view'"
            title="QR Code"
            :separator="true"
            :qr="qrCodeimageUrl"
            @upload="
              () => {
                inputFile.click();
              }
            "
          />
        </template>

        <template #location>
          <FormLocation
            title="formDialogTitleLocation"
            v-model:latitude="formData.latitude"
            v-model:longitude="formData.longitude"
            :readonly="formType === 'view'"
            :separator="true"
          />
        </template>

        <template #by-type>
          <FormImage
            @upload="
              () => {
                inputFileImg.click();
              }
            "
            v-model:image="imageUrl"
            :title="$t('formDialogTitleImg')"
            :readonly="formType === 'view'"
          />
        </template>
      </InfoForm>
    </template>
  </DrawerInfo>
</template>

<style scoped>
.color-icon-arrow {
  color: var(--gray-3);
}

.color-icon-plus {
  color: var(--cyan-6);
}

.tree-container {
  width: 100%;
  min-width: 300px;
  max-width: 25%;
  max-height: 100%;
}

.branch-wrapper {
  flex-grow: 1;

  & > .branch-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: unset;
    gap: var(--size-4);
  }
}

.branch-card__hq {
  --_branch-card-bg: var(--pink-6-hsl);
}

.branch-card__br {
  --_branch-card-bg: var(--violet-11-hsl);

  &.branch-card__dark {
    --_branch-card-bg: var(--violet-10-hsl);
  }
}

.status-active {
  --_branch-status-color: var(--green-6-hsl);
}

.status-inactive {
  --_branch-status-color: var(--red-4-hsl);
  --_branch-badge-bg: var(--red-4-hsl);
  filter: grayscale(1);
  background-color: hsl(var(--gray-6-hsl) / 0.1);
  opacity: 0.5;
}

.branch-card__icon {
  background-color: hsla(var(--_branch-card-bg) / 0.15);
  border-radius: 50%;
  padding: var(--size-1);
  position: relative;
  transform: rotate(45deg);

  &::after {
    content: ' ';
    display: block;
    block-size: 0.5rem;
    aspect-ratio: 1;
    position: absolute;
    border-radius: 50%;
    right: -0.25rem;
    top: calc(50% - 0.25rem);
    bottom: calc(50% - 0.25rem);
    background-color: hsla(var(--_branch-status-color) / 1);
  }

  & :deep(.q-icon) {
    transform: rotate(-45deg);
    color: hsla(var(--_branch-card-bg) / 1);
  }
}

.slide-enter-active {
  transition: all 0.1s ease-out;
}

.slide-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-enter-from,
.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>
