<script setup>
import { date } from 'alga-js'
import { DatePicker } from 'tedir-calendar'
import { SelectBox } from 'tedir-select'
import { AttachBox, ThumbBox } from 'tedir-dropzone'

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 || '',
  isActive: props.modelValue.isActive ?? true,
  name: props.modelValue.name || '',
  description: props.modelValue.description || '',
  value: props.modelValue.value || '',
  isSummary: props.modelValue.isSummary ?? false,
  tenant: props.modelValue.tenant || '',
  tenantId: props.modelValue.tenantId || '',
  replicationStrategy: props.modelValue.replicationStrategy || '',
  replicationStrategyId: props.modelValue.replicationStrategyId || '',
  processing: props.modelValue.processing ?? false,
  alert: {
    status: props.modelValue.alert.status || '',
    message: props.modelValue.alert.message || ''
  }
})

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
}

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

const save = () => {
  emit('update:modelValue', form.value)
  emit('save', form.value)
}
</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">Organization Name *</label>
              <input type="text" v-model="form.name" class="input" @keyup="save" />
            </div>
            <div class="column is-half">
              <label class="label d-block">Search Key</label>
              <input type="text" v-model="form.value" class="input" @keyup="save" />
            </div>
          </div>

          <label class="label d-block mt-2">Replication Strategy</label>
          <ClientOnly>
            <SelectBox v-model="form.replicationStrategyId" :options="getOptions?.['replication_strategies']?.records || [{id: form.replicationStrategyId, Name: form.replicationStrategy}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_replicationstrategy', 'replication_strategies')" :loading="loading?.['replication_strategies'] ?? true" @change="save" />
          </ClientOnly>

          <label class="label d-block mt-2">Description</label>
          <textarea v-model="form.description" class="input" @keyup="save"></textarea>
        </div>
        <div class="column is-one-third">
          <label class="label d-block">Tenant ID/Name</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" @change="save">
              <label class="checkLabel" for="isActive">Active</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.isSummary" class="checkInput" id="isSummary" :checked="form.isSummary" @change="save">
              <label class="checkLabel" for="isSummary">Summary</label>
            </div>
          </div>
        </div>
      </div>

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