import { React, useState, useRef, useEffect } from "react";
import MenuItems from "./MenuItems.jsx";
import GettingStartedContent from "./GettingStartedContent.jsx";
import ConfigurationContent from "./ConfigurationContent.jsx";
import ElementsContent from "./ElementsContent.jsx";
import GoProContent from "./GoProContent.jsx";
import PluginsPromo from "./PluginsPromo.jsx";
import IntegrationContent from "./IntegrationContent.jsx";
import ModalContent from "./ModalContent.jsx";

function App() {
  let eaelQuickSetup = localize.eael_quick_setup_data;
  let is_tracking_allowed = eaelQuickSetup?.getting_started_content?.is_tracking_allowed;
  let currentTabValue = ! is_tracking_allowed ? 'getting-started' : 'configuration';
  let hasPluginPromo = Object.keys(eaelQuickSetup?.plugins_content?.plugins).length;

  const [activeTab, setActiveTab] = useState(currentTabValue);
  const [modalTarget, setModalTarget] = useState("");
  const [showElements, setShowElements] = useState(0);
  const [emailAddress, setEmailAddress] = useState(is_tracking_allowed);
  const [disableSwitches, setDisableSwitches] = useState(false);
  const [selectedPreference, setSelectedPreference] = useState("basic");
  const [checkedElements, setCheckedElements] = useState({});

  // Initialize checkedElements with basic elements on component mount
  useEffect(() => {
    const elements_content = eaelQuickSetup?.elements_content;
    const elements_list = elements_content?.elements_list;

    if (elements_list) {
      const initialCheckedState = {};
      Object.entries(elements_list).forEach(([category, categoryData]) => {
        categoryData.elements.forEach(element => {
          initialCheckedState[element.key] = element.preferences === "basic";
        });
      });
      setCheckedElements(initialCheckedState);
    }
  }, []); // Empty dependency array means this runs once on mount

  const handleTabChange = (event) => {
    setActiveTab(event.currentTarget.getAttribute("data-next"));

    if (event.currentTarget.classList.contains("eael-user-email-address")) {
      setEmailAddress("1");
      document.getElementById("eael_user_email_address").value = 1;
      saveWPIns();
    }
  };

  const handlePreferenceChange = (event) => {
    const newPreference = event.target.value;
    setSelectedPreference(newPreference);

    // Get all elements from the elements list
    const elements_content = eaelQuickSetup?.elements_content;
    const elements_list = elements_content?.elements_list;

    if (newPreference === "custom") {
      // For custom, don't auto-check anything
      setCheckedElements({});
    } else {
      // For basic or advance, check elements with matching preferences
      const newCheckedState = {};
      Object.entries(elements_list).forEach(([category, categoryData]) => {
        categoryData.elements.forEach(element => {
          newCheckedState[element.key] = element.preferences === newPreference;
        });
      });
      setCheckedElements(newCheckedState);
    }
  };

  const handleElementCheck = (elementKey, isChecked) => {
    setCheckedElements(prev => ({
      ...prev,
      [elementKey]: isChecked
    }));
  };

  const saveWPIns = async (event) => {
    let fields = new FormData(
      document.querySelector("form.eael-setup-wizard-form")
    );

    fields = new URLSearchParams(fields).toString();

    try {
      const response = await fetch(localize.ajaxurl, {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams({
          action: "enable_wpins_process",
          security: localize.nonce,
          fields: fields,
        }),
      });

      const result = await response.json();

      if (result.success) {
      } else {
      }
    } catch (error) {}
  };

  const handleModalChange = (event) => {
    setModalTarget(event.currentTarget.getAttribute("data-target"));
  };

  const closeModal = () => {
    setModalTarget("");
  };

  const handleShowElements = (event) => {
    setShowElements(1);
  };

  const handleIntegrationSwitch = async (event, plugin, isTemplately = 0, setTemplatelyPlugin = '') => {
    setDisableSwitches(true);
    const isChecked = event.target.checked ?? 0;

    const isActionInstall = event.target.getAttribute("data-local_plugin_data") === "false";

    const action = isActionInstall
      ? "install"
      : isChecked
      ? "activate"
      : "deactivate";
    const identifier = isActionInstall ? plugin?.slug : plugin?.basename;

    let requestData = {
      action: `wpdeveloper_${action}_plugin`,
      security: localize.nonce,
    };
    requestData[isActionInstall ? "slug" : "basename"] = identifier;

    let label = '';
    let dataNext = '';

    if ( isTemplately ) {
        requestData['action'] = 'wpdeveloper_install_plugin';
        requestData['slug'] = plugin?.slug;
        requestData['promotype'] = 'quick-setup';
        label = event.currentTarget;
        dataNext = event.currentTarget.getAttribute("data-next");
        if ( plugin?.local_plugin_data ) {
          setActiveTab(dataNext);
          return;
        }
    } else {
      label = event.target
      .closest(".eael-integration-footer")
      .querySelector(".toggle-label")
    }

    if (label) {
      label.textContent = "Processing...";

      try {
        const response = await fetch(localize.ajaxurl, {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: new URLSearchParams(requestData).toString(),
        });

        const result = await response.json();

        if (result.success) {
          if( isTemplately ) {
            label.textContent = 'Next';
            setActiveTab(dataNext);

            setTemplatelyPlugin((prevPlugin) => {
              return {
                ...prevPlugin,
                local_plugin_data: true,
              };
            });

          } else {
            label.textContent = isChecked ? "Deactivate" : "Activate";
          }

          if (isActionInstall) {
            setPluginList((prevList) =>
              prevList.map((p) =>
                p.slug === plugin.slug ? { ...p, local_plugin_data: true } : p
              )
            );
          }

        } else {
          if( isTemplately ) {
            setActiveTab(dataNext);
          } else {
            label.textContent = isChecked ? "Activate" : "Deactivate";
          }
        }
      } catch (error) {
        // if( isTemplately ) {
        //   setActiveTab(dataNext);
        // } else {
        //   label.textContent = isChecked ? "Activate" : "Deactivate";
        // }
      }
    }

    setDisableSwitches(false);
  };

  return (
    <>
      <section className="eael-onboard-main-wrapper eael-quick-setup-wizard-wrapper">
        <form
          className="eael-setup-wizard-form eael-quick-setup-wizard-form"
          method="post"
        >
          <div className="eael-menu-items">
            <MenuItems
              activeTab={activeTab}
              handleTabChange={handleTabChange}
            />
          </div>

          {!is_tracking_allowed && (
            <div
              className={`eael-setup-content eael-getting-started-content ${
                activeTab == "getting-started" ? "" : "eael-d-none"
              }`}
            >
              <GettingStartedContent
                activeTab={activeTab}
                handleTabChange={handleTabChange}
                modalTarget={modalTarget}
                handleModalChange={handleModalChange}
                closeModal={closeModal}
                emailAddress={emailAddress}
              />
            </div>
          )}

          <div
            className={`eael-setup-content eael-configuration-content ${
              activeTab === "configuration" ? "" : "eael-d-none"
            }`}
          >
            <ConfigurationContent
              activeTab={activeTab}
              handleTabChange={handleTabChange}
              isTrackingAllowed={is_tracking_allowed}
              selectedPreference={selectedPreference}
              handlePreferenceChange={handlePreferenceChange}
            />
          </div>

          <div
            className={`eael-setup-content eael-elements-content ${
              activeTab === "elements" ? "" : "eael-d-none"
            }`}
          >
            <ElementsContent
              activeTab={activeTab}
              handleTabChange={handleTabChange}
              showElements={showElements}
              handleShowElements={handleShowElements}
              selectedPreference={selectedPreference}
              checkedElements={checkedElements}
              handleElementCheck={handleElementCheck}
            />
          </div>

          <div
            className={`eael-setup-content eael-go-pro-content ${
              activeTab === "go-pro" ? "" : "eael-d-none"
            }`}
          >
            <GoProContent
              activeTab={activeTab}
              handleTabChange={handleTabChange}
            />
          </div>

          { hasPluginPromo ?
          <div
            className={`eael-setup-content eael-plugins-promo-content ${
              activeTab === "pluginspromo" ? "" : "eael-d-none"
            }`}
          >
            <PluginsPromo
              activeTab={activeTab}
              handleTabChange={handleTabChange}
            />
          </div>
          : '' }

          <div
            className={`eael-setup-content eael-integrations-content ${
              activeTab === "integrations" ? "" : "eael-d-none"
            }`}
          >
            <IntegrationContent
              activeTab={activeTab}
              handleTabChange={handleTabChange}
              modalTarget={modalTarget}
              handleModalChange={handleModalChange}
              closeModal={closeModal}
              handleIntegrationSwitch={handleIntegrationSwitch}
              disableSwitches={disableSwitches}
            />
          </div>

          {modalTarget === "modal" && (
            <div className="eael-modal-content">
              <ModalContent
                activeTab={activeTab}
                handleTabChange={handleTabChange}
                modalTarget={modalTarget}
                handleModalChange={handleModalChange}
                closeModal={closeModal}
              />
            </div>
          )}
        </form>
      </section>
    </>
  );
}

export default App;