import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import {
  CodeBracketIcon,
} from "@heroicons/react/20/solid";
import { ModalPrompt } from "@/components/Modal";
import { lambdas } from "@/utils/templates/api/lambda";
import { fetchLambdaEndpoint } from "@/utils/templates/api/lambda";
import { ModalSidebar } from "@/components/ModalSidebar";
import { PlusIcon, TrashIcon } from "@/assets/svgs";
import { DropdownOptions } from "@/components/DropdownOptions";
import { DropdownOption } from "@/components/DropdownOptions/DropdownOption";

function LeftPanel({
  endpoints,
  onEndpointAdd,
  onEndpointGroupAdd,
  onEndpointDelete,
  onEndpointSelect,
  selectedEndpointIndex,
}) {
  const [showAddLambdaModal, setShowAddLambdaModal] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [deleteID, setDeleteID] = useState("");

  const handleAddLambda = (lambda) => {
    const endpoints = fetchLambdaEndpoint(lambda)?.endpoints;
    onEndpointGroupAdd([...endpoints]);
    setShowAddLambdaModal(false);
  }

  const openModal = (id) => {
    setIsModalOpen(true);
    setDeleteID(id);
  };

  const handleDelete = () => {
    onEndpointDelete(deleteID);
    setIsModalOpen(false);
  };

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

  const addPageDropdownOptions = [
    {
      name: "Add Endpoint",
      onClick: () => { onEndpointAdd() },
      icon: <PlusIcon className="mr-1 h-5 w-5 " />
    },
    {
      name: "Add Lambda",
      onClick: () => { setShowAddLambdaModal(true) },
      icon: <PlusIcon className="mr-1 h-5 w-5 " />
    }
  ];

  return (
    <div className="w-1/4">
      <div className="bg-white relative mb-3 flex items-center border-b  border-gray-300 px-8 py-2">
        <div>Endpoint/Lambda</div>
        <div className="ml-auto peer p-[4.4px] hover:bg-[#F4F4F4] rounded-md border border-[#E0E0E0] flex justify-center align-center" >
          <DropdownOptions
            icon={<PlusIcon className="text-[#8D8D8D] h-4 w-4" />}
            iconWrapperClass=""
            childrenWrapperClass="left-auto right-auto"
          >
            {
              addPageDropdownOptions.map((item, index) => (
                <DropdownOption
                  key={index}
                  icon={item.icon}
                  name={item.name}
                  onClick={item.onClick}
                />
              ))
            }
          </DropdownOptions>
        </div>
      </div>

      <ul className="flex flex-col gap-1 px-5 space-y-3">
        {endpoints.filter(e => e.type != "default").map((endpoint, index) => (
          <>
            <li
              key={endpoint.id}
              className={`relative flex items-center justify-between py-2 px-4 rounded-md border-2 text-[#8D8D8D] bg-white ${selectedEndpointIndex === endpoint.id ? "border-[#262626]" : "border-[#E0E0E0]"}`}
              onClick={() => onEndpointSelect(endpoint)}
            >
              <div className="cursor-pointer flex items-center gap-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M7.125 1.5C6.50368 1.5 6 2.00368 6 2.625V4.8295C6 5.12787 6.11853 5.41402 6.3295 5.625L8.33709 7.63258C8.7032 7.9987 9.2968 7.9987 9.66291 7.63258L11.6705 5.625C11.8815 5.41402 12 5.12787 12 4.8295V2.625C12 2.00368 11.4963 1.5 10.875 1.5H7.125Z" fill={selectedEndpointIndex === endpoint.id ? "#262626" : "#A8A8A8"} />
                  <path d="M16.5 7.125C16.5 6.50368 15.9963 6 15.375 6H13.1705C12.8721 6 12.586 6.11853 12.375 6.3295L10.3674 8.33709C10.0013 8.7032 10.0013 9.2968 10.3674 9.66291L12.375 11.6705C12.586 11.8815 12.8721 12 13.1705 12H15.375C15.9963 12 16.5 11.4963 16.5 10.875V7.125Z" fill={selectedEndpointIndex === endpoint.id ? "#262626" : "#A8A8A8"} />
                  <path d="M10.875 16.5C11.4963 16.5 12 15.9963 12 15.375V13.1705C12 12.8721 11.8815 12.586 11.6705 12.375L9.66291 10.3674C9.2968 10.0013 8.7032 10.0013 8.33709 10.3674L6.3295 12.375C6.11853 12.586 6 12.8721 6 13.1705V15.375C6 15.9963 6.50368 16.5 7.125 16.5H10.875Z" fill={selectedEndpointIndex === endpoint.id ? "#262626" : "#A8A8A8"} />
                  <path d="M1.5 10.875C1.5 11.4963 2.00368 12 2.625 12H4.8295C5.12787 12 5.41402 11.8815 5.625 11.6705L7.63258 9.66291C7.9987 9.2968 7.9987 8.7032 7.63258 8.33709L5.625 6.3295C5.41402 6.11853 5.12787 6 4.8295 6H2.625C2.00368 6 1.5 6.50368 1.5 7.125V10.875Z" fill={selectedEndpointIndex === endpoint.id ? "#262626" : "#A8A8A8"} />
                </svg>
                <span className={selectedEndpointIndex === endpoint.id ? "text-[#262626]" : "text-[#8D8D8D]"}>{endpoint.name || 'endpoint_' + index}</span>
              </div>
              <DropdownOptions>
                <DropdownOption
                  icon={<TrashIcon className="mr-1 h-5 w-5 " />}
                  name={"Delete"}
                  onClick={(event) => {
                    event.stopPropagation();
                    openModal(endpoint.id);
                  }}
                />

              </DropdownOptions>
            </li>
          </>
        ))}
      </ul>


      {showAddLambdaModal && lambdas && (
        <ModalSidebar
          isModalActive={showAddLambdaModal}
          closeModalFn={() => setShowAddLambdaModal(false)}
        >
          <div>
            <div
              className={`flex items-center justify-between gap-4 border-b border-b-[#E0E0E0] p-3`}
            >
              <div className="flex items-center gap-3">
                <svg
                  onClick={() => setShowAddLambdaModal(false)}
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                >
                  <path
                    d="M14.3322 5.83203L19.8751 11.3749C20.2656 11.7654 20.2656 12.3986 19.8751 12.7891L14.3322 18.332M19.3322 12.082H3.83218"
                    stroke="#A8A8A8"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                <span className="text-lg font-semibold">Add Lambda</span>
              </div>
              <div className="flex items-center gap-4">
                <button
                  className="flex items-center rounded-md border border-[#C6C6C6] px-3 py-2 shadow-sm hover:bg-[#f4f4f4]"
                  onClick={() => setShowAddLambdaModal(false)}
                >
                  Cancel
                </button>
                <button
                  className="flex items-center rounded-md bg-[#4F46E5] px-3 py-2 text-white shadow-sm"
                  onClick={() => setShowAddLambdaModal(false)}
                >
                  Done
                </button>
              </div>
            </div>
            <div className="grid grid-cols-3">
              {lambdas.map((lambda, index) => (
                <div
                  key={index}
                  className="cursor-pointer flex-col p-4 hover:shadow"
                  onClick={() => handleAddLambda(lambda)}
                >
                  <div className="h-20 relative pb-full flex justify-center items-center">
                    <CodeBracketIcon className='h-6 w-6' />
                  </div>
                  <div className="mt-1 text-center">
                    <p className="text-xs font-semibold uppercase">{lambda}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </ModalSidebar>
      )}
      {isModalOpen && (
        <ModalPrompt
          actionHandler={handleDelete}
          closeModalFunction={closeModal}
          title={`Are you sure?`}
          message={`Are you sure you want to delete ${endpoints.find((item => item.id === deleteID))?.name} Endpoint/Lambda?`}
          acceptText={`Delete`}
          rejectText={`Cancel`}
        />
      )}
    </div>
  );
}

LeftPanel.propTypes = {
  endpoints: PropTypes.arrayOf(PropTypes.object).isRequired,
  onEndpointAdd: PropTypes.func.isRequired,
  onEndpointDelete: PropTypes.func.isRequired,
  onEndpointSelect: PropTypes.func.isRequired,
};

export default LeftPanel;
