<script setup lang="ts">
import { Filter, Refresh, ArrowDown } from '@element-plus/icons-vue'
import { ElButton, ElIcon } from 'element-plus'
import RangeFilter from './RangeFilter.vue'
import StringFilter from './StringFilter.vue'
import SkinFilter from './SkinFilter.vue'
import {
  coinRangeOptions,
  moneyRangeOptions,
  totalRangeOptions,
  fireLevelRangeOptions,
} from '@/features/listings/composables/useFilterOptions'
import type { ListingPublishOptions } from '@/features/listings/api/listingOptions'
import type { FilterPopoverKey, HomeFilters } from '@/features/listings/composables/useHomeFilters'

interface Props {
  filters: HomeFilters
  totalListings: number
  publishOptions: ListingPublishOptions
  regionOptions: string[]
  loginMethodOptions: string[]
  skinFilterGroups: Array<{ key: string; title: string; options: string[] }>
  skinChipLabel: string
  activeFilterPopover: FilterPopoverKey | ''
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:filters': [filters: Partial<HomeFilters>]
  'reset': []
  'setFilterPopover': [key: FilterPopoverKey, visible: boolean]
  'closeFilterPopover': []
}>()

const filterPopoverBaseProps = {
  placement: 'bottom-start',
  popperClass: 'home-filter-popover',
  trigger: 'click',
  showAfter: 0,
  hideAfter: 0,
  transition: 'none',
} as const

function filterPopoverProps(key: FilterPopoverKey) {
  return {
    ...filterPopoverBaseProps,
    visible: props.activeFilterPopover === key,
    'onUpdate:visible': (visible: boolean) => emit('setFilterPopover', key, visible),
  }
}

function updateFilter(key: keyof HomeFilters, value: any) {
  emit('update:filters', { [key]: value })
}

function closePopover() {
  emit('closeFilterPopover')
}
</script>

<template>
  <section class="horizontal-filter-card">
    <div class="filter-header">
      <div class="filter-title">
        <el-icon><Filter /></el-icon>
        <strong>筛选大厅</strong>
        <span>{{ totalListings }} 个结果</span>
      </div>
      <el-button :icon="Refresh" link @click="emit('reset')">
        重置全部条件
      </el-button>
    </div>

    <div class="filter-chip-row">
      <StringFilter
        label="保险"
        placeholder="保险"
        :model-value="filters.insurance"
        :options="publishOptions.insurance_options"
        :popover-props="filterPopoverProps('insurance')"
        @update:model-value="updateFilter('insurance', $event)"
        @close="closePopover"
      />

      <StringFilter
        label="体力"
        placeholder="体力"
        :model-value="filters.stamina"
        :options="publishOptions.level_options"
        :popover-props="filterPopoverProps('stamina')"
        @update:model-value="updateFilter('stamina', $event)"
        @close="closePopover"
      />

      <StringFilter
        label="负载"
        placeholder="负载"
        :model-value="filters.load"
        :options="publishOptions.level_options"
        :popover-props="filterPopoverProps('load')"
        @update:model-value="updateFilter('load', $event)"
        @close="closePopover"
      />

      <StringFilter
        label="登录方式"
        placeholder="登录方式"
        :model-value="filters.loginMethod"
        :options="loginMethodOptions"
        :popover-props="filterPopoverProps('loginMethod')"
        @update:model-value="updateFilter('loginMethod', $event)"
        @close="closePopover"
      />

      <StringFilter
        label="地区"
        placeholder="地区选择"
        :model-value="filters.region"
        :options="regionOptions"
        :popover-props="filterPopoverProps('region')"
        :wide="true"
        @update:model-value="updateFilter('region', $event)"
        @close="closePopover"
      />

      <RangeFilter
        label="哈夫币(M)"
        :model-min="filters.minCoin"
        :model-max="filters.maxCoin"
        :options="coinRangeOptions"
        :popover-props="filterPopoverProps('coin')"
        :wide="true"
        @update:model-min="updateFilter('minCoin', $event)"
        @update:model-max="updateFilter('maxCoin', $event)"
        @close="closePopover"
      />

      <RangeFilter
        label="租金"
        :model-min="filters.minPrice"
        :model-max="filters.maxPrice"
        :options="moneyRangeOptions"
        :popover-props="filterPopoverProps('price')"
        @update:model-min="updateFilter('minPrice', $event)"
        @update:model-max="updateFilter('maxPrice', $event)"
        @close="closePopover"
      />

      <RangeFilter
        label="押金"
        :model-min="filters.minDeposit"
        :model-max="filters.maxDeposit"
        :options="moneyRangeOptions"
        :popover-props="filterPopoverProps('deposit')"
        @update:model-min="updateFilter('minDeposit', $event)"
        @update:model-max="updateFilter('maxDeposit', $event)"
        @close="closePopover"
      />

      <RangeFilter
        label="合计金额"
        :model-min="filters.minTotal"
        :model-max="filters.maxTotal"
        :options="totalRangeOptions"
        :popover-props="filterPopoverProps('total')"
        :wide="true"
        @update:model-min="updateFilter('minTotal', $event)"
        @update:model-max="updateFilter('maxTotal', $event)"
        @close="closePopover"
      />

      <SkinFilter
        :skin-group="filters.skinGroup"
        :skin-name="filters.skinName"
        :groups="skinFilterGroups"
        :popover-props="filterPopoverProps('skin')"
        @update:skin-group="updateFilter('skinGroup', $event)"
        @update:skin-name="updateFilter('skinName', $event)"
        @close="closePopover"
      />

      <StringFilter
        label="段位"
        placeholder="段位"
        :model-value="filters.rank"
        :options="publishOptions.rank_options"
        :popover-props="filterPopoverProps('rank')"
        @update:model-value="updateFilter('rank', $event)"
        @close="closePopover"
      />

      <RangeFilter
        label="等级"
        :model-min="filters.minFireLevel"
        :model-max="filters.maxFireLevel"
        :options="fireLevelRangeOptions"
        :popover-props="filterPopoverProps('fireLevel')"
        @update:model-min="updateFilter('minFireLevel', $event)"
        @update:model-max="updateFilter('maxFireLevel', $event)"
        @close="closePopover"
      />
    </div>
  </section>
</template>

<style src="@/styles/home-filters.css"></style>
