"use client"

import { AutoComplete, Empty, Form, Input, Spin } from "antd"
import { debounce } from "lodash"
import { useMemo, useState } from "react"
import { CustomAutoCompleteLocationCss } from "./style"
import classNames from "classnames"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import Image from "next/image"
import { faAngleDown, faX } from "@fortawesome/free-solid-svg-icons"

interface IProps {
  formRef: any
}

export const AutoCompleteLocation = (props: IProps) => {
  const [keyword, setKeyword] = useState("")
  const [values, setValues] = useState("")

  // const { data: locationResponse, isLoading } = useGetLocations({ input: keyword?.trim() }, Boolean(keyword))

  // const options = useMemo(
  //   () =>
  //     locationResponse?.data?.predictions?.map((item: any) => ({
  //       value: item?.place_id,
  //       label: item?.description,
  //     })),
  //   [locationResponse],
  // )

  const handleSearch = (value: string) => {
    if (value.trim().length >= 3) {
      setKeyword(value.trim())
    } else {
      setKeyword("")
    }
  }

  const handleClear = () => {
    props.formRef.setFieldsValue({ location: "" })
    setValues("")
  }

  return (
    <Form.Item
      className={classNames("max-w-[18.125rem] w-full h-[3.125rem] !mb-0", CustomAutoCompleteLocationCss)}
      name="location">
      <AutoComplete
        // notFoundContent={isLoading ? <Spin /> : <Empty />}
        onSearch={debounce(handleSearch, 1000)}
        // options={options}
        onKeyDown={(e) => (e.keyCode == 13 ? e.preventDefault() : "")}
        onChange={(data) => setValues(data)}>
        <Input
          className="h-[3.125rem]"
          prefix={
            <Image
              src={"/img/icon/location.svg"}
              alt={"Location"}
              width={20}
              height={20}
              className="mr-3 !w-5 !h-5"
            />
          }
          suffix={
            values ? (
              <FontAwesomeIcon
                icon={faX}
                className="!w-5 !h-5"
                onClick={handleClear}
              />
            ) : (
              <FontAwesomeIcon
                icon={faAngleDown}
                className="!w-5 !h-5"
              />
            )
          }
          placeholder={"Please select location"}
        />
      </AutoComplete>
    </Form.Item>
  )
}