"use client"

import React, { Dispatch } from "react"
import { SearchBox } from "@mapbox/search-js-react"

import { Form } from "antd"
import classNames from "classnames"
import { CustomAutoCompleteLocationCss } from "@/component/AutoCompleteLocation/style"
import { omit, omitBy } from "lodash"
import { appConfig } from "@/config/app"

interface IProps {
  query: any
  setQuery: Dispatch<any>
}

const AddressInput = ({ query, setQuery }: IProps) => {
  const handleRetrieve = (event: any) => {
    const feature = event.features[0]

    const updatedQuery = {
      ...query,
      country: feature?.properties?.context?.country?.name?.trim(),
      city: feature?.properties?.context?.place?.name?.trim(),
      state: feature?.properties?.context?.region?.name?.trim(),
    }
    const cleanedObj = omitBy(updatedQuery, (value) => value === null || value === undefined || value === "")

    setQuery(cleanedObj)
  }

  const handleClearLocation = () => {
    const updatedQuery = omit(query, ["city", "country", "state"])
    const cleanedObj = omitBy(updatedQuery, (value) => value === null || value === undefined || value === "")
    setQuery(cleanedObj)
  }

  return (
    <Form.Item
      className={classNames("max-w-[18.125rem] w-full h-[3.125rem] !mb-0 custom_mapbox", CustomAutoCompleteLocationCss)}
      name="locations">
      <SearchBox
        accessToken={appConfig?.mapBoxKey || ""}
        onRetrieve={handleRetrieve}
        onClear={handleClearLocation}
      />
    </Form.Item>
  )
}

export default AddressInput