<script setup lang="ts">
import InputWithFilter from '../InputWithFilter.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
import { onMounted, ref } from 'vue'
const type = ref('Gangguan')
const keyword = ref('')
const reportType = [
  { id: 1, title: 'Nomor Laporan' },
  { id: 2, title: 'Nama Pelapor' },
  { id: 3, title: 'No Telepon' },
  { id: 4, title: 'Alamat' },
  { id: 5, title: 'Pembuat' }
]
const searchBy = ref<any>(reportType[0].title)
const emit = defineEmits(['update:filters'])

const data = ref({
  type: type.value,
  keyword: keyword.value,
  searchBy: searchBy.value,
  periode: ''
})

const changeKeyword = (value: string) => {
  keyword.value = value
  data.value.keyword = value
}

const changeReportTypeSelected = (id: any) => {
  searchBy.value = reportType.find((item) => item.id == id)?.title
  data.value.searchBy = searchBy.value
}

const setPengaduan = (value: any) => {
  type.value = value.title
  data.value.type = value.title
}

onMounted(() => {
  emit('update:filters', data.value)
})
</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">Jenis Pengaduan:</label>

      <InlineRadioGroup
        @update:group-value="setPengaduan"
        :radio-items="[
          { id: 1, title: 'Gangguan', checked: true },
          { id: 2, title: 'Keluhan' }
        ]"
      />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Cari Report Number:</label>

      <InputWithFilter
        placeholder="Cari Report"
        :filters="reportType"
        @update:keyword="changeKeyword"
        @update:filters="changeReportTypeSelected"
      />
    </div>

    <div class="flex flex-col flex-1 space-y-2" v-if="searchBy != 'Nomor Laporan'">
      <label class="filter-input-label">Periode Tanggal:</label>

      <DatePicker @update:date-value="(value) => (data.periode = value)" />
    </div>
  </div>
</template>
