'use client'

import {UseFormReturn} from 'react-hook-form'
import {Form, FormField} from '@/components/ui/form'
import {Input} from '@/components/ui/input'
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
import {Label} from '@/components/ui/label'
import DatePicker from '@/components/date-picker'
import {Button} from '@/components/ui/button'
import {Eraser, Search} from 'lucide-react'

export interface ResourceFilterValues {
  resource_no: string
  type: 'expire' | 'quota' | 'all'
  create_after?: Date
  create_before?: Date
  expire_after?: Date
  expire_before?: Date
}

interface ResourceFilterProps {
  form: UseFormReturn<ResourceFilterValues>
  onSubmit: () => void | Promise<void>
  onReset: () => void
}

export default function ResourceFilter({form, onSubmit, onReset}: ResourceFilterProps) {
  const handler = form.handleSubmit(onSubmit)

  return (
    <Form form={form} handler={handler} className="flex items-end gap-4 flex-wrap">
      <FormField name="resource_no" label={<span className="text-sm">套餐编号</span>}>
        {({id, field}) => (
          <Input {...field} id={id} className="h-9"/>
        )}
      </FormField>
      <FormField name="type" label={<span className="text-sm">类型</span>}>
        {({field}) => (
          <Select value={field.value} onValueChange={field.onChange}>
            <SelectTrigger className="w-24 h-9">
              <SelectValue placeholder="选择套餐类型"/>
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部</SelectItem>
              <SelectItem value="expire">包时</SelectItem>
              <SelectItem value="quota">包量</SelectItem>
            </SelectContent>
          </Select>
        )}
      </FormField>
      <div className="flex flex-col gap-2">
        <Label className="text-sm">开通时间</Label>
        <div className="flex items-center">
          <FormField name="create_after">
            {({field}) => (
              <DatePicker
                {...field}
                className="w-36"
                placeholder="开始时间"
                format="yyyy-MM-dd"
              />
            )}
          </FormField>
          <span className="px-1">-</span>
          <FormField name="create_before">
            {({field}) => (
              <DatePicker
                {...field}
                className="w-36"
                placeholder="结束时间"
                format="yyyy-MM-dd"
              />
            )}
          </FormField>
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <Label className="text-sm">到期时间</Label>
        <div className="flex items-center">
          <FormField name="expire_after">
            {({field}) => (
              <DatePicker
                {...field}
                className="w-36"
                placeholder="开始时间"
                format="yyyy-MM-dd"
              />
            )}
          </FormField>
          <span className="px-1">-</span>
          <FormField name="expire_before">
            {({field}) => (
              <DatePicker
                {...field}
                className="w-36"
                placeholder="结束时间"
                format="yyyy-MM-dd"
              />
            )}
          </FormField>
        </div>
      </div>
      <div className="flex gap-4">
        <Button type="submit" className="h-9">
          <Search/>
          <span>筛选</span>
        </Button>
        <Button
          type="button"
          theme="outline"
          className="h-9"
          onClick={onReset}>
          <Eraser/>
          <span>重置</span>
        </Button>
      </div>
    </Form>
  )
}
