"use client";

import { setLiveVehicleItnaryWithPath } from "@/app/_globalRedux/dashboard/liveVehicleSlice";
import { setOpenStoppageIndex } from "@/app/_globalRedux/dashboard/mapSlice";
import { setSelectedVehicleBySelectElement } from "@/app/_globalRedux/dashboard/selectedVehicleSlice";
import { vehicleItnaryWithPathInitialState } from "@/app/_globalRedux/dashboard/vehicleItnaryWithPathSlice";
import { setSelectedVehicleDeviceId } from "@/app/_globalRedux/dashboard/videoTelematics";
import { Markers } from "@/app/_globalRedux/services/types/getListVehiclesmobTypes";
import { RootState } from "@/app/_globalRedux/store";
import { ConfigProvider, Select, SelectProps, Tooltip } from "antd";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";

type SelectedStyles = {
  selectorBg: string;
  colorBorder: string;
  fontSize: number;
  optionFontSize: number;
  optionPadding: string;
  optionSelectedColor: string;
};

export const VehicleDetailsSelect = ({
  selectedStyles,
  type,
}: {
  selectedStyles: SelectedStyles;
  type: "GLOBAL" | "";
}) => {
  const markers = useSelector((state: RootState) => state.markers);
  const selectedVehicle = useSelector(
    (state: RootState) => state.selectedVehicle
  );
  const { type: VehicleListType } = useSelector(
    (state: RootState) => state.isVehicleStatusOrTripStatusActive
  );

  const dispatch = useDispatch();

  const filterOption = (
    input: string,
    option?: { label: string; value: number }
  ) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());

  const [customSelectOptions, setCustomSelectOptions] = useState<
    { label: string; value: number }[]
  >([]);

  useEffect(() => {
    if (customSelectOptions.length == 0) {
      setCustomSelectOptions(
        markers.map((marker: Markers) => ({
          label: marker.vehReg,
          value: marker.vId,
        }))
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [markers]);

  useEffect(() => {
    if (markers.length > 0 && VehicleListType === "video") {
      const markersWithDevice = markers.filter(
        (marker: Markers) => marker.gpsDtl.model
      );

      setCustomSelectOptions(
        markersWithDevice.map((marker: Markers) => ({
          label: marker.vehReg,
          value: marker.vId,
        }))
      );
    } else if (VehicleListType !== "video") {
      setCustomSelectOptions(
        markers.map((marker: Markers) => ({
          label: marker.vehReg,
          value: marker.vId,
        }))
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [VehicleListType]);

  type LabelRender = SelectProps["labelRender"];

  const labelRender: LabelRender = (props) => {
    const { label } = props;

    if (label && typeof label === "string") {
      return label.length > 16 ? (
        <Tooltip title={label} mouseEnterDelay={1}>
          {label.slice(0, 16)}...
        </Tooltip>
      ) : (
        label
      );
    }
    return <span>No option match</span>;
  };

  return (
    <ConfigProvider
      theme={{
        components: {
          Select: { ...selectedStyles, paddingContentVertical: 0 },
        },
        token: {
          colorTextPlaceholder: "transparent",
        },
      }}
    >
      <div className="relative border rounded-lg">
        <Select
          labelRender={labelRender}
          value={selectedVehicle.vId}
          className={`w-full`}
          onChange={(e) => {
            const vehicleSelectedByFilter = markers.find(
              (marker) => marker.vId === e
            );

            if (vehicleSelectedByFilter) {
              dispatch(setOpenStoppageIndex(-1));
              dispatch(
                setSelectedVehicleBySelectElement({
                  ...vehicleSelectedByFilter,
                  searchType: type,
                  selectedVehicleHistoryTab:
                    selectedVehicle.selectedVehicleHistoryTab,
                  nearbyVehicles: [],
                  prevVehicleSelected: selectedVehicle.prevVehicleSelected,
                })
              );
              vehicleSelectedByFilter.gpsDtl.model !== null &&
                dispatch(
                  setSelectedVehicleDeviceId(
                    vehicleSelectedByFilter.gpsDtl.model
                  )
                );
              dispatch(
                setLiveVehicleItnaryWithPath(vehicleItnaryWithPathInitialState)
              );
            }
          }}
          options={customSelectOptions}
          showSearch
          filterOption={filterOption}
          notFoundContent={"No Vehicles Found"}
          suffixIcon
        />
        <div className="w-5 h-5 overflow-hidden absolute top-1.5 right-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 22 27.5"
            version="1.1"
            x="0px"
            y="0px"
          >
            <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
              <g fill="rgb(75, 85, 99)">
                <path d="M15.4917684,14.0775548 L20.4885358,19.0743222 C20.8772627,19.4630492 20.8785283,20.0920344 20.4852814,20.4852814 C20.0947571,20.8758057 19.4559712,20.8701848 19.0743222,20.4885358 L14.0775548,15.4917684 C10.9391253,17.9342662 6.39944393,17.7131524 3.51471863,14.8284271 C0.390524292,11.7042328 0.390524292,6.63891296 3.51471863,3.51471863 C6.63891296,0.390524292 11.7042328,0.390524292 14.8284271,3.51471863 C17.7131524,6.39944393 17.9342662,10.9391253 15.4917684,14.0775548 L15.4917684,14.0775548 Z M13.4142136,13.4142136 C15.7573593,11.0710678 15.7573593,7.27207794 13.4142136,4.92893219 C11.0710678,2.58578644 7.27207794,2.58578644 4.92893219,4.92893219 C2.58578644,7.27207794 2.58578644,11.0710678 4.92893219,13.4142136 C7.27207794,15.7573593 11.0710678,15.7573593 13.4142136,13.4142136 Z" />
              </g>
            </g>
          </svg>
        </div>
      </div>
    </ConfigProvider>
  );
};