import React, { useEffect, useRef } from "react";
import mapboxgl, { Map as MapboxMap } from "mapbox-gl";

const DemandByPort = ({ center, zoom }: any) => {
  const mapContainerRef = useRef(null);
  const mapRef = useRef<MapboxMap>();

  useEffect(() => {
    mapboxgl.accessToken =
      "pk.eyJ1IjoiYWJoaXNoZWtnenAiLCJhIjoiY2xpNDh1dmhrMGQydTNlcGNkcmNzODh3aSJ9.hEFISVtEZ2mXShFSBzbVRQ";
    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current!,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-73.98784, 40.748817],
      zoom: zoom,
      maxZoom: 15,
      minZoom: 7,
      // Disable the default attribution control
      attributionControl: false,
    });

    mapRef.current.on("load", () => {
      mapRef.current!.addSource("clusters", {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: [],
        },
        cluster: true,
        clusterMaxZoom: 1,
        clusterRadius: 1,
      });

      mapRef.current!.addLayer({
        id: "clusters",
        type: "circle",
        source: "clusters",
        filter: ["has", "point_count"],
        paint: {
          "circle-color": [
            "step",
            ["get", "point_count"],
            "#51bbd6",
            100,
            "#f1f075",
            750,
            "#f28cb1",
          ],
          "circle-radius": [
            "step",
            ["get", "point_count"],
            20,
            100,
            30,
            750,
            40,
          ],
        },
      });

      mapRef.current!.addLayer({
        id: "cluster-count",
        type: "symbol",
        source: "clusters",
        filter: ["has", "point_count"],
        layout: {
          "text-field": "{point_count_abbreviated}",
          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
          "text-size": 12,
        },
        paint: {
          "text-color": "#ffffff",
        },
      });

      mapRef.current!.addLayer({
        id: "unclustered-point",
        type: "circle",
        source: "clusters",
        filter: ["!", ["has", "point_count"]],
        paint: {
          "circle-color": "#11b4da",
          "circle-radius": 4,
          "circle-stroke-width": 1,
          "circle-stroke-color": "#fff",
        },
      });
    });

    return () => {
      mapRef.current?.remove();
    };
  }, [center, zoom]);

  useEffect(() => {
    const map = mapRef.current;

    if (map) {
      map.dragPan.disable();
    }
  }, []);
  return (
    <>
      <div className="chart_block">
        <div className="d-flex justify-content-between">
          <div className="port_ramp_tow">
            <h3>FIND CARRIERS</h3>
          </div>
          <div className="float-end">
            <span className="form-control-feedback">
              <i className="bi bi-search"></i>
            </span>
            <input
              type="search"
              className="form-control form-input search-field form-control-search"
              placeholder="Search"
            />
          </div>
        </div>
        <div className="pic">
          <div
            ref={mapContainerRef}
            style={{ width: "100%", height: "325px" }}
          />
        </div>
      </div>
    </>
  );
};

export default DemandByPort;