/* eslint-disable react/jsx-key */
import React, { useState, ChangeEvent, useEffect } from "react";
import "react-toastify/dist/ReactToastify.css";
import mapboxgl from "mapbox-gl";
import { Button, Dropdown, Form } from "react-bootstrap";
import { getPortsby } from "@/services/public";
mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_GL_TOKEN as string;

interface City {
  name: string;
  longitude: number;
  latitude: number;
}

interface SearchbarProps {
  onSelectCity: (k: never) => void;
}

const Searchbar: React.FC<SearchbarProps> = ({
  style,
  cordinateId,
  ids,
  onSelectCity,
  portLists,
  getStatess,
  getState,
  SetAddress,
  clearMap,
  clearAddress,
  setSelectedMarket,
  setMarketSectionVisible,
  mapStats,
  setSelectedTerminal
}: any) => {

  
  
  const [cityList] = useState<City[]>([]);
  const [myState, setMyState] = useState();
  const [searchValue, setSearchValue] = useState("");
  const [stateValue, setStateValue] = useState("");
  const [selectMarketValue, setSelectMarketValue] = useState("State");
  const [selectedState, setSelectedState] = useState(null);
  const [selectedValue, setSelectedValue] = useState("Market");
  const [show, setShow] = useState(false);
  const showBackground = cityList.length > 0;

  const handleSearchMarketChange = (event: ChangeEvent<HTMLInputElement>) => {
    setShow(true);
    setStateValue(event.target.value);
  };

  const [selectedPort, setSelectedPort] = useState(null);

  const [array, setArray] = useState([]);

  const [statearr, setStatearr] = useState([]);
  useEffect(() => {
    const selectedPorts = myState?.data?.map((obj: { name: any; id: any }) => {
      return {
        name: obj.name,
        id: obj.id,
        state_code_port: obj.state_code,
      };
    });

    const selectedstates = getStatess?.data?.map(
      (obj: { state_name: any; id: any }) => {
        return {
          state_name: obj.state_name,
          state_code: obj.state_code,
        };
      },
    );

    setStatearr(selectedstates);
    setArray(selectedPorts);
  }, [portLists?.data, myState]);
  const filteredDropdownItems = array?.filter((item: any) =>
    item?.name?.toLowerCase()?.includes(searchValue?.toLowerCase()),
  );

  const filteredDropdownMarketItems = statearr?.filter((item) =>
    item?.state_name?.toLowerCase().includes(stateValue.toLowerCase()),
  );
  const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
    setShow(true);
    setSearchValue(event.target.value);
  };
  const handleDropdownItemClick = (value: string) => {
    ids(value?.name);
    setSelectedValue(value?.name);
    setSearchValue("");
    setSelectedPort(value);
    if (mapStats === 5) {
      
        setSelectedTerminal("")

    }
  };
  const clearSelectedValue = () => {
    ids("yes");
    setSelectedValue("Market");
    setSelectedPort(null);

  };

  const itemLimit = 5;
  const displayedItems = filteredDropdownItems?.slice(0, itemLimit);
  const displayesState = filteredDropdownMarketItems?.slice(0, itemLimit);
  const clearSelectedState = () => {
    setDis(true);
    cordinateId("yes");
    setSelectMarketValue("State");
    setSelectedState(null);
    setSelectedValue("Market");
    getState("")
    setSelectedPort(null);
    setArray([]);
    clearMap("");
    clearAddress("")
    if (mapStats === 5) {
      setSelectedMarket(null)
      setMarketSectionVisible(true)
    }
  
  };
  const [dis, setDis] = useState(true);
  const handleDropdownMarketItemClick = async (value: any) => {
    let res = await getPortsby(value?.state_code);

    if (res?.status === "success") {
      setDis(false);
    }
    setMyState(res);
    if (mapStats === 5) {
      setSelectedMarket(null)
      setMarketSectionVisible(true)
      setSelectedTerminal("");

    }
    cordinateId(value?.state_code);
    SetAddress("")
    getState(value?.state_name);
    setSelectMarketValue(value?.state_name);
    setStateValue("");
    setSelectedState(value);
  };
  return (
    <div>
      <div className={!style ? "duble_btn" : "duble_btnos"}>
        <div
          className="d-flex gap-2 btn-map px-5"
          style={{ marginLeft: "100px" }}
        >
          <Dropdown onClick={() => setShow(false)}>
            <Dropdown.Toggle
              as={Button}
              className="map-btn"
              variant="primary"
              id="dropdown-basic"
            >
              {selectedState ? (
                <span className="selected-value">
                  {selectedState.state_name}
                  <button className="clear-button" onClick={clearSelectedState}>
                    <i className="bi bi-x"></i>
                  </button>
                </span>
              ) : (
                selectMarketValue
              )}
            </Dropdown.Toggle>

            <Dropdown.Menu>
              <Form className="px-1">
                <input
                  maxLength="200"
                  type="search"
                  className="form-control"
                  placeholder="Search"
                  value={stateValue}
                  onChange={handleSearchMarketChange}
                />
              </Form>
              {show === false ? (
                <Dropdown.Item disabled>Select State</Dropdown.Item>
              ) : (
                displayesState?.map((item, index) => (
                  <Dropdown.Item
                    className="dropdown_select"
                    key={index}
                    onClick={() => handleDropdownMarketItemClick(item)}
                  >
                    {show === true ? item?.state_name : ""}
                  </Dropdown.Item>
                ))
              )}
            </Dropdown.Menu>
          </Dropdown>
          <Dropdown onClick={() => setShow(false)}>
            <Dropdown.Toggle
              disabled={dis}
              className="map-btn"
              variant="success"
              id="dropdown-basic"
            >
              {selectedPort ? (
                <span className="selected-value">
                  {selectedPort.name}, {selectedPort.state_code_port}
                  <button className="clear-button" onClick={clearSelectedValue}>
                    <i className="bi bi-x"></i>
                  </button>
                </span>
              ) : (
                selectedValue
              )}
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <Form className="px-1">
                <input
                  maxLength="200"
                  type="search"
                  className="form-control"
                  placeholder="Search"
                  value={searchValue}
                  onChange={handleSearchChange}
                />
              </Form>

              {show === false ? (
                <Dropdown.Item disabled>Select Port</Dropdown.Item>
              ) : (
                displayedItems?.map((item: any, index) => (
                  <Dropdown.Item
                    className="dropdown_select"
                    key={index}
                    onClick={() => handleDropdownItemClick(item)}
                  >
                    {show === true
                      ? ((
                          <>
                            {item?.name}, {item?.state_code_port}
                          </>
                        ) as any)
                      : ""}
                  </Dropdown.Item>
                ))
              )}
            </Dropdown.Menu>
          </Dropdown>
        </div>
      </div>

      <div style={{ marginTop: "-12px" }}>
        {showBackground && (
          <ul className="city-listing-css">
            {cityList.map((city, index) => (
              <li
                key={index}
                onClick={() =>
                  handleSelectCity(
                    city.name,
                    city.longitude,
                    city.latitude,
                    city,
                  )
                }
              >
                <div className="mb-3">{city.name}</div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};

export default Searchbar;
function fetchCities(value: string) {
  throw new Error("Function not implemented.");
}