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

const props = defineProps({
  modelValue: Object
})

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

const organizations = useCookie('logship_organizations')
const organization = useCookie('logship_organization')
const organizationId = useCookie('logship_organization_id')

const clientName = ref('')
onMounted(() => {
  const getClient = localStorage.getItem('logship_clients')
  if(getClient) {
    const clientObj = JSON.parse(getClient)
    clientName.value = clientObj[0].name
  }
})

const form = ref({
  id: props.modelValue.id || '',
  uid: props.modelValue.uid || '',
  client: props.modelValue.client || '',
  clientId: props.modelValue.clientId || '',
  organization: props.modelValue.organization || organization.value?.Name || '',
  organizationId: props.modelValue.organizationId || organizationId.value || '',
  isActive: props.modelValue.isActive ?? true,
  name: props.modelValue.name || '',
  description: props.modelValue.description || '',
  seqNo: props.modelValue.seqNo || '',
  whereClause: props.modelValue.whereClause || '',
  table: props.modelValue.table || '',
  tableId: props.modelValue.tableId || '',
  form: props.modelValue.form || '',
  formId: props.modelValue.formId || '',
  entityType: props.modelValue.entityType || '',
  entityTypeId: props.modelValue.entityTypeId || '',
  window: props.modelValue.window || '',
  windowId: props.modelValue.windowId || '',
  namePrintColor: props.modelValue.namePrintColor || '',
  namePrintColorId: props.modelValue.namePrintColorId || '',
  numberPrintColor: props.modelValue.numberPrintColor || '',
  numberPrintColorId: props.modelValue.numberPrintColorId || '',
  project: props.modelValue.project || '',
  projectId: props.modelValue.projectId || '',
  namePrintFont: props.modelValue.namePrintFont || '',
  namePrintFontId: props.modelValue.namePrintFontId || '',
  numberPrintFont: props.modelValue.numberPrintFont || '',
  numberPrintFontId: props.modelValue.numberPrintFontId || '',
  alert: {
    status: props.modelValue.alert.status || '',
    message: props.modelValue.alert.message || '',
    processing: props.modelValue.alert.processing ?? false,
  }
})

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) {
    /*if(key === 'locations' && res?.records?.[0]) {
      form.value.partnerLocationId = String(res.records[0].id || '')
      form.value.partnerLocation = res.records[0].Name || ''
    }*/
    
    getOptions.value[key] = res
  }
  loading.value[key] = false
}

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

const save = () => {
  //form.value.alert.processing = true
  emit('update:modelValue', form.value)
  emit('save', form.value)
  /*if(props.modelValue.id) {
    emit('save', form.value, props.modelValue.id, saveType)
  } else {
    emit('save', form.value, '', saveType)
  }*/
}
</script>

<template>
  <div @mouseleave="save">
    <div class="my-5 mx-5">
      <AlertAction v-model='form.alert.status' :alert="form.alert" />

      <div class="columns is-desktop">
        <div class="column is-two-thirds">
          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="label d-block">Name *</label>
              <input type="text" v-model="form.name" class="input" />
            </div>
            <div class="column is-half">
              <label class="label d-block">Entity Type</label>
              <ClientOnly>
                <SelectBox v-model="form.entityTypeId" :options="getOptions?.['entity_types']?.records || [{id: form.entityTypeId, Name: form.entityType}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_entitytype', 'entity_types')" :loading="loading?.['entity_types'] ?? true" />
              </ClientOnly>
            </div>
          </div>
        
          <label class="label d-block mt-2">Description</label>
          <textarea v-model="form.description" class="input"></textarea>
          
          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="label d-block mt-2">Project</label>
              <ClientOnly>
                <SelectBox v-model="form.projectId" :options="getOptions?.['projects']?.records || [{id: form.projectId, Name: form.project}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_project', 'projects')" :loading="loading?.['projects'] ?? true" />
              </ClientOnly>
            </div>
            <div class="column is-half">
              <label class="label d-block mt-2">Sequence *</label>
              <input type="text" v-model="form.seqNo" class="input" />
            </div>
          </div>
        
          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="label d-block mt-2">Print Font for Name</label>
              <ClientOnly>
                <SelectBox v-model="form.namePrintColorId" :options="getOptions?.['name_print_colors']?.records || [{id: form.namePrintColorId, Name: form.namePrintColor}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_printcolor', 'name_print_colors')" :loading="loading?.['name_print_colors'] ?? true" />
              </ClientOnly>
            </div>
            <div class="column is-half">
              <label class="label d-block mt-2">Print Color for Name</label>
              <ClientOnly>
                <SelectBox v-model="form.namePrintFontId" :options="getOptions?.['name_print_fonts']?.records || [{id: form.namePrintFontId, Name: form.namePrintFont}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_printfont', 'name_print_fonts')" :loading="loading?.['name_print_fonts'] ?? true" />
              </ClientOnly>
            </div>
          </div>
        
          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="label d-block mt-2">Print Font for Number</label>
              <ClientOnly>
                <SelectBox v-model="form.numberPrintColorId" :options="getOptions?.['number_print_colors']?.records || [{id: form.numberPrintColorId, Name: form.numberPrintColor}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_printcolor', 'number_print_colors')" :loading="loading?.['number_print_colors'] ?? true" />
              </ClientOnly>
            </div>
            <div class="column is-half">
              <label class="label d-block mt-2">Print Color for Number</label>
              <ClientOnly>
                <SelectBox v-model="form.numberPrintFontId" :options="getOptions?.['number_print_fonts']?.records || [{id: form.numberPrintFontId, Name: form.numberPrintFont}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_printfont', 'number_print_fonts')" :loading="loading?.['number_print_fonts'] ?? true" />
              </ClientOnly>
            </div>
          </div>
        
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <label class="label d-block mt-2">Table *</label>
              <ClientOnly>
                <SelectBox v-model="form.tableId" :options="getOptions?.['tables']?.records || [{id: form.tableId, Name: form.table}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_table', 'tables')" :loading="loading?.['tables'] ?? true" />
              </ClientOnly>
            </div>
            <div class="column is-one-third">
              <label class="label d-block mt-2">Window</label>
              <ClientOnly>
                <SelectBox v-model="form.windowId" :options="getOptions?.['windows']?.records || [{id: form.windowId, Name: form.window}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_window', 'windows')" :loading="loading?.['windows'] ?? true" />
              </ClientOnly>
            </div>
            <div class="column is-one-third">
              <label class="label d-block mt-2">Special Form</label>
              <ClientOnly>
                <SelectBox v-model="form.formId" :options="getOptions?.['forms']?.records || [{id: form.formId, Name: form.form}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_form', 'forms')" :loading="loading?.['forms'] ?? true" />
              </ClientOnly>
            </div>
          </div>
        
          <label class="label d-block mt-2">SQL WHERE</label>
          <textarea v-model="form.whereClause" class="input"></textarea>
        </div>

        <div class="column is-one-third">
          <label class="label d-block">Organization *</label>
          <SelectBox v-model="form.organizationId" :options="getOptions?.['orgs']?.records || [{id: form.organizationId, Name: form.organization}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_org', 'orgs')" @change="(val, opt) => {form.organization = opt.Name; save();}" :loading="loading?.['orgs'] ?? true" />

          <label class="label d-block mt-2">Tenant *</label>
          <input type="text" :value="clientName" class="input" readonly />

          <label class="label d-block mt-2">Status</label>
          <div class="d-flex flexDirection-column">
            <div class="check">
              <input type="checkbox" v-model="form.isActive" class="checkInput" id="isActive" :checked="form.isActive">
              <label class="checkLabel" for="isActive">Active</label>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>