<script setup>
const router = useRouter()
const tabs = useTabs()

definePageMeta({
  middleware: ['auth', 'org']
})

const isDeletable = ref(false)
const searchQuery = ref('')
const selectedRows = ref([])

const { data, pending, error, refresh } = await useFetch('/api/settings/countries', {
  headers: useRequestHeaders(['cookie'])
})

const rowData = computed(() => data.value?.records?.map(item => {
  return {
    id: item.id,
    uid: item.uid,
    name: item.Name,
    description: item.Description,
    isActive: item.IsActive,
    countryCode: item.CountryCode,
    hasRegion: item.HasRegion,
    displaySequence: item.DisplaySequence,
    hasPostal_Add: item.HasPostal_Add,
    isAddressLinesLocalReverse: item.IsAddressLinesLocalReverse,
    isAddressLinesReverse: item.IsAddressLinesReverse,
    isPostcodeLookup: item.IsPostcodeLookup,
    allowCitiesOutOfList: item.AllowCitiesOutOfList,
    captureSequence: item.CaptureSequence,
    currency: item.C_Currency_ID?.identifier || '',
    currencyId: item.C_Currency_ID?.id || '',
    organization: item.AD_Org_ID?.identifier || '',
    organizationId: item.AD_Org_ID?.id || ''
  }
}) || []);

const forcingLogout = async () => {
  await $fetch('/api/idempiere-auth/logout', {
    method: 'POST',
    headers: useRequestHeaders(['cookie'])
  })

  tabs.value = [{link: '/', text: 'Home', active: true}]
  localStorage.setItem('tabs', JSON.stringify(tabs.value))

  console.info('Session expired and it will auto redirected toward login page.')
  location.href = '/signin'
}
const alert = ref({
  status: data.value?.status || 200,
  message: data.value?.message || ''
});
onBeforeMount(() => {
  if(Number(data.value?.status || 200) === 401) {
    forcingLogout()
  }
})
watch(data, () => {
  alert.value.status = data.value?.status || 200
  alert.value.message = data.value?.message || ''
  if(Number(data.value?.status || 200) === 401) {
    forcingLogout()
  }
})

const checkboxSelection = (params) => {
  return params.api.getRowGroupColumns().length === 0;
};
const headerCheckboxSelection = (params) => {
  return params.api.getRowGroupColumns().length === 0;
};

const colDefs = ref([
  { 
    width: 50,
    checkboxSelection: checkboxSelection,
    headerCheckboxSelection: headerCheckboxSelection
  },
  { 
    field: 'id',
    //hide: true,
    sort: 'desc'
  },
  { 
    field: 'organization',
    type: 'nonEditableColumn' 
  },
  { field: 'name' },
  { 
    field: 'countryCode',
    headerName: 'Country Code'
  },
  { 
    field: 'description',
    headerName: 'Description'
  },
  { 
    field: 'isActive',
    headerName: 'Active'
  },
  { 
    field: 'hasRegion',
    headerName: 'Region'
  },
  { 
    field: 'HasPostal_Add',
    headerName: 'Additional Postalcode'
  },
  { 
    field: 'isAddressLinesReverse',
    headerName: 'Reverse Address Lines '
  },
  { 
    field: 'isAddressLinesLocalReverse',
    headerName: 'Reverse Local Address'
  },
  { 
    field: 'isPostcodeLookup',
    headerName: 'Postcode Lookup'
  },
  { 
    field: 'allowCitiesOutOfList',
    headerName: 'Cities Out Of List'
  },
  { 
    field: 'currency',
    headerName: 'Currency',
    type: 'nonEditableColumn'
  }
]);

const cellClick = (event, gridApi) => {
  selectedRows.value = gridApi.getSelectedRows()

  if(event.source === 'checkboxSelected') {
    isDeletable.value = false
    if(selectedRows.value.length >= 1) {
      isDeletable.value = true
    }
  }
}

const cellChange = async (event) => {
  const res = await $fetch('/api/settings/countries/update', {
    method: 'PUT',
    headers: useRequestHeaders(['cookie']),
    body: {
      id: event.data.id,
      name: event.data.name,
      description: event.data.description,
      isActive: event.data.isActive,
      countryCode: event.data.countryCode,
      hasRegion: event.data.hasRegion,
      displaySequence: event.data.displaySequence,
      hasPostal_Add: event.data.hasPostal_Add,
      isAddressLinesLocalReverse: event.data.isAddressLinesLocalReverse,
      isAddressLinesReverse: event.data.isAddressLinesReverse,
      isPostcodeLookup: event.data.isPostcodeLookup,
      allowCitiesOutOfList: event.data.allowCitiesOutOfList,
      captureSequence: event.data.captureSequence,
      currencyId: event.data.currencyId
    }
  })

  if(Number(res.status) >= 400) {
    alert.value.status = res.status
    alert.value.message = res.message
  }
}

const breadCrumb = computed(() => ([
  { link: '#', text: 'Settings'},
  { link: '/settings/countries', text: 'Countries', active: true}
]))

const create = () => {
  router.push('/settings/countries/create')
}

const destroy = async () => {
  if(selectedRows.value.length >= 1) {
    isDeletable.value = false

    const res = await $fetch('/api/settings/countries/destroy', {
      method: 'DELETE',
      headers: useRequestHeaders(['cookie']),
      body: {
        ids: selectedRows.value.map(i => i.id)
      }
    })

    if(Number(res.status) >= 400) {
      alert.value.status = res.status
      alert.value.message = res.message
    }

    refresh()
  }
}
</script>

<template>
  <Head>
    <Title>Countries</Title>
  </Head>

  <NuxtLayout name="new-dash">
    <NewBreadCrumb :items="breadCrumb" />
    <div>
      <div class="banner datatable-wrapper">
        <div class="d-flex justify-between mb-3">
          <h4></h4>
          <div class="d-flex gap-0.75rem">
            <button type="button" @click="destroy" class="button danger-light" :class="!isDeletable ? 'pointerEvents-none opacity-0.6 filter-grayscale(1)' : ''">
              <span class="tf-icon ti ti-trash ti-xs me-1 color-inherit"></span> Delete Selected
            </button>
            <button type="button" @click="create" class="button primary-light">
              <span class="tf-icon ti ti-plus ti-xs me-1 color-inherit"></span> Add Country
            </button>
          </div>
        </div>
        <div>
          <div>
            <div v-if="Number(alert.status) >= 400" class="mb-3">
              <div class="alert alert-danger">
                <div class="alertContent">
                  <h3 class="alertTitle">{{ alert.status }}</h3>
                  <p class="alertText">{{ alert.message }}</p>
                </div>
              </div>
            </div>
            <div class="mb-3">
              <AgGrid :entries="rowData" :columns="colDefs" @cellClick="cellClick" @cellChange="cellChange" />
            </div>
          </div>
        </div>
      </div>

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