'use client'

import React from 'react'
import { Label, Select, TextInput } from 'flowbite-react'
import { DateType } from 'react-tailwindcss-datepicker'

import SearchButton from '@/lib/components/buttons/SearchButton'
import formTheme from '@/lib/themes/form'
import DatePicker, { FormattedDate } from '@/lib/components/DatePicker'
import PartnerSelector from '@/lib/components/forms/PartnerSelector'
import { SearchFormProps, WithdrawalStatus } from '../types'

interface Props {
  searchForm: SearchFormProps
  handleSearch: (e?: React.FormEvent) => void
  setSearchForm: React.Dispatch<React.SetStateAction<SearchFormProps>>
}

export default function SearchForm({
  searchForm,
  handleSearch,
  setSearchForm,
}: Props) {
  return (
    <form onSubmit={handleSearch} className="mt-10">
      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 w-full max-w-6xl gap-4">
        {/* Request Date */}
        <div className="w-full max-w-96">
          <div className="mb-2 block">
            <Label htmlFor="request_date" theme={formTheme.label}>
              Request Date
            </Label>
          </div>

          <DatePicker
            inputId="request_date"
            value={{
              startDate: searchForm.params.startDate as DateType,
              endDate: searchForm.params.endDate as DateType,
            }}
            onDateChange={(formattedDate: FormattedDate) => {
              setSearchForm({
                ...searchForm,
                params: {
                  ...searchForm.params,
                  startDate: formattedDate?.startDate ?? null,
                  endDate: formattedDate?.endDate ?? null,
                },
              })
            }}
          />
        </div>

        {/* Code */}
        <div className="w-full">
          <div className="mb-2 block">
            <Label htmlFor="code" theme={formTheme.label}>
              Code
            </Label>
          </div>
          <TextInput
            theme={formTheme.textInput}
            id="code"
            type="text"
            className="w-full max-w-96"
            placeholder="Code"
            value={searchForm.params.code}
            onChange={(e) =>
              setSearchForm({
                ...searchForm,
                params: {
                  ...searchForm.params,
                  code: e.target.value,
                },
              })
            }
          />
        </div>

        {/* Status */}
        <div className="w-full">
          <div className="block mb-2">
            <Label htmlFor="status" theme={formTheme.label}>
              Status
            </Label>
          </div>

          <Select
            id="status"
            theme={formTheme.select}
            className="w-full max-w-96"
            defaultValue={searchForm.params.status as WithdrawalStatus}
            onChange={(e) => {
              setSearchForm({
                ...searchForm,
                params: {
                  ...searchForm.params,
                  status: e.target.value as WithdrawalStatus,
                },
              })
            }}
          >
            <option value="">All</option>
            <option value="pending">Pending</option>
            <option value="processing">Processing</option>
            <option value="completed">Completed</option>
            <option value="rejected">Rejected</option>
            <option value="cancelled">Cancelled</option>
          </Select>
        </div>

        {/* Partner */}
        <PartnerSelector
          selectedPartnerId={searchForm.params.partnerId}
          onSelectPartner={(partner) => {
            setSearchForm((prev) => ({
              ...prev,
              params: {
                ...prev.params,
                partnerId: partner ? partner.id : undefined,
              },
            }))
          }}
        />
      </div>

      <SearchButton isProcessing={searchForm.searching} className="mt-5" />
    </form>
  )
}