<script setup>
import { SelectBox } from 'tedir-select'

const props = defineProps({
  modelValue: String,
  entries: Object,
  action: String
})

const emit = defineEmits(['update:modelValue', 'handler'])

const loading = ref({})
const getOptions = ref({})
const setOptions = async (url, key) => {
  loading.value[key] = true
  const res = await $fetch('/api/'+url, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    getOptions.value[key] = res
  }
  loading.value[key] = false
}

const tab = ref(props.modelValue || 'request_status')
const entries = ref({
  request_status: []
})
const tabs = ref([
  {value: 'request_status', text: 'Request Status'}
])

watch(() => props.modelValue, () => {
  tab.value = props.modelValue
})

const loadEntries = () => {
  if(props?.entries) {
    entries.value = props.entries
  }
}
onMounted(loadEntries)
watch(() => props.entries, loadEntries)

const addEntry = () => {
  if(tab.value === 'request_status') {
    entries.value.request_status.push({
      id: '',
      name: '',
      value: '',
      seqNo: '',
      timeoutDays: '',
      description: '',
      help: '',
      isDefault: '',
      isOpen: '',
      isClosed: '',
      isWebCanUpdate: '',
      isFinalClose: '',
      isActive: true,
      show: true
    })
  }

  emit('handler', tab.value, entries.value)
}
const mutateEntry = () => {
  emit('handler', tab.value, entries.value)
}
const destroyEntry = async (entry, index) => {
  entries.value[tab.value].splice(index, 1)

  if(entry.id) {
    await $fetch('/api/requests/request-categories/'+entry.id+'/'+tab.value.replaceAll('_', '-'), {
      method: 'DELETE',
      headers: useRequestHeaders(['cookie'])
    })
  }
  emit('handler', tab.value, entries.value)
}

const openTab = async (val) => {
  if(tab.value !== val) {
    tab.value = val
    emit('update:modelValue', tab.value)
    emit('handler', tab.value, entries.value)
    sessionStorage.setItem('request_status_updates_detail_record', tab.value)
  }
}
onMounted(() => {
  const getSessionStorageTab = sessionStorage.getItem('request_status_updates_detail_record')
  if(getSessionStorageTab) {
    openTab(getSessionStorageTab)
  }
})
</script>

<template>
  <div class="card sd-none bd-1px_solid_hexe4e3e6">
    <DetailRecordTab v-model="tab" :tabs="tabs" @handler="(val) => openTab(val.value)" />
    <div class="cardBody p-0px">
      <div class="tableResponsive">
        <table class="table tableList tableFlush" @mouseout="mutateEntry">
          <thead>
            <tr v-if="tab === 'request_status'">
              <th>Sequence *</th>
              <th>Name *</th>
              <th class="w-100px">Active</th>
              <th class="w-100px">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="Number(entries[tab]?.length || 0) === 0">
              <td colspan="4" class="align-center">No detail record yet, please add a new one.</td>
            </tr>
            <template v-if="tab === 'request_status'">
              <template v-for="(entry, index) in entries[tab]" :key="index">
                <tr>
                  <td>
                    <div v-if="action === 'view'">{{ entry.seqNo }}</div>
                    <div v-else>
                      <input type="text" class="input" v-model="entry.seqNo" />
                    </div>
                  </td>
                  <td>
                    <div v-if="action === 'view'">{{ entry.name }}</div>
                    <div v-else>
                      <input type="text" class="input" v-model="entry.name" @input="entry.value = (action === 'add') ? entry.name : entry.value" />
                    </div>
                  </td>
                  <td>
                    <div class="check">
                      <input type="checkbox" v-model="entry.isActive" class="checkInput" :id="'isActive_'+tab+'_'+index" :checked="entry.isActive" :disabled="action === 'view'">
                      <label class="checkLabel" :for="'isActive_'+tab+'_'+index">Active</label>
                    </div>
                  </td>
                  <td>
                    <div class="d-flex justify-flexEnd gap-5px">
                      <span @click="entry.show = !entry.show" class="cursor-pointer fg-primary">
                        <i class="menu-icon tf-icons ti" :class="entry?.show ? 'ti-eye-off' : 'ti-eye'"></i>
                      </span>
                      <span v-if="action !== 'view'" @click="destroyEntry(entry, index)" class="cursor-pointer fg-danger">
                        <i class="menu-icon tf-icons ti ti-trash"></i>
                      </span>
                    </div>
                  </td>
                </tr>
                <tr v-if="entry?.show">
                  <td colspan="4">
                    <div class="row mb-2 mt-2">     
                      <div class="col-md-6 mb-2">
                        <label class="label">Search Key</label>
                        <input type="text" class="input" v-model="entry.value" :readonly="action === 'view'" />
                      </div>
                      <div class="col-md-6 mb-2">
                        <label class="label">Timeout in Days</label>
                        <input type="text" class="input" v-model="entry.timeoutDays" :readonly="action === 'view'" />
                      </div>
                      <div class="col-md-12 mb-2">
                        <label class="label">Description</label>
                        <textarea v-model="entry.description" class="input" :readonly="action === 'view'"></textarea>
                      </div>
                      <div class="col-md-12 mb-2">
                        <label class="label">Comment/Help</label>
                        <textarea v-model="entry.help" class="input" :readonly="action === 'view'"></textarea>
                      </div>
                      <div class="col-md-12">
                        <label class="label d-block mb-2">Status</label>
                        <div class="check">
                          <input type="checkbox" v-model="entry.isDefault" class="checkInput" :id="'isDefault_'+tab+'_'+index" :checked="entry.isDefault" :disabled="action === 'view'">
                          <label class="checkLabel" :for="'isDefault_'+tab+'_'+index">Default</label>
                        </div>
                        <div class="check">
                          <input type="checkbox" v-model="entry.isOpen" class="checkInput" :id="'isOpen_'+tab+'_'+index" :checked="entry.isOpen" :disabled="action === 'view'">
                          <label class="checkLabel" :for="'isOpen_'+tab+'_'+index">Open</label>
                        </div>
                        <div class="check">
                          <input type="checkbox" v-model="entry.isClosed" class="checkInput" :id="'isClosed_'+tab+'_'+index" :checked="entry.isClosed" :disabled="action === 'view'">
                          <label class="checkLabel" :for="'isClosed_'+tab+'_'+index">Closed</label>
                        </div>
                        <div class="check">
                          <input type="checkbox" v-model="entry.isWebCanUpdate" class="checkInput" :id="'isWebCanUpdate_'+tab+'_'+index" :checked="entry.isWebCanUpdate" :disabled="action === 'view'">
                          <label class="checkLabel" :for="'isWebCanUpdate_'+tab+'_'+index">Web can Update</label>
                        </div>
                        <div class="check">
                          <input type="checkbox" v-model="entry.isFinalClose" class="checkInput" :id="'isFinalClose_'+tab+'_'+index" :checked="entry.isFinalClose" :disabled="action === 'view'">
                          <label class="checkLabel" :for="'isFinalClose_'+tab+'_'+index">Final Close</label>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              </template>
            </template>
            <tr v-if="action !== 'view'">
              <td colspan="5">
                <button type="button" @click="addEntry" class="button">Add Record</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>