<script setup lang="ts">
import { ref } from 'vue';
import { SaveButton, UndoButton } from 'components/button';

import { VuePDF, usePDF } from '@tato30/vue-pdf';

const currentFileUrl = defineModel<string>('currentFileUrl');
const { pdf, pages } = usePDF(currentFileUrl);

const selected = defineModel<string>('selected');
const file = defineModel<File | null>('file');

const scale = ref(1);
const page = ref(1);

const currentTab = ref<string>('information');

const currentIndexDropdownList = ref(0);

const props = withDefaults(
  defineProps<{
    tree?: { label: string; children: { label: string }[] }[];
    dropdownList?: string[];
  }>(),
  {
    tree: () => [],
  },
);

function browse() {
  inputFile?.click();
}

const inputFile = (() => {
  const _element = document.createElement('input');
  _element.type = 'file';
  _element.accept = 'image/jpeg,image/png';
  _element.addEventListener('change', change);
  return _element;
})();

function change(e: Event) {
  const _element = e.target as HTMLInputElement | null;
  const _file = _element?.files?.[0];

  if (_file) {
    const reader = new FileReader();
    reader.readAsDataURL(_file);
    reader.onload = () => {
      currentFileUrl.value = reader.result as string;
    };

    if (_file) file.value = _file;

    emit(
      'sendOcr',
      props.dropdownList?.[currentIndexDropdownList.value] || '',
      inputFile?.files?.[0],
    );
  }
}

const tabsList = [
  {
    label: 'information',
    name: 'information',
  },
  {
    label: 'document',
    name: 'document',
  },
];

const emit = defineEmits<{
  (e: 'sendOcr', dropdown: string, file?: File): void;
}>();
</script>

<template>
  <div class="full-height full-width row">
    <div>
      <div class="q-pa-sm text-center bordered" style="height: 50px">
        <q-btn-dropdown icon="mdi-upload" color="info" label="อัปโหลดเอกสาร">
          <q-list v-for="(v, i) in dropdownList" :key="v">
            <q-item
              clickable
              v-close-popup
              @click="
                () => {
                  currentIndexDropdownList = i;
                  browse();
                }
              "
            >
              <q-item-section>
                <q-item-label>{{ v }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </div>

      <div class="full-height bordered-l bordered-b q-pa-sm">
        <q-tree
          :nodes="tree || []"
          node-key="label"
          selected-color="primary"
          v-model:selected="selected"
          default-expand-all
        />
      </div>
    </div>

    <div class="col">
      <div
        class="bordered row items-center justify-evenly q-pa-sm"
        style="height: 50px"
      >
        <q-btn
          @click="page = page > 1 ? page - 1 : page"
          class="btn-next"
          icon="mdi-chevron-left"
          unelevated
          dense
          id="btn-prev-page-top"
        />

        <div>Page {{ page }} of {{ pages }}</div>

        <q-btn
          @click="scale = scale > 0.25 ? scale - 0.25 : scale"
          flat
          dense
          round
          size="12px"
          icon="mdi-magnify-minus-outline"
          class="app-text-dark"
        >
          <q-tooltip>{{ $t('zoomOut') }}</q-tooltip>
        </q-btn>
        <div>{{ scale * 100 }}%</div>

        <q-btn
          flat
          dense
          round
          size="12px"
          class="app-text-dark"
          icon="mdi-magnify-plus-outline"
          @click="scale = scale < 2 ? scale + 0.25 : scale"
        >
          <q-tooltip>{{ $t('zoomIn') }}</q-tooltip>
        </q-btn>

        <q-btn
          @click="page = page < pages ? page + 1 : page"
          class="btn-next"
          icon="mdi-chevron-right"
          unelevated
          dense
          id="btn-prev-page-top"
        />
      </div>

      <div
        class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
      >
        <VuePDF
          v-if="file?.type === 'application/pdf'"
          class="q-py-md"
          :pdf="pdf"
          :page="page"
          :scale="scale"
        />
        <q-img v-else class="q-py-md full-width" :src="currentFileUrl" />
      </div>
    </div>

    <div class="col-4">
      <div
        class="bordered row items-center justify-between q-pa-sm"
        style="height: 50px"
      >
        ข้อมูลหนังสือเดินทาง

        <div class="row">
          <UndoButton icon-only type="button" />
          <SaveButton icon-only type="button" />
        </div>
      </div>

      <div class="bordered-r bordered-b full-height">
        <q-tabs
          dense
          inline-label
          mobile-arrows
          v-model="currentTab"
          active-class="active-tab text-weight-bold"
          class="app-text-muted full-width"
          align="left"
        >
          <q-tab
            :id="`tab-${tab.label}`"
            v-for="tab in tabsList"
            v-bind:key="tab.name"
            class="content-tab text-capitalize"
            :name="tab.name"
            :label="$t(tab.label)"
          />
        </q-tabs>
      </div>
    </div>
  </div>
</template>

<style lang="scss"></style>
