<script setup lang="ts">
import DialogForm from 'src/components/DialogForm.vue';
import DrawerInfo from 'src/components/DrawerInfo.vue';
import ProfileBanner from 'src/components/ProfileBanner.vue';
import SideMenu from 'src/components/SideMenu.vue';
import FormBasicInfoAgencies from 'src/components/07_agencies-management/FormBasicInfoAgencies.vue';
import AddressForm from 'src/components/form/AddressForm.vue';
import {
  UndoButton,
  SaveButton,
  EditButton,
  DeleteButton,
} from 'src/components/button';
import { InstitutionPayload } from 'src/stores/institution/types';

const model = defineModel<boolean>({ required: true, default: false });
const drawerModel = defineModel<boolean>('drawerModel', {
  required: true,
  default: false,
});

withDefaults(
  defineProps<{
    readonly?: boolean;
    isEdit?: boolean;
  }>(),
  { readonly: false, isEdit: false },
);

defineEmits<{
  (e: 'submit'): void;
  (e: 'close'): void;
  (e: 'changeStatus'): void;
  (e: 'drawerUndo'): void;
  (e: 'drawerEdit'): void;
  (e: 'drawerDelete'): void;
}>();

const data = defineModel<InstitutionPayload>('data', {
  required: true,
  default: {
    group: '',
    name: '',
    nameEN: '',
    code: '',
    addressEN: '',
    address: '',
    soi: '',
    soiEN: '',
    moo: '',
    mooEN: '',
    street: '',
    streetEN: '',
    subDistrictId: '',
    districtId: '',
    provinceId: '',
  },
});
</script>
<template>
  <DialogForm
    hide-footer
    :title="$t('general.add', { text: $t('agencies.title') })"
    v-model:modal="model"
    :submit="() => $emit('submit')"
    :close="() => $emit('close')"
  >
    <div
      :class="{
        'q-mx-lg q-my-md': $q.screen.gt.sm,
        'q-mx-md q-my-sm': !$q.screen.gt.sm,
      }"
    >
      <ProfileBanner
        no-image-action
        readonly
        active
        hide-fade
        hide-active
        :icon="'ph-building-office'"
        :title="data.name"
        :caption="data.code"
        :color="`hsla(var(--green-8-hsl)/1)`"
        :bg-color="`hsla(var(--green-8-hsl)/0.1)`"
      />
      <!-- v-model:toggle-status="currentStatusGroupType"
        @update:toggle-status="
          () => {
            currentStatusGroupType =
              currentStatusGroupType === 'CREATED' ? 'INACTIVE' : 'CREATED';
          }
        " -->
    </div>

    <div
      class="col surface-1 rounded bordered scroll row relative-position"
      :class="{
        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
      }"
      id="group-form"
    >
      <div
        class="col"
        style="height: 100%; max-height: 100; overflow-y: auto"
        v-if="$q.screen.gt.sm"
      >
        <div class="q-py-md q-pl-md q-pr-sm">
          <SideMenu
            :menu="[
              {
                name: $t('form.field.basicInformation'),
                anchor: 'agencies-basic-info',
              },
              {
                name: $t('general.address'),
                anchor: 'agencies-address-info',
              },
            ]"
            background="transparent"
            :active="{
              background: 'hsla(var(--blue-6-hsl) / .2)',
              foreground: 'var(--blue-6)',
            }"
            scroll-element="#agencies-form-content"
          />
        </div>
      </div>
      <div
        class="col-12 col-md-10"
        id="agencies-form-content"
        :class="{
          'q-py-md q-pr-md ': $q.screen.gt.sm,
          'q-py-md q-px-lg': !$q.screen.gt.sm,
        }"
        style="height: 100%; max-height: 100%; overflow-y: auto"
      >
        <div
          class="q-py-md q-px-lg"
          style="position: absolute; z-index: 99999; top: 0; right: 0"
        >
          <div class="surface-1 row rounded">
            <SaveButton id="btn-info-basic-save" icon-only type="submit" />
          </div>
        </div>
        <FormBasicInfoAgencies
          id="agencies-basic-info"
          class="q-mb-xl"
          v-model:group="data.group"
          v-model:name="data.name"
          v-model:name-en="data.nameEN"
        />
        <AddressForm
          id="agencies-address-info"
          dense
          :prefix-id="''"
          v-model:address="data.address"
          v-model:address-en="data.addressEN"
          v-model:moo="data.moo"
          v-model:moo-en="data.mooEN"
          v-model:soi="data.soi"
          v-model:soi-en="data.soiEN"
          v-model:street="data.street"
          v-model:street-en="data.streetEN"
          v-model:province-id="data.provinceId"
          v-model:district-id="data.districtId"
          v-model:sub-district-id="data.subDistrictId"
        />
      </div>
    </div>
  </DialogForm>

  <DrawerInfo
    bg-on
    hide-action
    :is-edit="isEdit"
    :title="data.name"
    v-model:drawerOpen="drawerModel"
    :submit="() => $emit('submit')"
    :close="() => $emit('close')"
  >
    <div class="col column full-height">
      <div
        :class="{
          'q-mx-lg q-my-md': $q.screen.gt.sm,
          'q-mx-md q-my-sm': !$q.screen.gt.sm,
        }"
      >
        <ProfileBanner
          no-image-action
          readonly
          active
          hide-fade
          hide-active
          :icon="'ph-building-office'"
          :title="data.name"
          :caption="data.code"
          :color="`hsla(var(${'--green-8'}-hsl)/1)`"
          :bg-color="`hsla(var(${'--green-8'}-hsl)/0.1)`"
        />
      </div>

      <div
        style="flex: 1; width: 100%; overflow-y: auto"
        id="drawer-user-form"
        :class="{
          'q-px-lg q-pb-lg': $q.screen.gt.sm,
          'q-px-md q-pb-sm': !$q.screen.gt.sm,
        }"
      >
        <div
          class="col surface-1 full-height rounded bordered scroll row relative-position"
        >
          <div
            class="rounded row"
            :class="{
              'q-py-md q-px-lg': $q.screen.gt.sm,
              'q-py-sm q-px-lg': !$q.screen.gt.sm,
            }"
            style="position: absolute; z-index: 999; top: 0; right: 0"
          >
            <div v-if="true" class="surface-1 row rounded">
              <UndoButton
                v-if="isEdit"
                id="btn-info-basic-undo"
                icon-only
                @click="
                  () => {
                    $emit('drawerUndo');
                  }
                "
                type="button"
              />
              <SaveButton
                v-if="isEdit"
                id="btn-info-basic-save"
                icon-only
                type="submit"
              />
              <EditButton
                v-if="!isEdit"
                id="btn-info-basic-edit"
                icon-only
                @click="
                  () => {
                    $emit('drawerEdit');
                    // infoDrawerEdit = true;
                    // isImageEdit = true;
                  }
                "
                type="button"
              />
              <DeleteButton
                v-if="!isEdit"
                id="btn-info-basic-delete"
                icon-only
                @click="
                  () => {
                    $emit('drawerDelete');
                  }
                "
                type="button"
              />
            </div>
          </div>
          <div
            class="col"
            style="height: 100%; overflow-y: auto"
            v-if="$q.screen.gt.sm"
          >
            <div class="q-py-md q-pl-md q-pr-sm">
              <SideMenu
                :menu="[
                  {
                    name: $t('form.field.basicInformation'),
                    anchor: 'agencies-basic-info',
                  },
                  {
                    name: $t('general.address'),
                    anchor: 'agencies-address-info',
                  },
                ]"
                background="transparent"
                :active="{
                  background: 'hsla(var(--blue-6-hsl) / .2)',
                  foreground: 'var(--blue-6)',
                }"
                scroll-element="#agencies-form-content"
              />
            </div>
          </div>

          <div
            class="col-12 col-md-10 relative-position"
            :class="{
              'q-py-md q-pr-md ': $q.screen.gt.sm,
              'q-py-md q-px-lg': !$q.screen.gt.sm,
            }"
            id="user-form-content"
            style="height: 100%; max-height: 100; overflow-y: auto"
          >
            <FormBasicInfoAgencies
              id="agencies-basic-info"
              :readonly
              onDrawer
              class="q-mb-xl"
              v-model:group="data.group"
              v-model:name="data.name"
              v-model:name-en="data.nameEN"
            />
            <AddressForm
              id="agencies-address-info"
              dense
              :readonly
              :prefix-id="data.code ? data.code : ''"
              v-model:address="data.address"
              v-model:address-en="data.addressEN"
              v-model:moo="data.moo"
              v-model:moo-en="data.mooEN"
              v-model:soi="data.soi"
              v-model:soi-en="data.soiEN"
              v-model:street="data.street"
              v-model:street-en="data.streetEN"
              v-model:province-id="data.provinceId"
              v-model:district-id="data.districtId"
              v-model:sub-district-id="data.subDistrictId"
            />
          </div>
        </div>
      </div>
    </div>
  </DrawerInfo>
</template>
<style scoped></style>
