import React, { useState } from "react";

import { useParams, useLocation, useNavigate } from "react-router-dom";
import { Views } from "@/context/Global";

import { EditWireframeTabTypes } from "@/utils/constants";
import { EditWireframeTabs } from "@/components/EditWireframeTabs";
import { LazyLoad } from "@/components/LazyLoad";
// import SkeletonLoader from "@/components/Skeleton/Skeleton";

import { ModalPrompt } from "@/components/Modal";
import { useContexts } from "@/hooks/useContexts";
import { useSDK } from "@/hooks/useSDK";

const saveRestriction = [
  // "Requirements",
  // "Model",
  // "API",
  // "Web/React",
  // "IOS",
  "Android",
  // "Deployment"
];

const EditWireframePage = () => {
  const { sdk } = useSDK();
  const { authDispatch, globalDispatch, setGlobalState } = useContexts();

  const [sow, setSow] = useState({});
  const [activeTab, setActiveTab] = useState(EditWireframeTabTypes?.API);
  const [requirementIsReady, setRequirementIsReady] = useState(false);
  const [prevConfig, setPrevConfig] = useState(null);
  const [isChanged, setIsChanged] = useState(false);
  const [openSavePrompt, setOpenSavePrompt] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();

  const params = useParams();

  React.useEffect(() => {
    globalDispatch({
      type: "SHOW_BACKBUTTON",
      payload: { showBackButton: true },
    });

    return () => {
      globalDispatch({
        type: "SHOW_BACKBUTTON",
        payload: { showBackButton: false },
      });
    };
  }, []);

  React.useEffect(() => {
    globalDispatch({
      type: "SETPATH",
      payload: {
        path: "wireframe",
      },
    });
  }, []);

  const updateUrlWithTab = (tab: string) => {
    const queryParams = new URLSearchParams(location.search);
    queryParams.set("tab", tab);
    navigate({ search: queryParams.toString() });
  };

  const handleClick = (value: string) => {
    setActiveTab(value);
    updateUrlWithTab(value);
  };

  React.useEffect(() => {
    const queryParams = new URLSearchParams(location.search);
    const tab = queryParams.get("tab");
    if (tab) {
      setActiveTab(tab);
    }
  }, [location.search]);

  React.useEffect(() => {
    if (activeTab === EditWireframeTabTypes?.API) {
      setGlobalState("view", Views.RouteList);
    }
  }, [activeTab]);

  // if (!requirementIsReady) {
  //   return <SkeletonLoader />;
  // }

  return (
    <div className="mx-auto grid h-full max-h-full min-h-full grid-rows-[auto_1fr]">
      <LazyLoad>
        <EditWireframeTabs
          activeTab={activeTab}
          handleClick={handleClick}
          filterArr={[EditWireframeTabTypes?.Requirements]}
        />
      </LazyLoad>

      <div className="">
        {activeTab === EditWireframeTabTypes.Requirements && (
          <LazyLoad counts={[1, 3, 2, 1, 2]} count={5}>
            <></>
          </LazyLoad>
        )}

        {activeTab === EditWireframeTabTypes?.API && (
          <LazyLoad counts={[1, 3, 2, 1, 2]} count={5}>
            <>
              <iframe
                src="https://resilient-fairy-1f9082.netlify.app/"
                className="h-full w-full"
                loading="lazy"
              />
            </>
          </LazyLoad>
        )}
        {/* {activeTab === EditWireframeTabTypes?.APIV2 && (
          <LazyLoad counts={[1, 3, 2, 1, 2]} count={5}>
            <NewApiTab
              wireframe={wireframeState?.wireframe}
              getWireframeConfig={getWireframeConfig}
            />wireframev5.manaknightdigital.com
          </LazyLoad>
        )} */}
        {activeTab === EditWireframeTabTypes?.Deployment && (
          <LazyLoad counts={[1, 3, 2, 1, 2]} count={5}>
            <></>
          </LazyLoad>
        )}
      </div>

      <LazyLoad>
        <ModalPrompt
          open={openSavePrompt}
          closeModalFunction={() => setOpenSavePrompt(false)}
          actionHandler={() => {
            setIsChanged(false);
            setOpenSavePrompt(false);
          }}
          title={`Unsaved Changes`}
          message={`You have unsaved changes, do you wish to skip unsaved changes?.`}
          titleClasses={`text-blue-950 text-2xl font-semibold font-['Inter']`}
          messageClasses={`text-slate-500 text-sm font-medium font-['Inter'] leading-tight`}
          acceptText="Skip"
          rejectText="OK"
        />
      </LazyLoad>
    </div>
  );
};

export default EditWireframePage;
