'use client'

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

import SearchButton from '@/lib/components/buttons/SearchButton'
import formTheme from '@/lib/themes/form'
import MerchantSelector from '@/lib/components/forms/MerchantSelector'
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">
        {/* Link Name */}
        <div className="w-full max-w-96">
          <div className="mb-2 block">
            <Label htmlFor="link_name">Link Name</Label>
          </div>

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

        {/* User ID */}
        <MerchantSelector
          value={searchForm.params.user_id}
          onChange={(merchant) => {
            setSearchForm({
              ...searchForm,
              params: {
                ...searchForm.params,
                user_id: merchant ? merchant.id : undefined,
              },
            })
          }}
        />
      </div>

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