<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import axiosClient from '@/services/HttpService'

import type { EhrFile } from '@/stores/tree-data'
import { useSearchDataStore } from '@/stores/searched-data'
import { useLoader } from '@/stores/loader'

import AdvancedSearch from '@/modules/01_user/components/AdvancedSearch.vue'

const loaderStore = useLoader()
const { isSearch, isAdvSearchCall } = storeToRefs(useSearchDataStore())
const { getFoundFile } = useSearchDataStore()
const advSearchComp = ref<InstanceType<typeof AdvancedSearch>>()
const optionsField = [
  { label: 'ชื่อเรื่อง (title)', value: 'title' },
  { label: 'คำสำคัญ (keyword)', value: 'keyword' },
]
const searchData = ref<{
  field: string
  value: string
}>({
  field: 'title',
  value: '',
})
const submitSearchData = ref<{
  AND: { field: string; value: string }[]
  OR: { field: string; value: string }[]
}>({
  AND: [],
  OR: [],
})

async function searchSubmit() {
  if (searchData.value.value.trim() !== '') {
    submitSearchData.value = { AND: [], OR: [] }

    submitSearchData.value.AND.push({
      field: searchData.value.field,
      value: searchData.value.value,
    })
    submitSearchData.value.AND.push({
      field: 'fileName',
      value: searchData.value.value,
    })

    if (isAdvSearchCall.value && advSearchComp.value) {
      const advField = advSearchComp.value.advSearchDataField
      const advRow = advSearchComp.value.advSearchDataRow

      advRow.forEach((d: { field: string; value: string; op: string }) => {
        if (d.field && d.value.trim() !== '') {
          const op = d.op === 'AND' ? 'AND' : 'OR'
          submitSearchData.value[op].push({ field: d.field, value: d.value })
        }
      })
      if (advField.keyword.trim() !== '') {
        submitSearchData.value.AND.push({
          field: 'keyword',
          value: advField.keyword,
        })
      }
      if (advField.description.trim() !== '') {
        submitSearchData.value.AND.push({
          field: 'description',
          value: advField.description,
        })
      }
    }

    try {
      loaderStore.show()
      const res = await axiosClient.post<EhrFile[]>(
        `${import.meta.env.VITE_API_ENDPOINT}/search`,
        submitSearchData.value
      )
      console.log(submitSearchData.value);
      console.log(res.data);
      
      getFoundFile(res.data)
      isSearch.value = true
    } catch (error) {
      console.error('Error during the request', error)
    } finally {
      loaderStore.hide()
    }
  }
}
</script>

<template>
  <div class="q-pa-md bg-grey-1">
    <div class="row items-center q-col-gutter-md">
      <div class="col-12 col-md-3">
        <q-select
          dense
          outlined
          emit-value
          map-options
          class="bg-white"
          v-model="searchData.field"
          :options="optionsField"
        />
      </div>
      <div class="col-12 col-md-grow">
        <q-input
          class="bg-white"
          dense
          outlined
          v-model="searchData.value"
          placeholder="เอกสาร"
          @keydown.enter.prevent="searchSubmit"
        >
          <template v-slot:append>
            <q-icon
              name="close"
              @click="() => (searchData.value = '', isSearch = false)"
              class="cursor-pointer"
            />
          </template>
        </q-input>
      </div>
    </div>

    <div class="column">
      <div class="row items-center justify-between q-gutter-y-md q-pt-sm">
        <div class="column col-grow">
          <advanced-search
            ref="advSearchComp"
            :searchSubmit="searchSubmit"
            :submit-search-data="submitSearchData"
          />
        </div>
        <div v-if="isAdvSearchCall === false">
          <q-btn
            style="width: 150px"
            color="primary"
            label="ค้นหา"
            icon="mdi-magnify"
            @click="searchSubmit"
          />
        </div>
      </div>
    </div>
  </div>
  <q-separator />
</template>
