<script setup lang="ts">
import { storeToRefs } from 'pinia'

import { useSearchDataStore } from '@/stores/searched-data'

const { isAdvSearchCall, advSearchDataRow, advSearchDataField } =
  storeToRefs(useSearchDataStore())
const optionsField = [
  { label: 'ชื่อเรื่อง (title)', value: 'title' },
  { label: 'คำสำคัญ (keyword)', value: 'keyword' },
  { label: 'หมวดหมู่ (category)', value: 'category' },
  { label: 'เนื้อหาในไฟล์ (content)', value: 'attachment.content' },
]
const optionsOp = [
  { label: 'และ', value: 'AND' },
  { label: 'หรือ', value: 'OR' },
]
const props = defineProps<{
  submitSearch: Function
  submitSearchData: {
    AND: {
      field: string
      value: string
      exact: boolean
    }[]
    OR: {
      field: string
      value: string
      exact: boolean
    }[]
  }
}>()

function addAdvSearchData() {
  advSearchDataRow.value.push({
    op: 'AND',
    field: 'title',
    value: '',
    exact: false,
  })
}
function delAdvSearchData(index: number) {
  advSearchDataRow.value.length > 1 && advSearchDataRow.value.splice(index, 1)
}
function clearAdvSearchData() {
  isAdvSearchCall.value = false
  advSearchDataRow.value = [
    {
      op: 'AND',
      field: 'title',
      value: '',
      exact: false,
    },
  ]
  advSearchDataField.value = {
    keyword: [],
    description: '',
  }
}
</script>

<template>
  <div>
    <q-btn
      flat
      color="primary"
      icon="mdi-tools"
      label="ค้นหาขั้นสูง"
      class="q-mt-sm"
      style="width: 148px"
      v-if="isAdvSearchCall === false"
      @click="() => (isAdvSearchCall = true)"
    />
  </div>

  <div v-if="isAdvSearchCall === true">
    <div class="col bg-white q-pa-sm">
      <div class="row items-center justify-between q-pb-md">
        <span class="text-primary text-weight-medium q-pl-md q-pt-xs"
          ><q-icon name="mdi-tools" class="q-pr-sm" size="sm" />
          ค้นหาขั้นสูง</span
        >
        <q-btn
          flat
          dense
          color="red"
          icon="close"
          @click="clearAdvSearchData"
          id="clearAdvSearchData"
        />
      </div>

      <div
        class="row q-px-lg items-center justify-start q-pb-md q-col-gutter-md"
        v-for="(item, index) in advSearchDataRow"
        :key="index"
      >
        <div
          class="col-md-1 col-1 row content-center"
          style="width: 45px; height: 45px"
        >
          <q-btn
            dense
            color="teal-5"
            icon="mdi-plus"
            v-if="index === advSearchDataRow.length - 1"
            @click="addAdvSearchData"
            id="addAdvSearchData"
          />
        </div>
        <div class="col-4 col-md-2">
          <q-select
            id="advSearchOp"
            dense
            outlined
            emit-value
            map-options
            v-model="item.op"
            :options="optionsOp"
          />
        </div>
        <div class="col-grow col-md-3">
          <q-select
            id="advSearchField"
            dense
            outlined
            emit-value
            map-options
            v-model="item.field"
            :options="optionsField"
          />
        </div>
        <div class="col-md-grow col-grow">
          <q-input
            id="advSearchValue"
            dense
            outlined
            v-model="item.value"
            placeholder="เอกสาร"
            @keydown.enter.prevent="submitSearch()"
            ><template v-slot:append>
              <q-icon
                v-if="item.value"
                name="close"
                @click="() => (item.value = '')"
                class="cursor-pointer"
              />
            </template>
          </q-input>
        </div>
        <div class="col-md-1 q-mr-xl">
          <q-checkbox
            id="specificBox"
            style="width: 200%"
            v-model="item.exact"
            label="ค้นหาตรงตัว"
            color="grey"
            keep-color
          />
        </div>
        <div class="row content-center">
          <q-btn
            dense
            flat
            icon="mdi-trash-can-outline"
            v-if="advSearchDataRow.length > 1"
            color="red"
            @click="() => delAdvSearchData(index)"
            id="delAdvSearchData"
          />
        </div>
      </div>

      <q-separator class="q-mb-md q-mt-sm" />

      <div class="row q-col-gutter-md q-pb-md q-pt-sm">
        <div class="col-12 col-md-5">
          <q-select
            outlined
            dense
            v-model="advSearchDataField.keyword"
            use-input
            use-chips
            multiple
            hide-dropdown-icon
            input-debounce="0"
            new-value-mode="add-unique"
            ><template v-slot:prepend
              ><span class="text-subtitle2">คำสำคัญ:</span></template
            ></q-select
          >
        </div>
        <div class="col-12 col-md-grow">
          <q-input
            id="advSearchDes"
            dense
            outlined
            @keydown.enter.prevent="submitSearch()"
            v-model="advSearchDataField.description"
            ><template v-slot:prepend
              ><span class="text-subtitle2">รายละเอียด:</span></template
            ><template v-slot:append>
              <q-icon
                v-if="advSearchDataField.description"
                name="close"
                @click="() => (advSearchDataField.description = '')"
                class="cursor-pointer"
              /> </template
          ></q-input>
        </div>
      </div>
    </div>
    <div class="row justify-end">
      <q-btn
        class="q-mt-md"
        style="width: 150px"
        color="primary"
        label="ค้นหา"
        icon="mdi-magnify"
        @click="() => props.submitSearch()"
        id="advSubmitSearch"
      />
    </div>
  </div>
</template>
