"use client"

import { faCircleXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button, Input, Popover } from "antd";
import classNames from "classnames";
import Image from "next/image";
import { useState } from "react";

type Props = {
  className?: string
  classButton?: string
  classInput?: string
  placeholder?: string
  value: string
  classShort?: string
  onSearch: (value: string) => void
  onChange: (value: string) => void
  disabled?: boolean
}

export default function SearchBox({ className, classButton, classInput, placeholder = "Search anything here", value, classShort, onSearch, onChange, disabled = false }: Props) {
  const [openPopover, setOpenPopover] = useState(false)

  const handleClear = () => {
    onChange("")
    onSearch("")
  }

  return (
    <>
      <div
        className={classNames(
          "hidden md:flex items-center bg-white rounded-lg overflow-hidden border-solid border border-[var(--secondary-20)] hover:border-[var(--primary--70)] relative",
          className,
        )}>
        <Button
          icon={
            <Image
              src="/img/icon/search-normal.svg"
              alt="search"
              width={32}
              height={32}
              style={{
                width: "100%",
              }}
            />
          }
          onClick={() => onSearch(value)}
          className={classNames("!border-none !pl-1 shrink-0", classButton || "!h-12 xl:!h-14")}
        />
        <Input
          disabled={disabled}
          placeholder={placeholder}
          value={value}
          onPressEnter={() => onSearch(value)}
          onChange={(e) => onChange(e.target.value)}
          className={classNames("!border-none !w-full", classInput || "!h-12 xl:!h-14 xl:!w-96")}
        />
        {value ? (
          <Button
            icon={<FontAwesomeIcon icon={faCircleXmark} />}
            onClick={handleClear}
            className="!py-0 !border-none absolute right-4 !text-secondary-70 !rounded-full"></Button>
        ) : null}
      </div>
      <div className={classNames("md:hidden", classShort)}>
        <Popover
          content={
            <div className="flex items-center justify-start bg-white rounded-lg overflow-hidden border-solid border border-[var(--secondary-20)] relative">
              <Button
                icon={
                  <Image
                    src="/img/icon/search-normal.svg"
                    alt="search"
                    width={32}
                    height={32}
                    style={{
                      width: "100%",
                    }}
                  />
                }
                onClick={() => onSearch(value)}
                className="!border-none !pl-1 shrink-0 !h-12"
              />
              <Input
                disabled={disabled}
                placeholder={placeholder}
                value={value}
                onPressEnter={() => onSearch(value)}
                onChange={(e) => onChange(e.target.value)}
                className="!border-none !w-full !h-12"
              />
              {value ? (
                <Button
                  icon={<FontAwesomeIcon icon={faCircleXmark} />}
                  onClick={handleClear}
                  className="!py-0 !border-none absolute right-4 !text-secondary-70 !rounded-full"></Button>
              ) : null}
            </div>
          }
          title=""
          trigger="click"
          // arrow={false}
          open={openPopover}
          placement="left"
          onOpenChange={setOpenPopover}>
          <Button
            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-[var(--secondary-20)] rounded-lg", classButton || "!h-12 xl:!h-14")}
          />
        </Popover>
      </div>
    </>
  )
}