<template>
  <form class="consultations-filters" @submit.prevent="onSubmit">
    <div class="consultations-filters__grid">
      <TextField v-model="form.userName" name="userName" label="جستجو اسم کاربر">
        <template #appendIcon>
          <SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
        </template>
      </TextField>
      <SelectField
        v-model="form.status"
        name="status"
        label="دسته بندی"
        :options="statusOptions"
        option-label="label"
        option-value="value"
      />
      <DatePickerField v-model="form.fromDate" name="fromDate" label="از تاریخ" :max="todayIso" />
      <DatePickerField v-model="form.toDate" name="toDate" label="تا تاریخ" :max="todayIso" />
    </div>

    <div class="consultations-filters__actions">
      <CircleButton
        v-if="hasFilters"
        tooltip="حذف فیلتر"
        bg-color="transparent"
        size="2.5rem"
        type="button"
        @click="onReset"
      >
        <template #icon>
          <SvgIcon name="close" color="black" :size="20" />
        </template>
      </CircleButton>
      <CircleButton
        tooltip="اعمال فیلتر"
        bg-color="rgba(104, 104, 104, 0.05)"
        size="2.5rem"
        type="submit"
      >
        <template #icon>
          <SvgIcon name="funnel" :size="20" color="var(--color-error)" />
        </template>
      </CircleButton>
    </div>
  </form>
</template>

<script setup>
import { TICKET_STATUS } from '@/enums'
import { computed, ref, watch } from 'vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import TextField from '@/components/form/TextField.vue'
import CircleButton from '@/components/CircleButton.vue'
import SelectField from '@/components/form/SelectField.vue'
import DatePickerField from '@/components/form/DatePickerField.vue'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ userName: '', status: '', fromDate: '', toDate: '' }),
  },
})

const emit = defineEmits(['update:modelValue', 'apply', 'reset'])

const emptyForm = () => ({ userName: '', status: '', fromDate: '', toDate: '' })
const form = ref({ ...emptyForm(), ...props.modelValue })

watch(
  () => props.modelValue,
  (next) => {
    form.value = { ...emptyForm(), ...next }
  },
  { deep: true }
)

const todayIso = new Date().toISOString()

const statusOptions = Object.entries(TICKET_STATUS).map(([value, label]) => ({
  value,
  label,
}))

const hasFilters = computed(() =>
  Object.values(form.value).some((v) => v !== '' && v !== null && v !== undefined)
)

const onSubmit = () => {
  emit('update:modelValue', { ...form.value })
  emit('apply', { ...form.value })
}

const onReset = () => {
  form.value = emptyForm()
  emit('update:modelValue', { ...form.value })
  emit('reset')
}
</script>

<style lang="scss" scoped>
.consultations-filters {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;

  &__grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;

    @media (min-width: 768px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-top: 1.75rem;
  }
}
</style>
