<script setup lang="ts">
import Select from '@/components/Select.vue';
import {
  selectedUid,
  selectedUp3Ulp,
  fetchRegional,
  fetchUid, itemsUid,
  itemsUp3,
  itemsUlp,
  itemsRegional,
  months,
  years
} from './reference';
import { onMounted, ref } from 'vue';
import { getMonthName } from '@/utils/texts';

const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const regionalPlaceholder = 'Semua Regional'
const bulanPlaceholder = getMonthName(new Date().getMonth())
const tahunPlaceholder = new Date().getFullYear().toString()
const bulanSelected = new Date().getMonth()
const tahunSelected = new Date().getFullYear()
const uppp = ref({ id: 0, name: up3Placholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: 0, name: ulpPlaceholder })
const bulan = ref({ id: bulanSelected, name: bulanPlaceholder })
const tahun = ref({ id: tahunSelected, name: tahunPlaceholder })
const regional = ref({ id: 0, name: regionalPlaceholder })
const emit = defineEmits(['update:filters'])
// Find index of January
const bulanIndex = months.findIndex((month) => month.id === bulan.value.id)
console.log(bulanSelected)
// Remove January if found
if (bulanIndex !== -1) {
  months.splice(bulanIndex, 1)
}
// Find index of current year
const tahunIndex = years.value.findIndex((year) => year.id === tahun.value.id)
if (tahunIndex !== -1) {
  years.value.splice(tahunIndex, 1)
}

const data = ref({
  regional: regional.value,
  uid: uid.value,
  up3: uppp.value,
  ulp: ulp.value,
  periode: '',
  bulan: bulan.value,
  tahun: tahun.value
})

const setRegional = (value: any) => {
  regional.value = value
  fetchUid()
  // harusnya fetchUidWithRegional(value);
  selectedUid(value)
  uid.value = { id: 0, name: uidPlaceholder }
  data.value.regional = value
}

const setUid = (value: any) => {
  uid.value = value
  selectedUid(value)
  uppp.value = { id: 0, name: up3Placholder }
  data.value.uid = value
}

const setUp3 = (value: any) => {
  uppp.value = value
  selectedUp3Ulp(value)
  ulp.value = { id: 0, name: ulpPlaceholder }
  data.value.up3 = value
}

const setUlp = (value: any) => {
  ulp.value = value
  selectedUp3Ulp(value)
  data.value.ulp = value
}

const setMonth = (value: any) => {
  bulan.value = value
  data.value.bulan = value
  console.log(data.value)
}

const setYear = (value: any) => {
  tahun.value = value
  data.value.tahun = value
}

onMounted(() => {
  emit('update:filters', data.value)
  fetchRegional()
})
</script>

<template>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Regional:</label>

      <Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>

      <Select @update:selected="setUid($event)" :data="itemsUid" :selected="uid" :placeholder="uidPlaceholder" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>

      <Select @update:selected="setUp3($event)" :selected="uppp" :data="itemsUp3" :placeholder="up3Placholder" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Unit Layanan Pelanggan:</label>

      <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Periode</label>

      <div class="grid grid-cols-2 gap-x-2">
        <Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />
        <Select @update:selected="setYear($event)" :data="years" :placeholder="tahunPlaceholder" />
      </div>
    </div>
  </div>

</template>
