<script setup lang="ts">
import { ref } from 'vue';
import { AddressForm } from 'components/form';
import EmployerFormBusiness from './EmployerFormBusiness.vue';
import EmployerFormContact from './EmployerFormContact.vue';
import { CustomerCreate } from 'stores/customer/types';
import EmployerFormAbout from './EmployerFormAbout.vue';
import EmployerFormAttachment from './EmployerFormAttachment.vue';
import {
  SaveButton,
  EditButton,
  DeleteButton,
  UndoButton,
} from 'components/button';

const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
  'customerBranch',
  { required: true },
);
const tab = ref('main');

defineEmits<{
  (e: 'edit'): void;
  (e: 'save'): void;
  (e: 'cancel'): void;
  (e: 'delete'): void;
}>();

defineProps<{
  index: number;
  customerName: string;
  readonly?: boolean;
  prefixId?: string;
  actionDisabled?: boolean;
  customerType?: 'CORP' | 'PERS';
}>();
</script>

<template>
  <span
    class="col-12 text-weight-bold row items-center q-mb-sm"
    :style="{ opacity: actionDisabled ? '.5' : undefined }"
    :id="`form-branch-customer-no-${index}`"
  >
    {{
      index === 0
        ? $t('customer.form.headQuarters.title')
        : $t('customer.form.branch.title', { name: index || 0 })
    }}
    <EditButton
      icon-only
      v-if="readonly"
      @click="$emit('edit')"
      class="q-ml-auto"
      type="button"
      :disabled="actionDisabled"
    />
    <DeleteButton
      icon-only
      v-if="readonly"
      @click="$emit('delete')"
      type="button"
      :disabled="actionDisabled"
    />
    <UndoButton
      icon-only
      v-if="!readonly"
      @click="$emit('cancel')"
      type="button"
      class="q-ml-auto"
      :disabled="actionDisabled"
    />
    <SaveButton
      icon-only
      v-if="!readonly"
      @click="$emit('save')"
      type="submit"
      :disabled="actionDisabled"
    />
  </span>

  <div class="col-12" :style="{ opacity: actionDisabled ? '.5' : undefined }">
    <div class="rounded bordered">
      <q-tabs
        v-model="tab"
        dense
        align="left"
        class="bordered-b"
        active-color="primary"
        no-caps
      >
        <q-tab name="main" :label="$t('customerBranch.tab.main')" />
        <q-tab name="address" :label="$t('customerBranch.tab.address')" />
        <q-tab name="business" :label="$t('customerBranch.tab.business')" />
        <q-tab name="contact" :label="$t('customerBranch.tab.contact')" />
        <q-tab name="attachment" :label="$t('customerBranch.tab.attachment')" />
      </q-tabs>
      <q-tab-panels v-model="tab">
        <q-tab-panel name="main">
          <EmployerFormAbout
            :index="index.toString()"
            :readonly="readonly"
            :customer-type="customerType"
            :customer-name="customerName"
            v-model:citizen-id="item.citizenId"
            v-model:id="item.id"
            v-model:legal-person-no="item.legalPersonNo"
            v-model:branch-code="item.code"
            v-model:customer-code="item.customerCode"
            v-model:register-company-name="item.registerCompanyName"
            v-model:register-name="item.registerName"
            v-model:register-name-en="item.registerNameEN"
            v-model:register-date="item.registerDate"
            v-model:authorized-capital="item.authorizedCapital"
          />
        </q-tab-panel>
        <q-tab-panel name="address">
          <AddressForm
            use-work-place
            :prefix-id="prefixId || 'employer'"
            hide-title
            dense
            :readonly="readonly"
            outlined
            :title="$t('form.address')"
            v-model:workplace="item.workplace"
            v-model:workplace-en="item.workplaceEN"
            v-model:address="item.address"
            v-model:addressEN="item.addressEN"
            v-model:province-id="item.provinceId"
            v-model:district-id="item.districtId"
            v-model:sub-district-id="item.subDistrictId"
            :addressTitle="$t('form.address')"
            :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
          />
        </q-tab-panel>
        <q-tab-panel name="business">
          <EmployerFormBusiness
            dense
            outlined
            :prefix-id="prefixId || 'employer'"
            :readonly="readonly"
            v-model:employment-office="item.employmentOffice"
            v-model:bussiness-type="item.businessType"
            v-model:bussiness-type-en="item.businessTypeEN"
            v-model:job-position="item.jobPosition"
            v-model:job-position-en="item.jobPositionEN"
            v-model:job-description="item.jobDescription"
            v-model:sale-employee="item.saleEmployee"
            v-model:pay-date="item.payDate"
            v-model:wage-rate="item.wageRate"
          />
        </q-tab-panel>
        <q-tab-panel name="contact">
          <EmployerFormContact
            :readonly="readonly"
            v-model:contactName="item.contactName"
            v-model:email="item.email"
            v-model:telephone="item.telephoneNo"
          />
        </q-tab-panel>
        <q-tab-panel name="attachment">
          <EmployerFormAttachment
            :readonly="readonly"
            v-model:attachment="item.file"
          />
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </div>
</template>
