import React, { useState } from "react";
import {
  ChevronUpIcon,
  ControlIcon,
  KebabIcon,
  TrashIcon,
} from "@/assets/svgs";
import { LazyLoad } from "@/components/LazyLoad";
import { GlobalContext, setGLobalProperty } from "@/context/Global";
import { workflowConfig } from "@/utils/templates/api/workflow";
import { StringCaser } from "@/utils/utils";
import { Collapser } from "@/components/Collapser";
import { WorkflowSection } from "./WorkflowSection";
import { MkdButton } from "@/components/MkdButton";
import { VariableConfig } from "../VariableConfig";

const RouteEditorMenu = ({ setCollapse, collapse, addVariable, variables }) => {
  const {
    dispatch: globalDispatch,
    state: { selectedRoute },
  } = React.useContext(GlobalContext);

  const [openVariableModal, setOpenVariableModal] = useState(false);

  return (
    <>
      <div
        className={`${
          collapse ? "flex h-5 w-5" : "h-fit min-h-fit w-full"
        } relative select-none overflow-hidden rounded-md border border-primaryBlue p-5 shadow-md shadow-primaryBlue`}
      >
        <ChevronUpIcon
          title={`${collapse ? "Expand Menu" : "Collpase Menu"}`}
          onClick={() => setCollapse((prev) => !prev)}
          className={`${
            collapse ? "absolute inset-0 m-auto -rotate-90" : "rotate-90"
          } cursor-pointer`}
        />
        <div className={`${collapse ? "hidden" : "block"}`}>
          <LazyLoad>
            <WorkflowSection section="Control Flow" />
            <WorkflowSection section="Actions" />
            <WorkflowSection section="Responses" />
          </LazyLoad>
        </div>
      </div>

      {/* <VariableConfig
        isOpen={openVariableModal}
        modalClose={() => setOpenVariableModal(false)}
        addVariable={addVariable}
        variables={variables}
      /> */}
    </>
  );
};

export default RouteEditorMenu;
