import { h, type FunctionComponent } from 'preact'
import { useCallback } from 'preact/hooks'

import serializeForm from '../../shared/utils/serialize_form.ts'
import Input from './input.tsx'
import Button from './button.tsx'

import s from './errors_search_form.module.scss'
import sutil from './utility.module.scss'

const ErrorsSearchForm: FunctionComponent<{ className?: string; onSubmit: ANY }> = ({ onSubmit, className }) => {
  const searchParams = new URLSearchParams(location.search)

  const onSubmitHandler = useCallback((e: SubmitEvent & { currentTarget: HTMLFormElement }) => {
    e.preventDefault()

    onSubmit(serializeForm(e.currentTarget))
  }, [])

  return (
    <form onSubmit={onSubmitHandler} className={className}>
      <div className={sutil.row}>
        <Input label='Status Code' name='statusCode' defaultValue={searchParams.get('statusCode')} />
        <Input label='Type' name='type' defaultValue={searchParams.get('type')} />
        <Button className={s.button}>Search</Button>
      </div>
    </form>
  )
}

export default ErrorsSearchForm