import React, { useEffect, useState } from "react";
// import { ControlIcon, KebabIcon, TrashIcon } from "@/assets/svgs";
// import { LazyLoad } from "@/components/LazyLoad";
import { GlobalContext } from "@/context/Global";
import Toggle from "react-toggle";
import { MkdButton } from "@/components/MkdButton";
import { APIRouteConfigTabs } from "@/utils/constants";
import { MultiSelect } from "@/components/MultiSelect";
import { WireFrameBuilderContext } from "@/components/WireframeBuilder/reducers";

const RouteAuthenticationConfig = ({
  updateRouteConfig,
  workflow,
  onToggleModal,
}) => {
  const {
    dispatch: globalDispatch,
    state: { selectedRoute },
  } = React.useContext(GlobalContext);

  const { dispatch: wireframeDispatch, state: wireframeState } =
    React.useContext(WireFrameBuilderContext);

  const [protectedRoute, setProtectedRoute] = useState(false);
  const [authorizedRoles, setAuthorizedRoles] = useState([]);
  const [selectRoles, setSelectRoles] = useState(false);

  const toggleAuthorizedRoles = (checked) => {
    setSelectRoles(checked);
    if (checked) {
      return setAuthorizedRoles([]);
    }
  };

  useEffect(() => {
    setProtectedRoute(
      workflow?.configurations[APIRouteConfigTabs?.Authentication]?.protected
    );
    if (
      workflow?.configurations[APIRouteConfigTabs?.Authentication]
        ?.authorizedRoles &&
      workflow?.configurations[APIRouteConfigTabs?.Authentication]
        ?.authorizedRoles?.length
    ) {
      setAuthorizedRoles(
        workflow?.configurations[APIRouteConfigTabs?.Authentication]
          ?.authorizedRoles
      );
    }
  }, []);

  useEffect(() => {
    updateRouteConfig(
      APIRouteConfigTabs?.Authentication,
      "protected",
      protectedRoute
    );
  }, [protectedRoute]);

  useEffect(() => {
    updateRouteConfig(
      APIRouteConfigTabs?.Authentication,
      "authorizedRoles",
      authorizedRoles
    );
    if (authorizedRoles && authorizedRoles?.length && selectRoles) {
      setSelectRoles(false);
    }
    if (authorizedRoles && !authorizedRoles?.length && !selectRoles) {
      setSelectRoles(true);
    }
  }, [authorizedRoles]);

  return (
    <>
      <div className="w-full grow text-left ">
        <div className="mt-2 w-full px-4">
          <div className="w-full">
            <div className="mt-2 flex">
              <Toggle
                className="text-primaryBlue"
                // defaultChecked={}
                checked={protectedRoute}
                icons={false}
                onChange={(e) => setProtectedRoute(e.target.checked)}
              />
              <div className="self-center">
                <span className="text-regular-plus text-labelBase ml-2 transition-colors">
                  Private route{" "}
                </span>
                <span className="text-labelFaint ml-2 mt-3 place-self-end text-sm capitalize leading-none transition-colors">
                  {protectedRoute
                    ? "Authentication required"
                    : "No authentication required"}
                </span>
              </div>
            </div>
            <div className={`${protectedRoute ? "block" : "hidden"} `}>
              <div className={`mt-4 flex`}>
                <Toggle
                  className="text-primaryBlue"
                  // defaultChecked={}
                  checked={selectRoles}
                  icons={false}
                  onChange={(e) => toggleAuthorizedRoles(e.target.checked)}
                />
                <div className="self-center">
                  <span className="text-regular-plus text-labelBase ml-2 transition-colors">
                    {" "}
                    Allow all users{" "}
                  </span>
                  <span className="text-small-plus text-labelFaint ml-2 mt-3 place-self-end leading-none transition-colors">
                    {selectRoles ? "" : "Logged in user required"}
                  </span>
                </div>
              </div>

              <div className={`mt-6 ${selectRoles ? "hidden" : "block"}`}>
                <span className="text-small-plus text-labelBase transition-colors">
                  Allow only specific user groups
                </span>
                <MultiSelect
                  selected={authorizedRoles}
                  setSelected={setAuthorizedRoles}
                  showIcons={false}
                  options={wireframeState?.roles}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default RouteAuthenticationConfig;
