"use client";

import { Badge, Card, Tooltip } from "antd";
import Image from "next/image";
import markerIcon from "@/public/assets/svgs/common/marker-icon.svg";
import cancelMarkerIcon from "@/public/assets/svgs/common/marker-icon-cancel.svg";
import poiIcon from "@/public/assets/svgs/common/poi-icon.svg";
import driverIcon from "@/public/assets/svgs/common/driver.svg";
import drunkDriverIcon from "@/public/assets/svgs/common/drunk_driver.svg";
import { VehicleData } from "@/app/_globalRedux/services/types/getListVehiclesmobTypes";
import { useDispatch, useSelector } from "react-redux";
import {
  setNearbyVehicles,
  setSelectedVehicleStatus,
} from "@/app/_globalRedux/dashboard/selectedVehicleSlice";
import { setSelectedVehicleCustomRange } from "@/app/_globalRedux/dashboard/selectedVehicleCustomRangeSlice";
import { setOpenStoppageIndex } from "@/app/_globalRedux/dashboard/mapSlice";
import { RootState } from "@/app/_globalRedux/store";
import moreIcon from "@/public/assets/svgs/common/more-icon.svg";
import { setOptionsIndex } from "@/app/_globalRedux/dashboard/optionsSlice";
import { Options } from "./vehicleOverviewCard/Options";
import { Elock } from "./Elock";
import { ShareUrl } from "./vehicleOverviewCard/ShareUrl";
import { MapYourVehicle } from "./vehicleOverviewCard/MapYourVehicle";
import { DriverInfo } from "./vehicleOverviewCard/DriverInfo";
import { setRadiusInKilometers } from "@/app/_globalRedux/dashboard/nearbyVehicleSlice";
import { CreatePOI } from "./vehicleOverviewCard/CreatePOI";
import {
  LeftCircleOutlined,
  LockOutlined,
  RightCircleOutlined,
  WarningOutlined,
} from "@ant-design/icons";
import { NoGpsKm } from "./noGpsKm";
import { PowerDisconnected } from "./powerDisconnected";
import checkIfIgnitionOnOrOff from "@/app/helpers/checkIfIgnitionOnOrOff";
import { getAlcoholStatus } from "@/app/helpers/getAlcholStatus";
import { MouseEvent, useMemo, useState } from "react";
import { getLatestGPSTime } from "./utils/getLatestGPSTime";
import {
  setVehicleItnaryWithPath,
  vehicleItnaryWithPathInitialState,
} from "@/app/_globalRedux/dashboard/vehicleItnaryWithPathSlice";
import { setLiveVehicleItnaryWithPath } from "@/app/_globalRedux/dashboard/liveVehicleSlice";
import { trackingDashboard } from "@/app/_globalRedux/services/trackingDashboard";
import { isCheckInAccount } from "@/app/helpers/isCheckInAccount";
import { Padlock } from "./Padlock";
import moment from "moment";
import { setVehicleDetailsStatus } from "@/app/_globalRedux/dashboard/isVehicleStatusOrTripStatusActive";
import { DTC } from "./DTC";
import { isKmtAccount } from "@/app/helpers/isKmtAccount";
import { Fuel } from "./Fuel";
import { isHourAgo } from "./utils/isHourAgo";
import { getGPSOrElock } from "./utils/getNormalOrControllerId";

export const VehicleOverviewCard = ({
  vehicleData,
}: {
  vehicleData: VehicleData;
}) => {
  const currentModeArr = vehicleData.gpsDtl.mode.split("");
  const selectedVehicle = useSelector(
    (state: RootState) => state.selectedVehicle
  );
  const auth = useSelector((state: RootState) => state.auth);
  const [overviewSliderStyle, setOverviewSliderStyle] = useState(0);

  const dispatch = useDispatch();

  const checkIfDriverNameAndNumberExists = () => {
    if (
      vehicleData.drivers.driverName &&
      vehicleData.drivers.driverName.trim().toLowerCase() !== "na" &&
      vehicleData.drivers.phoneNumber &&
      vehicleData.drivers.phoneNumber.trim().toLowerCase() !== "na"
    ) {
      if (vehicleData.drivers.driverName && vehicleData.drivers.phoneNumber) {
        return `${vehicleData.drivers.driverName} / ${vehicleData.drivers.phoneNumber}`;
      } else {
        return "NA";
      }
    } else {
      return "NA";
    }
  };

  const activeItemsCount = useMemo(() => {
    let count = isCheckInAccount(Number(auth.userId)) ? 1 : 3;

    if (isCheckInAccount(Number(auth.userId))) count++;
    if (auth.isAc && !isCheckInAccount(Number(auth.userId))) count++;
    if (auth.isTemp) count = count + 3;
    if (auth.isEveVehicle) count++;
    if (auth.isMarketVehicle || auth.isPadlock || auth.isEveVehicle) count++;
    if (auth.isOdometer || auth.isEveVehicle) count++;

    return count;
  }, [auth]);

  const maxSliderValue = useMemo(
    () => activeItemsCount * 80,
    [activeItemsCount]
  );

  const containerWidth = 260;

  const handleRightClick = (e: MouseEvent) => {
    e.stopPropagation();
    setOverviewSliderStyle((prev) => {
      const remainingScrollSpace = maxSliderValue + prev - containerWidth;

      if (remainingScrollSpace > 0) {
        return prev - 100;
      } else {
        return prev;
      }
    });
  };

  const handleLeftClick = (e: MouseEvent) => {
    e.stopPropagation();
    setOverviewSliderStyle((prev) => {
      if (overviewSliderStyle === 0) {
        return prev;
      } else {
        return prev + 100;
      }
    });
  };

  const handleVehicleSelect = () => {
    dispatch(
      trackingDashboard.util.invalidateTags(["Selected-Vehicle-Itinerary"])
    );
    dispatch(
      trackingDashboard.util.invalidateTags(["Selected-Vehicle-Diagnostic"])
    );
    dispatch(
      setSelectedVehicleCustomRange({
        dateRangeToDisplay: { startDate: "", endDate: "" },
        dateRangeForDataFetching: { startDate: "", endDate: "" },
        customRangeSelected: "Today",
        previousDateRange: { startDate: "", endDate: "" },
      })
    );
    dispatch(setVehicleItnaryWithPath(vehicleItnaryWithPathInitialState));
    dispatch(setLiveVehicleItnaryWithPath(vehicleItnaryWithPathInitialState));

    dispatch(setOpenStoppageIndex(-1));
    dispatch(
      setSelectedVehicleStatus({
        ...vehicleData,
        searchType: "",
        selectedVehicleHistoryTab: selectedVehicle.selectedVehicleHistoryTab,
        nearbyVehicles: [],
        prevVehicleSelected: selectedVehicle.prevVehicleSelected,
      })
    );
    dispatch(setNearbyVehicles(undefined));
    dispatch(setRadiusInKilometers(0));
  };

  return (
    <div className="relative select-none ">
      {isCheckInAccount(Number(auth.userId)) ? null : (
        <>
          <ShareUrl vehicleData={vehicleData} />
          <Options vehicleData={vehicleData} />
          <MapYourVehicle vehicleData={vehicleData} />
          <DriverInfo vehicleData={vehicleData} />
          <CreatePOI vehicleData={vehicleData} type="Vehicle_Based" />
        </>
      )}

      <div>
        {vehicleData.ELOCKInfo &&
        vehicleData.ELOCKInfo.Unhealthy &&
        vehicleData.ELOCKInfo.Unhealthy.data &&
        Array.isArray(vehicleData.ELOCKInfo.Unhealthy.data) &&
        vehicleData.ELOCKInfo.Unhealthy.data[0] == 1 ? (
          <Tooltip
            title={vehicleData.ELOCKInfo.UnhealthyDesc ?? ""}
            placement="rightTop"
          >
            <div>
              <Badge.Ribbon text="Unhealthy" color="#C12F3B" className="z-10" />
            </div>
          </Tooltip>
        ) : null}

        <div className="h-2"></div>
        <Card
          className={`text-wrap overflow-clip shadow-xl shadow-s-dark text-sm rounded-3xl cursor-pointer`}
          styles={{
            body: {
              borderRadius: ".5rem",
              border:
                selectedVehicle.vId === vehicleData.vId
                  ? "1.5px solid #478C83"
                  : "1.5px solid transparent",
              background:
                vehicleData.gpsDtl.immoblizeStatus == 1 &&
                !isKmtAccount(Number(auth.userId), Number(auth.parentUser))
                  ? "#ECF4D8"
                  : "white",
            },
          }}
          onClick={() => {
            handleVehicleSelect();
            dispatch(setVehicleDetailsStatus({ type: "vehicle" }));
          }}
        >
          <div className="flex flex-col items-baseline gap-0.5 overflow-hidden relative">
            <div className="flex justify-between items-start mb-2 gap-2 w-full">
              <div>
                <div>
                  <p className="font-extrabold text-base break-all -mt-1">
                    {" "}
                    {vehicleData.vehReg}
                  </p>
                </div>

                {vehicleData.gpsDtl.mode !== "RUNNING" &&
                !isCheckInAccount(Number(auth.userId)) &&
                vehicleData.gpsDtl.speed === 0 ? (
                  <p className="text-xs font-semibold mt-1 text-red-600">
                    {vehicleData.gpsDtl.mode === "NOT WORKING"
                      ? "Not Working Hours: "
                      : `${currentModeArr[0]}${currentModeArr
                          .slice(1, currentModeArr.length)
                          .join("")
                          .toLowerCase()} since: `}
                    <span className="font-bold">
                      {vehicleData.gpsDtl.mode === "NOT WORKING"
                        ? `${vehicleData.gpsDtl.notworkingHrs} hrs`
                        : vehicleData.gpsDtl.modeTime}
                    </span>
                  </p>
                ) : null}
                {`${auth.userId}` === "81491" ? (
                  <p className="text-xs font-semibold mb-2 mt-0.5">
                    Odometer Reading: {vehicleData.gpsDtl.tel_odometer} KM
                  </p>
                ) : null}

                <p className="text-xs font-medium text-gray-500">
                  Last data received at{" "}
                  {auth.accessLabel === 6
                    ? getGPSOrElock(vehicleData) === "GPS"
                      ? vehicleData?.GPSInfo?.gpstime
                      : vehicleData?.ELOCKInfo?.gpstime
                    : vehicleData?.gpsDtl?.latLngDtl?.gpstime}
                </p>
              </div>

              <div className="flex gap-2 items-center">
                <div className="flex items-center gap-2">
                  <NoGpsKm data={vehicleData} />
                  <PowerDisconnected data={vehicleData} />
                  <Elock data={vehicleData} />
                  <Padlock data={vehicleData} />
                  <DTC data={vehicleData} />
                  <Fuel data={vehicleData} />
                </div>

                {vehicleData.gpsDtl.alertCount > 0 ? (
                  <WarningOutlined
                    color=""
                    style={{ fontSize: "20px", color: "#FED400" }}
                  />
                ) : null}

                {isCheckInAccount(Number(auth.userId)) ? null : (
                  <div
                    className="flex items-center"
                    onClick={(e) => {
                      e.stopPropagation();
                      dispatch(setOptionsIndex(vehicleData.vId));
                    }}
                  >
                    <Tooltip title="Options" mouseEnterDelay={2}>
                      <div className="p-2 px-3 bg-neutral-green rounded-full ">
                        <div className="w-[3px] relative select-none ">
                          <Image
                            src={moreIcon}
                            width={24}
                            height={24}
                            alt="more dropdown icon"
                            className="-mb-[2px] rotate-90"
                          />
                        </div>
                      </div>
                    </Tooltip>
                  </div>
                )}
              </div>
            </div>
            <div className="flex items-center gap-2 mb-1">
              <div className="font-semibold text-gray-600 w-6 relative overflow-visible">
                <Tooltip
                  title={
                    vehicleData.GPSInfo.gps_fix !== 1 && auth.accessLabel === 6
                      ? "Gps location not fixed"
                      : auth.accessLabel === 6
                      ? "Gps location"
                      : "Current Location"
                  }
                  placement="left"
                  mouseEnterDelay={1}
                >
                  {vehicleData.GPSInfo.gps_fix !== 1 &&
                  auth.accessLabel === 6 ? (
                    <Image
                      src={cancelMarkerIcon}
                      alt="current location"
                      width={24}
                      height={29.453}
                      className="relative z-0"
                    />
                  ) : (
                    <Image
                      src={markerIcon}
                      alt="current location"
                      width={24}
                      height={29.453}
                      className="relative z-0"
                    />
                  )}
                </Tooltip>
              </div>

              <Tooltip
                title={`${
                  auth.accessLabel === 6
                    ? vehicleData.GPSInfo.addr?.replaceAll("_", " ")
                    : vehicleData.gpsDtl.latLngDtl.addr?.replaceAll("_", " ")
                }`}
                placement="right"
                mouseEnterDelay={1}
              >
                <p
                  className={`text-sm  truncate w-[310px]  ${
                    getLatestGPSTime(vehicleData) === "GPS"
                      ? "text-primary-green"
                      : ""
                  }`}
                >
                  {auth.accessLabel === 6 &&
                  isHourAgo(vehicleData.GPSInfo.gpstime)
                    ? "Cabin device not working"
                    : auth.accessLabel === 6 &&
                      vehicleData.GPSInfo.gps_fix !== 1
                    ? vehicleData.GPSInfo.addr?.replaceAll("_", " ")
                    : vehicleData.gpsDtl.latLngDtl.addr
                    ? vehicleData.gpsDtl.latLngDtl.addr?.replaceAll("_", " ")
                    : ""}
                </p>
              </Tooltip>
            </div>
            {auth.accessLabel === 6 ? (
              <div className="flex items-center gap-2 mb-1">
                <div className="font-semibold text-gray-600 w-6 relative">
                  <Tooltip
                    title={
                      vehicleData.ELOCKInfo.gps_fix !== 1
                        ? "Elock location not fixed"
                        : "Elock location"
                    }
                    placement="left"
                    mouseEnterDelay={1}
                  >
                    {vehicleData.ELOCKInfo.gps_fix !== 1 ? (
                      <div className="w-[26px] h-[2px] bg-black rotate-45 absolute top-[11.9px] -right-[0.5px] rounded-md"></div>
                    ) : null}
                    <LockOutlined style={{ fontSize: "24px" }} />
                  </Tooltip>
                </div>
                <Tooltip
                  title={`${vehicleData.ELOCKInfo.addr?.replaceAll("_", " ")}`}
                  placement="right"
                  mouseEnterDelay={1}
                >
                  <p
                    className={`text-sm  truncate w-[310px]  ${
                      getLatestGPSTime(vehicleData) === "ELOCK"
                        ? "text-primary-green"
                        : ""
                    }`}
                  >
                    {auth.accessLabel === 6 &&
                    isHourAgo(vehicleData.ELOCKInfo.gpstime)
                      ? "Elock device not working"
                      : auth.accessLabel === 6 &&
                        vehicleData.ELOCKInfo.gps_fix !== 1
                      ? vehicleData.ELOCKInfo.addr?.replaceAll("_", " ")
                      : vehicleData.gpsDtl.latLngDtl.addr
                      ? vehicleData.gpsDtl.latLngDtl.addr?.replaceAll("_", " ")
                      : ""}
                  </p>
                </Tooltip>
              </div>
            ) : null}

            {isCheckInAccount(Number(auth.userId)) ? null : (
              <div className="flex items-center gap-2 mb-1">
                <div className="font-semibold text-gray-600 w-6 ">
                  <Tooltip
                    title={
                      Number(auth.userId) === 87364 ||
                      Number(auth.parentUser) === 87364
                        ? "Geofence"
                        : "POI"
                    }
                    placement="left"
                    mouseEnterDelay={1}
                  >
                    <Image
                      src={poiIcon}
                      alt="current location"
                      width={24}
                      height={30}
                    />
                  </Tooltip>
                </div>
                <Tooltip
                  title={`${vehicleData.gpsDtl.latLngDtl.poi?.replaceAll(
                    "_",
                    " "
                  )}`}
                  placement="right"
                  mouseEnterDelay={1}
                >
                  <p className="text-sm truncate w-[310px]">
                    {Number(auth.userId) === 87364 ||
                    Number(auth.parentUser) === 87364
                      ? vehicleData.gpsDtl.latLngDtl.poi &&
                        vehicleData.gpsDtl.latLngDtl.poi?.replaceAll(
                          "_",
                          " "
                        ) === "Inside POI"
                        ? "Inside Geofence"
                        : vehicleData.gpsDtl.latLngDtl.poi?.replaceAll(
                            "_",
                            " "
                          ) === "No Nearest POI"
                        ? "No Nearest Geofence"
                        : vehicleData.gpsDtl.latLngDtl.poi?.replaceAll("_", " ")
                      : vehicleData.gpsDtl.latLngDtl.poi?.replaceAll("_", " ")}
                  </p>
                </Tooltip>
              </div>
            )}

            {isCheckInAccount(Number(auth.userId)) ? null : (
              <div className="flex items-center gap-2 mb-1">
                {auth.isAlcohol && getAlcoholStatus(vehicleData) ? (
                  <div className="font-semibold text-gray-600 w-6 ">
                    <Tooltip
                      title="Driver is drunk"
                      placement="left"
                      mouseEnterDelay={1}
                    >
                      <Image
                        src={drunkDriverIcon}
                        alt="driver"
                        width={24}
                        height={30}
                      />
                    </Tooltip>
                  </div>
                ) : (
                  <div className="font-semibold text-gray-600 w-6 ">
                    <Tooltip
                      title="Driver"
                      placement="left"
                      mouseEnterDelay={1}
                    >
                      <Image
                        src={driverIcon}
                        alt="driver"
                        width={24}
                        height={30}
                      />
                    </Tooltip>
                  </div>
                )}
                <Tooltip
                  title={`${vehicleData.drivers.driverName}`}
                  placement="right"
                  mouseEnterDelay={1}
                >
                  <p className="text-sm truncate w-[310px]">
                    {checkIfDriverNameAndNumberExists()}
                  </p>
                </Tooltip>
              </div>
            )}

            <div className="flex mt-4 w-full text-center overflow-hidden relative">
              <div className="flex items-center bg-white h-[84px] mr-2 z-10">
                <div
                  className={`hover:opacity-50 ${
                    overviewSliderStyle === 0
                      ? "opacity-50 cursor-not-allowed"
                      : "opacity-100 cursor-pointer"
                  }transition-opacity duration-300`}
                  onClick={(e) => {
                    handleLeftClick(e);
                  }}
                >
                  <LeftCircleOutlined />
                </div>
              </div>

              <div id="items">
                <div
                  className="flex gap-4 text-center overflow-hidden w-[100%] relative"
                  style={{
                    transform: `${
                      maxSliderValue <= 260
                        ? "translateX(0px)"
                        : `translateX(${overviewSliderStyle}px)`
                    }`,
                    transition: "transform 0.3s ease",
                  }}
                >
                  <a
                    href={`https://www.google.com/maps/search/${vehicleData.gpsDtl.latLngDtl.lat},${vehicleData.gpsDtl.latLngDtl.lng}`}
                    target="_blank"
                    rel="noreferrer"
                    onClick={(e) => {
                      e.stopPropagation();
                    }}
                    className="z-20 relative"
                  >
                    <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs w-20 h-[84px] min-w-[80px]">
                      <div className="font-semibold">
                        {vehicleData.gpsDtl.latLngDtl.lat?.toFixed(4)}{" "}
                        {vehicleData.gpsDtl.latLngDtl.lng?.toFixed(4)}
                      </div>
                      <div className="mt-1">Lat | Lng</div>
                    </div>
                  </a>
                  {isCheckInAccount(Number(auth.userId)) ? null : (
                    <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs w-20 h-[84px] min-w-[80px]">
                      <div className="font-semibold">
                        {checkIfIgnitionOnOrOff({
                          ignitionState:
                            vehicleData.gpsDtl.ignState.toLowerCase() as
                              | "off"
                              | "on",
                          speed: vehicleData.gpsDtl.speed,
                          mode: vehicleData.gpsDtl.mode,
                        }) === "On"
                          ? vehicleData.gpsDtl.speed
                          : 0}{" "}
                        km/h
                      </div>
                      <div className="mt-1">Speed</div>
                    </div>
                  )}
                  {isCheckInAccount(Number(auth.userId)) ||
                  auth.accessLabel == 4 ? null : (
                    <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs w-20 h-[84px] min-w-[80px]">
                      <div className="font-semibold">
                        {vehicleData.gpsDtl.ignState.toLowerCase()}
                      </div>
                      <div className="mt-1">Ignition</div>
                    </div>
                  )}

                  {auth.isAc &&
                  !isCheckInAccount(Number(auth.userId)) &&
                  auth.accessLabel !== 4 ? (
                    <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs w-20 h-[84px] min-w-[80px]">
                      <div className="font-semibold">
                        {vehicleData.gpsDtl.acState}
                      </div>
                      <div className="mt-1">AC</div>
                    </div>
                  ) : null}

                  {auth.isTemp ? (
                    <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs min-w-20 h-[84px]">
                      <div className="font-semibold">
                        {vehicleData.gpsDtl.temperature?.toFixed(2)} °C
                      </div>
                      <div className="mt-1">Temp</div>
                    </div>
                  ) : null}

                  {auth.isTemp ? (
                    <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs min-w-20 h-[84px]">
                      <div className="font-semibold">
                        {vehicleData.gpsDtl.alcoholLevel} °C
                      </div>
                      <div className="mt-1">Humidity</div>
                    </div>
                  ) : null}

                  {auth.isEveVehicle ? (
                    <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs w-20 h-[84px] min-w-[80px]">
                      <div className="font-semibold">
                        {vehicleData.gpsDtl.tel_rfid} km
                      </div>
                      <div className="mt-1">Distance to Empty</div>
                    </div>
                  ) : null}

                  {auth.isMarketVehicle ||
                  auth.isPadlock ||
                  auth.isEveVehicle ||
                  Number(auth.userId) === 87162 ? (
                    <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs w-20 h-[84px] min-w-[80px]">
                      <div className="font-semibold">
                        {auth.isCrackPadlock || Number(auth.userId) === 87162
                          ? vehicleData.gpsDtl.percentageBttry
                          : vehicleData.gpsDtl.main_powervoltage
                          ? vehicleData.gpsDtl.main_powervoltage?.toFixed(2)
                          : "0"}
                        {auth.isCrackPadlock || Number(auth.userId) === 87162
                          ? ""
                          : "%"}
                      </div>
                      <div className="mt-1">Battery Status</div>
                    </div>
                  ) : null}

                  {auth.accessLabel === 4 ? (
                    <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs w-20 h-[84px] min-w-[80px]">
                      <div className="font-semibold">
                        {vehicleData.gpsDtl.percentageBttry}
                      </div>
                      <div className="mt-1">Battery Status</div>
                    </div>
                  ) : null}

                  {isCheckInAccount(Number(auth.userId)) ? (
                    <>
                      <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs w-20 h-[84px] min-w-[80px]">
                        <div className="font-semibold">
                          {vehicleData.gpsDtl.volt} %
                        </div>
                        <div className="mt-1">Mobile Battery</div>
                      </div>
                      <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs w-20 h-[84px] min-w-[80px]">
                        <div
                          className={`font-semibold ${
                            moment(
                              vehicleData.gpsDtl.latLngDtl.gpstime
                            ).date() === moment().date()
                              ? "text-primary-green"
                              : "text-red-700"
                          }`}
                        >
                          {moment(
                            vehicleData.gpsDtl.latLngDtl.gpstime
                          ).date() === moment().date()
                            ? "Checked In"
                            : "Not Checked"}
                        </div>
                        <div
                          className={`mt-1 ${
                            moment(
                              vehicleData.gpsDtl.latLngDtl.gpstime
                            ).date() === moment().date()
                              ? "text-primary-green"
                              : "text-red-700"
                          }`}
                        >
                          Status
                        </div>
                      </div>
                    </>
                  ) : null}

                  {auth.isOdometer || auth.isEveVehicle ? (
                    <div className="border border-gray-300 px-2 py-3 rounded-lg text-xs w-20 h-[84px] min-w-[80px]">
                      <div className="font-semibold">
                        {vehicleData.gpsDtl.tel_odometer
                          ? vehicleData.gpsDtl.tel_odometer?.toFixed(2)
                          : "0.00"}{" "}
                        km
                      </div>
                      <div className="mt-1">Odometer</div>
                    </div>
                  ) : null}
                </div>
              </div>
              <div className="flex items-center bg-white h-[84px] z-10 absolute right-0">
                <div
                  className={`hover:opacity-50 ${
                    overviewSliderStyle + maxSliderValue - containerWidth <= 0
                      ? "opacity-50 cursor-not-allowed"
                      : "opacity-100 cursor-pointer"
                  }transition-opacity duration-300`}
                  onClick={(e) => {
                    handleRightClick(e);
                  }}
                >
                  <RightCircleOutlined />
                </div>
              </div>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};