<script setup lang="ts">
import { ref } from 'vue';
import AppBox from 'components/app/AppBox.vue';

defineProps<{
  title: string;
  addressLocaleTitle: string;
  addressEngTitle: string;
}>();

interface Address {
  address: string;
  province: string;
  district: string;
  subDistrict: string;
  zip: string;
}

const modal = defineModel('modal', { default: false });
const addressL = defineModel<Address>('addressL');
const addressEng = defineModel<Address>('addressEng');

const addrOptions = ref({
  provinceOps: [
    { label: 'เชียงใหม่', value: '1' },
    { label: 'เชียงราย', value: '2' },
  ],
  districtOps: [
    { label: 'อำเภอ1', value: '1' },
    { label: 'อำเภอ2', value: '2' },
  ],
  subDistrictOps: [
    { label: 'ตำบล1', value: '1' },
    { label: 'ตำบล2', value: '2' },
  ],
});
</script>
<template>
  <q-dialog full-width v-model="modal">
    <AppBox
      v-if="addressL && addressEng"
      style="padding: 0; border-radius: var(--radius-2)"
    >
      <!-- header -->
      <q-card-section class="form-header">
        <div class="row items-center justity-between">
          <div
            class="col text-subtitle1 text-weight-bold"
            style="color: hsl(var(--info-bg))"
          >
            {{ title }}
          </div>
          <q-btn
            round
            flat
            icon="mdi-close"
            padding="xs"
            class="close-btn"
            :class="{ dark: $q.dark.isActive }"
            v-close-popup
          />
        </div>
      </q-card-section>

      <!-- form-top -->
      <div class="form-body-top" :class="{ dark: $q.dark.isActive }">
        <q-card-section class="column col-12">
          <div class="row q-col-gutter-x-md">
            <slot name="top"></slot>
          </div>
        </q-card-section>
      </div>

      <!-- form-mid -->
      <div class="row" style="overflow-y: auto; max-height: 60vh">
        <!-- prepend -->
        <q-card-section
          class="column col-4"
          v-if="$slots.prepend && !$slots.append"
        >
          <slot name="prepend"></slot>
        </q-card-section>
        <!-- center -->
        <q-card-section
          class="column"
          :class="`${$slots.prepend ? 'col-8' : 'col-6'}`"
        >
          <div
            class="row inline col-12 q-col-gutter-x-md"
            style="row-gap: 16px"
          >
            <slot name="midTop"></slot>
            <div class="col-12">
              {{ addressLocaleTitle }}
            </div>
            <q-input
              dense
              outlined
              label="ที่อยู่"
              class="col-12"
              v-model="addressL.address"
            />
            <q-select
              dense
              outlined
              emit-value
              map-options
              v-model="addressL.province"
              option-value="value"
              option-label="label"
              label="จังหวัด"
              class="col-3"
              :options="addrOptions.provinceOps"
            />
            <q-select
              dense
              outlined
              emit-value
              map-options
              v-model="addressL.district"
              option-value="value"
              option-label="label"
              label="อำเภอ"
              class="col-3"
              :options="addrOptions.districtOps"
            />
            <q-select
              dense
              outlined
              emit-value
              map-options
              v-model="addressL.subDistrict"
              option-value="value"
              option-label="label"
              label="ตำบล"
              class="col-3"
              :options="addrOptions.subDistrictOps"
            />
            <q-input
              dense
              readonly
              outlined
              label="รหัสไปรษณีย์"
              class="col-3"
              v-model="addressL.zip"
            />
            <span class="col-12">
              {{ addressEngTitle }}
            </span>
            <q-input
              dense
              outlined
              label="ที่อยู่"
              class="col-12"
              v-model="addressEng.address"
            />
            <q-select
              dense
              outlined
              emit-value
              map-options
              v-model="addressEng.province"
              option-value="value"
              option-label="label"
              label="จังหวัด"
              class="col-3"
              :options="addrOptions.provinceOps"
            />
            <q-select
              dense
              outlined
              emit-value
              map-options
              v-model="addressEng.district"
              option-value="value"
              option-label="label"
              label="อำเภอ"
              class="col-3"
              :options="addrOptions.districtOps"
            />
            <q-select
              dense
              outlined
              emit-value
              map-options
              v-model="addressEng.subDistrict"
              option-value="value"
              option-label="label"
              label="ตำบล"
              class="col-3"
              :options="addrOptions.subDistrictOps"
            />
            <q-input
              dense
              readonly
              outlined
              label="รหัสไปรษณีย์"
              class="col-3"
              v-model="addressEng.zip"
            />
            <div class="col-12" v-if="$slots.midBottom">
              <q-separator size="1px" />
            </div>
            <slot name="midBottom"></slot>
          </div>
        </q-card-section>
        <!-- append -->
        <q-card-section
          class="column col-6"
          v-if="$slots.append && !$slots.prepend"
        >
          <slot name="append"></slot>
        </q-card-section>
      </div>

      <!-- footer -->
      <q-card-section class="form-footer">
        <div class="text-right">
          <q-btn
            dense
            unelevated
            color="primary"
            class="q-px-sm"
            :label="$t('save')"
          />
        </div>
      </q-card-section>
    </AppBox>
  </q-dialog>
</template>

<style scoped lang="scss">
.close-btn {
  color: hsl(var(--negative));
  background-color: hsla(var(--negative) / 0.1);

  &.dark {
    background-color: transparent;
    border: 1px solid hsl(var(--negative));
  }
}

.form-header {
  border-bottom: 1px solid var(--border-color);
}

.form-body-top {
  --_body-bg: var(--sand-0);
  background-color: var(--_body-bg);

  &.dark {
    --_body-bg: var(--gray-10);
  }
}

.form-footer {
  border-top: 1px solid var(--border-color);
}
</style>
