<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 || '',
  currentNext: props.modelValue.currentNext || 1000000,
  startNo: props.modelValue.startNo || 1000000,
  incrementNo: props.modelValue.incrementNo || 1,
  currentNextSys: props.modelValue.currentNextSys || 100,
  decimalPattern: props.modelValue.decimalPattern || '',
  vFormat: props.modelValue.vFormat || '',
  prefix: props.modelValue.prefix || '',
  suffix: props.modelValue.suffix || '',
  isAudited: props.modelValue.isAudited ?? false,
  startNewYear: props.modelValue.startNewYear ?? false,
  isTableID: props.modelValue.isTableID ?? false,
  isAutoSequence: props.modelValue.isAutoSequence ?? false,
  startNewMonth: props.modelValue.startNewMonth ?? false,
  isOrgLevelSequence: props.modelValue.isOrgLevelSequence ?? false,
  alert: {
    status: props.modelValue.alert.status || '',
    message: props.modelValue.alert.message || '',
    processing: props.modelValue.alert.processing ?? 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">

          <label class="label d-block">Name *</label>
          <input type="text" v-model="form.name" class="input" />
        
          <div class="columns is-desktop">
            <div class="column is-half">
              <template v-if="form.isAutoSequence === false && form.isTableID === false">
                <label class="label d-block mt-2">Value Format</label>
                <input type="text" v-model="form.vFormat" class="input" />
              </template>
              
              <template v-if="form.isTableID === false">
                <label class="label d-block mt-2">Prefix</label>
                <input type="text" v-model="form.prefix" class="input" />
              </template>
              
              <template v-if="form.isAutoSequence === true">
                <label class="label d-block mt-2">Start No</label>
                <input type="text" v-model="form.startNo" class="input" />
              </template>

              <template v-if="form.isAutoSequence === true || form.isTableID === true">
                <label class="label d-block mt-2">Current Next</label>
                <input type="text" v-model="form.currentNext" class="input" />
              </template>
              
              <template v-if="form.isOrgLevelSequence === true">
                <label class="label d-block mt-2">Org Column</label>
                <input type="text" v-model="form.orgColumn" class="input" />
              </template>
            </div>
            <div class="column is-half">
              <label class="label d-block mt-2">Decimal Pattern</label>
              <input type="text" v-model="form.decimalPattern" class="input" />
              
              <template v-if="form.isTableID === false">
                <label class="label d-block mt-2">Suffix</label>
                <input type="text" v-model="form.suffix" class="input" />
              </template>
              
              <template v-if="form.isAutoSequence === true || form.isTableID === true">
                <label class="label d-block mt-2">Increment</label>
                <input type="text" v-model="form.incrementNo" class="input" />
              </template>
              
              <template v-if="form.isTableID === false">
                <label class="label d-block mt-2">Current Next Sys</label>
                <input type="text" v-model="form.currentNextSys" class="input" />
              </template>
              
              <template v-if="form.startNewYear === true">
                <label class="label d-block mt-2">Date Column</label>
                <input type="text" v-model="form.dateColumn" class="input" />
              </template>
            </div>
          </div>

          <label class="label d-block mt-2">Description</label>
          <textarea v-model="form.description" 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 class="check">
              <input type="checkbox" v-model="form.isAutoSequence" class="checkInput" id="isAutoSequence" :checked="form.isAutoSequence">
              <label class="checkLabel" for="isAutoSequence">Auto Numbering</label>
            </div>
            <div v-if="form.isAutoSequence" class="check">
              <input type="checkbox" v-model="form.isTableID" class="checkInput" id="isTableID" :checked="form.isTableID">
              <label class="checkLabel" for="isTableID">Used for Record ID</label>
            </div>
            <template v-if="form.isTableID === false">
              <!--<div class="check">
                <input type="checkbox" v-model="form.isAudited" class="checkInput" id="isAudited" :checked="form.isAudited">
                <label class="checkLabel" for="isAudited">Audited</label>
              </div>-->
              <div class="check">
                <input type="checkbox" v-model="form.startNewYear" class="checkInput" id="startNewYear" :checked="form.startNewYear">
                <label class="checkLabel" for="isActive">Restart sequence every Year</label>
              </div>
              <div v-if="form.startNewYear" class="check">
                <input type="checkbox" v-model="form.startNewMonth" class="checkInput" id="startNewMonth" :checked="form.startNewMonth">
                <label class="checkLabel" for="startNewMonth">Restart sequence every month</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isOrgLevelSequence" class="checkInput" id="isOrgLevelSequence" :checked="form.isOrgLevelSequence">
                <label class="checkLabel" for="isOrgLevelSequence">Organization level</label>
              </div>
            </template>
          </div>
        </div>
      </div>

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