import React from "react";
import { ControlIcon, KebabIcon, TrashIcon } from "@/assets/svgs";
import { LazyLoad } from "@/components/LazyLoad";
import { DropdownOption, DropdownOptions } from "@/components/DropdownOptions";
import { GlobalContext, Views, setGLobalProperty } from "@/context/Global";
import { ModalPrompt } from "@/components/Modal";

const RouteListItem = ({
  endpoint,
  onEndpointSelect,
  selectedEndpointIndex,
  index,
  onEndpointDelete,
  deletingEndpointId,
}) => {
  const { dispatch: globalDispatch } = React.useContext(GlobalContext);
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  const openModal = () => setIsModalOpen(true);

  const closeModal = () => setIsModalOpen(false);


  const handleDelete = () => {
    onEndpointDelete(endpoint?.id);
    closeModal();
  };

  const dropdownOptions = [
    { name: "Delete", action: openModal, icon: <TrashIcon /> },
  ];

  const openRouteEditor = (route, type) => {
    setGLobalProperty(globalDispatch, route, "selectedRoute", "RouteListItem");
    setGLobalProperty(globalDispatch, Views.BasicRouteEditor, "view");
    onEndpointSelect(route, type)
  };

  return (
    <div
      key={endpoint?.id}
      className={`group relative flex min-h-[2.5rem] items-center justify-between rounded-md border-2 bg-white px-4 py-4 text-[#8D8D8D] ${selectedEndpointIndex === endpoint?.id
        ? "border-[#262626]"
        : "border-[#E0E0E0]"
        }`}
    // onEndpointSelect(endpoint)}
    >
      <div
        onClick={() => openRouteEditor(endpoint, endpoint?.model_id ? "ModelRoutes" : "CustomRoutes")}
        className="flex w-[98%] cursor-pointer items-center justify-between gap-4"
      >
        <div className="flex w-full items-center justify-start gap-2 md:w-fit">
          <ControlIcon
            fill={
              selectedEndpointIndex === endpoint?.id ? "#262626" : "#A8A8A8"
            }
          />
          <span
            className={
              selectedEndpointIndex === endpoint?.id
                ? "text-[#262626]"
                : "text-[#8D8D8D]"
            }
          >
            {endpoint.name || "endpoint_" + index}
          </span>
          <button className="min-h-5 flex h-7 max-h-7 items-center justify-center rounded-md bg-primaryBlue px-2 pb-1 pt-[.375rem] text-[.725rem] tracking-widest text-white">
            {/* <span className="!h-fit !self-center border !p-0"> */}
            {endpoint?.method && endpoint?.method}
            {/* </span> */}
            {deletingEndpointId === endpoint?.id && (
              <span className="ml-2 spinner">Loading...</span>
            )}
          </button>
        </div>
        <div className="hidden grow md:block">
          <span>{endpoint?.route && endpoint?.route}</span>
        </div>
      </div>
      <LazyLoad>
        <div
          className={`flex h-fit w-[2%] max-w-[2%] items-center justify-center md:hidden md:group-hover:flex`}
        >
          <DropdownOptions>
            {dropdownOptions.map((item, index) => (
              <DropdownOption
                key={index}
                icon={item.icon}
                name={item.name}
                onClick={item.action}
              />
            ))}
          </DropdownOptions>
        </div>
      </LazyLoad>

      {isModalOpen && (
        <ModalPrompt
          open={isModalOpen}
          actionHandler={handleDelete}
          closeModalFunction={closeModal}
          title={`Are you sure?`}
          message={`Are you sure you want to delete endpoint? `}
          acceptText={`Delete`}
          rejectText={`Cancel`}
        />
      )}
    </div>
  );
};

export default RouteListItem;
