import React, { useState } from "react";

import { LazyLoad } from "@/components/LazyLoad";
import { GlobalContext, setGLobalProperty } from "@/context/Global";

import { ScaleModalOverlay } from "@/components/ScaleModalOverlay";
import { RouteValidationConfig } from "../RouteValidationConfig";
import { RouteGeneralConfig } from "../RouteGeneralConfig";
import { RouteAuthenticationConfig } from "../RouteAuthenticationConfig";
import { APIRouteConfigTabs } from "@/utils/constants";
import { MkdTabContainer } from "@/components/MkdTabContainer";
import { MkdButton } from "@/components/MkdButton";
import { ModalSidebar } from "@/components/ModalSidebar";

const RouteConfigModal = ({
  open,
  workflow,
  parentRef,
  onToggleModal,
  updateWorkflow,
  updateRouteConfig,
}) => {
  const {
    dispatch: globalDispatch,
    state: { selectedRoute, configModalOpen },
  } = React.useContext(GlobalContext);

  return (
    <ModalSidebar
      isModalActive={open}
      customMinWidthInTw="min-w-[50%] max-w-[50%] w-[50%]"
      closeModalFn={() => onToggleModal(false)}
    >
      <div className="flex h-full min-h-full w-full flex-col items-start justify-start">
        <LazyLoad>
          <div className="flex w-full grow flex-col">
            <MkdTabContainer tabs={Object.keys(APIRouteConfigTabs)}>
              <RouteGeneralConfig
                componentId={0}
                workflow={workflow}
                onToggleModal={onToggleModal}
                updateRouteConfig={updateRouteConfig}
              />

              <RouteAuthenticationConfig
                componentId={1}
                workflow={workflow}
                onToggleModal={onToggleModal}
                updateRouteConfig={updateRouteConfig}
              />

              <RouteValidationConfig
                componentId={2}
                workflow={workflow}
                onToggleModal={onToggleModal}
                updateRouteConfig={updateRouteConfig}
              />
            </MkdTabContainer>
          </div>
        </LazyLoad>
      </div>
    </ModalSidebar>
  );
};

export default RouteConfigModal;
