<template>
  <ArtSearchBar
    ref="searchBarRef"
    v-model="formData"
    :items="formItems"
    @reset="handleReset"
    @search="handleSearch"
  />
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { MerchantStatus } from '@/enums/MerchantStatus'
  import { OperatingMode } from '@/enums/OperatingMode'
  import type { MerchantListSearchForm } from '../types'

  interface Props {
    modelValue: MerchantListSearchForm
  }

  interface Emits {
    (e: 'update:modelValue', value: MerchantListSearchForm): void
    (e: 'search', params: MerchantListSearchForm): void
    (e: 'reset'): void
  }

  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()

  const { t } = useI18n()
  const searchBarRef = ref()

  const formData = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })

  const formItems = computed(() => [
    {
      label: t('merchant.list.search.keyword'),
      key: 'keyword',
      type: 'input',
      placeholder: t('merchant.list.search.keywordPlaceholder'),
      clearable: true
    },
    {
      label: t('merchant.list.search.status'),
      key: 'status',
      type: 'select',
      clearable: true,
      options: [
        { label: t('merchant.status.pending'), value: MerchantStatus.Pending },
        { label: t('merchant.status.approved'), value: MerchantStatus.Approved },
        { label: t('merchant.status.rejected'), value: MerchantStatus.Rejected },
        { label: t('merchant.status.frozen'), value: MerchantStatus.Frozen }
      ]
    },
    {
      label: t('merchant.list.search.operatingMode'),
      key: 'operatingMode',
      type: 'select',
      clearable: true,
      options: [
        { label: t('merchant.operatingMode.same'), value: OperatingMode.SameEntity },
        { label: t('merchant.operatingMode.different'), value: OperatingMode.DifferentEntity }
      ]
    },
    {
      label: t('merchant.list.search.tenant'),
      key: 'tenantId',
      type: 'input',
      placeholder: t('merchant.list.search.tenantPlaceholder'),
      clearable: true
    }
  ])

  const handleSearch = () => {
    emit('search', formData.value)
  }

  const handleReset = () => {
    emit('reset')
  }
</script>
