<script setup lang="ts">
import { Branch } from '../../stores/branch/types';
import AppBox from '../app/AppBox.vue';

defineProps<{
  data?: Branch;
}>();

const open = defineModel('open', { type: Boolean, default: false });

defineEmits<{
  (e: 'triggerEdit', data?: Branch): void;
  (e: 'triggerDelete', data?: Branch): void;
}>();
</script>

<template>
  <q-drawer
    overlay
    behavior="mobile"
    bordered
    class="q-pa-md"
    side="right"
    tabindex="0"
    :width="500"
    :breakpoint="500"
    v-model="open"
  >
    <q-toolbar class="q-mb-md q-pa-none">
      <q-toolbar-title>
        <span class="text-weight-bold q-mr-sm">รายละเอียดสำนักงานใหญ่</span>

        <q-btn
          icon="mdi-pencil-outline"
          class="app-text-info"
          fab-mini
          flat
          @click.stop="$emit('triggerEdit', data)"
        />
        <q-btn
          icon="mdi-trash-can-outline"
          :class="{
            'app-text-negative': data?.status === 'CREATED',
            'app-text-muted': data?.status !== 'CREATED',
          }"
          :disable="data?.status !== 'CREATED'"
          fab-mini
          flat
          @click.stop="$emit('triggerDelete', data)"
        />
      </q-toolbar-title>
      <q-btn
        v-close-popup
        flat
        round
        dense
        icon="mdi-close"
        color="red"
        @click="open = false"
        id="fileFormIconClose"
      />
    </q-toolbar>

    <section class="q-mb-md">
      <AppBox class="row q-pa-sm" bordered>
        <div class="col-5 app-text-muted">รหัสสาขา</div>
        <div class="col-7">{{ data?.code }}</div>
        <div class="col-5 app-text-muted">เลขประชำตัวผู้เสียภาษี</div>
        <div class="col-7">{{ data?.taxNo }}</div>
        <div class="col-5 app-text-muted">ชื่อสาขา ภาษาไทย</div>
        <div class="col-7">{{ data?.name }}</div>
        <div class="col-5 app-text-muted">ชื่อสาขา ภาษาอังกฤษ</div>
        <div class="col-7">{{ data?.nameEN }}</div>

        <div
          class="app-text-info col-12 q-my-md text-weight-bold"
          :class="{ dark: $q.dark.isActive }"
        >
          ที่อยู่สาขา
        </div>

        <div class="col-3 app-text-muted">ที่อยู่</div>
        <div class="col-9">{{ data?.address }}</div>
        <div class="col-3 app-text-muted">แขวง/ตำบล</div>
        <div class="col-3">
          {{ data?.subDistrict?.name }}
        </div>
        <div class="col-3 app-text-muted">เขต/อำเภอ</div>
        <div class="col-3">{{ data?.district?.name }}</div>
        <div class="col-3 app-text-muted">จังหวัด</div>
        <div class="col-3">{{ data?.province?.name }}</div>
        <div class="col-3 app-text-muted">รหัสไปรษณีย์</div>
        <div class="col-3">{{ data?.zipCode }}</div>

        <div
          class="app-text-info col-12 q-my-md text-weight-bold"
          :class="{ dark: $q.dark.isActive }"
        >
          ที่อยู่สาขา ENG
        </div>

        <div class="col-3 app-text-muted">Address</div>
        <div class="col-9">{{ data?.addressEN }}</div>
        <div class="col-3 app-text-muted">Subdistrict</div>
        <div class="col-3">{{ data?.subDistrict?.nameEN }}</div>
        <div class="col-3 app-text-muted">District</div>
        <div class="col-3">{{ data?.district?.nameEN }}</div>
        <div class="col-3 app-text-muted">Province</div>
        <div class="col-3">{{ data?.province?.nameEN }}</div>
        <div class="col-3 app-text-muted">Zip code</div>
        <div class="col-3">{{ data?.zipCode }}</div>
      </AppBox>
    </section>

    <section class="q-mb-md">
      <AppBox class="q-pa-sm" bordered>
        <div class="row">
          <div class="col-8">
            <div class="row card-details-row-height">
              <div class="col-5 color-text-static">เบอร์โทรศัพท์สาขา</div>
              <div class="col">{{ data?.telephoneNo }}</div>
            </div>
            <div class="row card-details-row-height">
              <div class="col-5 color-text-static">อีเมลติดต่อสาขา</div>
              <div class="col">{{ data?.email }}</div>
            </div>
          </div>
          <div class="col full-width">
            <div
              class="column"
              style="border-radius: 6px; border: 1px solid #e0e0e0"
            >
              <div class="col q-pa-sm" style="border-bottom: 1px solid #e0e0e0">
                Id line
              </div>
              <div class="col flex flex-center full-width bg-grey-3 q-pa-sm">
                <q-img
                  src="/qrcode.png"
                  spinner-color="white"
                  style="height: 80px; max-width: 80px"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col color-text-static">location</div>
          <div class="col"></div>
        </div>
      </AppBox>
    </section>
  </q-drawer>
</template>

<style scoped>
.color-card-text-code {
  --_color-card-text-code: var(--gray-12);
  color: var(--_color-card-text-code);

  &.dark {
    --_color-card-text-code: var(--cyan-6);
  }
}

.color-text-static {
  --_details-text-static-color: var(--gray-6);
  color: var(--_details-text-static-color);
}

.card-details-row-height {
  height: 40px;
}
</style>
