'use client'

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

import SearchButton from '@/lib/components/buttons/SearchButton'
import formTheme from '@/lib/themes/form'
import { AffiliateExperience } from '@/lib/types/enums/partner'
import MerchantSelector from '@/lib/components/forms/MerchantSelector'
import AffiliateCategorySelector from '@/lib/components/forms/AffiliateCategorySelector'
import AffiliateLevelSelector from '@/lib/components/forms/AffiliateLevelSelector'
import { capitalizeWords } from '@/lib/utils/string'
import { SearchFormProps } 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">
        {/* Search */}
        <div className="w-full max-w-96">
          <div className="mb-2 block">
            <Label htmlFor="search">Search Affiliate Partner</Label>
          </div>

          <TextInput
            id="search"
            theme={formTheme.textInput}
            placeholder="Search affiliate partner..."
            value={searchForm.params.search || ''}
            onChange={(e) =>
              setSearchForm({
                ...searchForm,
                params: { ...searchForm.params, search: e.target.value },
              })
            }
          />
        </div>

        {/* Affiliate Category */}
        <AffiliateCategorySelector
          label="Affiliate Category"
          value={searchForm.params.affiliate_category_id}
          placeholder="All"
          onChange={(affiliateCategory) => {
            setSearchForm({
              ...searchForm,
              params: {
                ...searchForm.params,
                affiliate_category_id: affiliateCategory?.id,
              },
            })
          }}
        />

        {/* Affiliate Experience */}
        <div className="w-full max-w-96">
          <div className="mb-2 block">
            <Label htmlFor="affiliate_experience">Affiliate Experience</Label>
          </div>

          <Select
            id="affiliate_experience"
            name="affiliate_experience"
            theme={formTheme.select}
            value={searchForm.params.affiliate_experience}
            onChange={(e) =>
              setSearchForm(() => ({
                ...searchForm,
                params: {
                  ...searchForm.params,
                  affiliate_experience: e.target.value,
                },
              }))
            }
          >
            <option value="">All</option>
            <option value={AffiliateExperience.NoExperience}>
              {capitalizeWords(AffiliateExperience.NoExperience)}
            </option>
            <option value={AffiliateExperience.LessThanOneYear}>
              {capitalizeWords(AffiliateExperience.LessThanOneYear)}
            </option>
            <option value={AffiliateExperience.OneToThreeYears}>
              {capitalizeWords(AffiliateExperience.OneToThreeYears)}
            </option>
            <option value={AffiliateExperience.MoreThanThreeYears}>
              {capitalizeWords(AffiliateExperience.MoreThanThreeYears)}
            </option>
          </Select>
        </div>

        {/* Affiliate Level */}
        <AffiliateLevelSelector
          label="Affiliate Level"
          value={searchForm.params.affiliate_level_id}
          placeholder="All"
          onChange={(affiliateLevel) => {
            setSearchForm({
              ...searchForm,
              params: {
                ...searchForm.params,
                affiliate_level_id: affiliateLevel?.id,
              },
            })
          }}
        />

        {/* Guest Market */}
        <div className="w-full max-w-96">
          <div className="mb-2 block">
            <Label htmlFor="guest_market">Guest Market</Label>
          </div>

          <TextInput
            id="guest_market"
            theme={formTheme.textInput}
            placeholder="Enter guest market..."
            value={searchForm.params.guest_market || ''}
            onChange={(e) =>
              setSearchForm({
                ...searchForm,
                params: { ...searchForm.params, guest_market: e.target.value },
              })
            }
          />
        </div>

        {/* Has Referral Links */}
        <div className="w-full">
          <div className="mb-2 block">
            <Label htmlFor="has_links">Has Referral Links</Label>
          </div>

          <Select
            id="has_links"
            name="has_links"
            theme={formTheme.select}
            value={
              searchForm.params.has_links === undefined
                ? ''
                : searchForm.params.has_links
                  ? 'yes'
                  : 'no'
            }
            onChange={(e) =>
              setSearchForm(() => ({
                ...searchForm,
                params: {
                  ...searchForm.params,
                  has_links:
                    e.target.value === ''
                      ? undefined
                      : e.target.value === 'yes'
                        ? true
                        : false,
                },
              }))
            }
          >
            <option value="">All</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
          </Select>
        </div>

        {/* Merchants */}
        <MerchantSelector
          id="merchant_id"
          label="Merchant"
          value={searchForm.params.merchant_id}
          onChange={(merchant) =>
            setSearchForm(() => ({
              ...searchForm,
              params: {
                ...searchForm.params,
                merchant_id: merchant ? merchant.id : undefined,
              },
            }))
          }
        />
      </div>

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