"use client"

import { Button, Input } from "antd"
import classNames from "classnames"
import Image from "next/image"
import { useRef, useState } from "react"
import type { InputRef } from "antd"

type Props = {
  classNameBoxSearch?: string
  classButtonSearch?: string
  classButtonClose?: string
  classInput?: string
  placeholder?: string
  value: string
  classShort?: string
  onSearch: (value: string) => void
  onChange: (value: string) => void
  header: string
  disabled?: boolean
}

export default function SearchBoxCategory({
  classNameBoxSearch,
  classButtonSearch,
  classButtonClose,
  classInput,
  placeholder = "Search anything here",
  value,
  classShort,
  header,
  onSearch,
  onChange,
  disabled,
}: Props) {
  const [isActionSearch, setIsActionSearch] = useState(false)
  const inputRef = useRef<InputRef>(null)

  const handleFocus = () => {
    setTimeout(() => {
      inputRef.current!.focus({
        cursor: "all",
      })
    }, 300)
  }

  return (
    <>
      {isActionSearch ? (
        <div
          className={classNames(
            "flex items-center bg-white rounded-lg overflow-hidden border-solid border border-[var(--secondary-20)] hover:border-[var(--primary--70)]",
            classNameBoxSearch,
          )}>
          <Input
            ref={inputRef}
            disabled={disabled}
            placeholder={placeholder}
            value={value}
            onPressEnter={() => onSearch(value)}
            onChange={(e) => onChange(e.target.value)}
            className={classNames("!border-none !w-full !pr-1", classInput || "!h-12 xl:!h-14 xl:!w-96")}
          />
          <Button
            disabled={disabled}
            icon={
              <Image
                src="/img/icon/close_x.svg"
                alt="search"
                width={32}
                height={32}
                style={{
                  width: "100%",
                }}
              />
            }
            onClick={() => {
              setIsActionSearch(!isActionSearch)
              onChange("")
              onSearch("")
            }}
            className={classNames("!border-none !pl-1 shrink-0", classButtonClose || "!h-12 xl:!h-14")}
          />
        </div>
      ) : (
        <div className="flex justify-between items-center">
          <h3 className="text-2xl leading-[30px] font-bold w-full">{header}</h3>
          <div className={classNames("", classShort)}>
            <Button
              disabled={disabled}
              onClick={() => {
                setIsActionSearch(!isActionSearch)
                handleFocus()
              }}
              icon={
                <Image
                  src="/img/icon/search-normal.svg"
                  alt="search"
                  width={32}
                  height={32}
                  style={{
                    width: "100%",
                  }}
                />
              }
              className={classNames("!px-3 !w-12 xl:!w-14 shrink-0 !border-none", classButtonSearch || "!h-12 xl:!h-14")}
            />
          </div>
        </div>
      )}
    </>
  )
}