<script lang="ts" setup>
import { ref } from 'vue';
import { QSelect } from 'quasar';

import AppBox from 'components/app/AppBox.vue';
import MainDialog from 'components/05_quotation/MainDialog.vue';
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
import QuotationFormInfo from './QuotationFormInfo.vue';
import { AddButton, SaveButton } from 'components/button';

defineProps<{
  readonly?: boolean;
}>();

const dialogState = defineModel<boolean>({ default: true });

const selectedBranchIssuer = ref('');
const selectedCustomer = ref('');
const toggleWorker = ref(true);

const quotationNo = ref('');
const actor = ref('');
const workName = ref('');
const contactor = ref('');
const telephone = ref('');
const documentReceivePoint = ref('');
const dueDate = ref('');
const payType = ref('');
const paySplitCount = ref('');
const payBank = ref('');
</script>

<template>
  <MainDialog v-model:state="dialogState">
    <template #title>
      <span class="text-weight-medium" style="color: var(--brand-1)">
        {{ $t('quotation.form.createTitle') }}
      </span>
    </template>

    <div class="row q-pa-md items-center">
      <div style="flex: 1"><q-img src="/logo.png" width="8rem" /></div>
      <q-select
        v-model="selectedBranchIssuer"
        :options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
        :label="$t('quotation.form.customerBranchSelect')"
        id="select-branch-issuer"
        for="select-branch-issuer"
        style="width: 300px"
        class="q-mr-md"
        outlined
        dense
      />
      <q-select
        v-model="selectedCustomer"
        :options="[{ label: 'Customer 1', value: 'Customer 1' }]"
        :label="$t('quotation.form.customerSelect')"
        id="select-customer"
        for="select-customer"
        style="width: 300px"
        outlined
        dense
      />
    </div>

    <div
      class="surface-2 bordered-t row"
      style="flex-grow: 1; overflow-y: hidden"
      :style="{
        overflowY: $q.screen.gt.sm ? 'hidden' : 'auto',
      }"
    >
      <div
        class="col-12 col-sm-9 row"
        style="padding: var(--size-3); overflow-y: auto"
        :style="{
          paddingRight: $q.screen.gt.sm ? 'var(--size-2)' : 'var(--size-3)',
          maxHeight: $q.screen.gt.sm ? '100%' : undefined,
        }"
      >
        <div class="col">
          <AppBox bordered style="padding: var(--size-3)">
            <div class="row items-center q-mb-sm">
              <span style="flex: 1">
                {{ $t('quotation.label.listWorker') }}
                <q-toggle
                  v-model="toggleWorker"
                  id="toggle-status"
                  size="md"
                  padding="none"
                  class="q-ml-md"
                  dense
                />
              </span>
              <AddButton icon-only />
            </div>

            <AppBox class="surface-2 worker-list" v-if="toggleWorker" bordered>
              <WorkerItem
                v-for="_ in Array(20)"
                :data="{
                  no: 1,
                  refNo: 'CC6613334',
                  nationality: 'Thai',
                  birthDate: '1 May 2001',
                  age: '23 Years',
                  fullName: 'Methapon Metanipat',
                  docExpireDate: '16 May 2025',
                }"
                color="male"
              />
            </AppBox>
          </AppBox>
        </div>
      </div>
      <div
        class="col-12 col-sm-3"
        style="padding: var(--size-3); overflow-y: auto"
        :style="{
          paddingLeft: $q.screen.gt.sm ? 'var(--size-1)' : 'var(--size-3)',
          maxHeight: $q.screen.gt.sm ? '100%' : undefined,
        }"
      >
        <QuotationFormInfo
          v-model:quotation-no="quotationNo"
          v-model:actor="actor"
          v-model:work-name="workName"
          v-model:contactor="contactor"
          v-model:telephone="telephone"
          v-model:document-receive-point="documentReceivePoint"
          v-model:due-date="dueDate"
          v-model:pay-type="payType"
          v-model:pay-bank="payBank"
          v-model:pay-split-count="paySplitCount"
          :readonly
        />
      </div>
    </div>

    <template #footer>
      <div class="row justify-end full-width">
        <SaveButton />
      </div>
    </template>
  </MainDialog>
</template>

<style scoped>
.worker-list > :deep(*:not(:last-child)) {
  margin-bottom: var(--size-2);
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  font-size: 1.5rem;
  padding: var(--size-1);
  border-radius: var(--radius-2);
}

.bg-color-orange {
  --_color: var(--yellow-7-hsl);
  color: white;
  background: hsla(var(--_color));
}

.dark .bg-color-orange {
  --_color: var(--orange-6-hsl);
}

.bg-color-orange-light {
  --_color: var(--yellow-7-hsl);
  background: hsla(var(--_color) / 0.2);
}
.dark .bg-color-orange {
  --_color: var(--orange-6-hsl / 0.2);
}
</style>
