<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 { StoreAuditStatus } from '@/enums/StoreAuditStatus'
  import { StoreBusinessStatus } from '@/enums/StoreBusinessStatus'
  import { StoreOwnershipType } from '@/enums/StoreOwnershipType'

  defineOptions({ name: 'StoreSearch' })

  interface StoreListFilters {
    keyword: string
    merchantId: string
    auditStatus?: StoreAuditStatus
    businessStatus?: StoreBusinessStatus
    ownershipType?: StoreOwnershipType
  }

  interface Props {
    modelValue: StoreListFilters
  }

  interface Emits {
    (e: 'update:modelValue', value: StoreListFilters): void
    (e: 'search', params: StoreListFilters): 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('store.list.search.keyword'),
      key: 'keyword',
      type: 'input',
      placeholder: t('store.list.search.keywordPlaceholder'),
      width: '240px',
      clearable: true
    },
    {
      label: t('store.list.search.merchantId'),
      key: 'merchantId',
      type: 'input',
      placeholder: t('store.list.search.merchantIdPlaceholder'),
      width: '200px',
      clearable: true
    },
    {
      label: t('store.list.search.auditStatus'),
      key: 'auditStatus',
      type: 'select',
      width: '180px',
      clearable: true,
      options: [
        { value: StoreAuditStatus.Draft, label: t('store.auditStatus.draft') },
        { value: StoreAuditStatus.Pending, label: t('store.auditStatus.pending') },
        { value: StoreAuditStatus.Activated, label: t('store.auditStatus.activated') },
        { value: StoreAuditStatus.Rejected, label: t('store.auditStatus.rejected') }
      ]
    },
    {
      label: t('store.list.search.businessStatus'),
      key: 'businessStatus',
      type: 'select',
      width: '180px',
      clearable: true,
      options: [
        { value: StoreBusinessStatus.Open, label: t('store.businessStatus.open') },
        { value: StoreBusinessStatus.Resting, label: t('store.businessStatus.resting') },
        { value: StoreBusinessStatus.ForceClosed, label: t('store.businessStatus.forceClosed') }
      ]
    },
    {
      label: t('store.list.search.ownershipType'),
      key: 'ownershipType',
      type: 'select',
      width: '180px',
      clearable: true,
      options: [
        { value: StoreOwnershipType.SameEntity, label: t('store.ownership.same') },
        { value: StoreOwnershipType.DifferentEntity, label: t('store.ownership.different') }
      ]
    }
  ])

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

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