import React, { useState, useEffect } from "react";

import ApiIcon from '@mui/icons-material/Api';
import AnalyticsIcon from '@mui/icons-material/Analytics';
import AttributionIcon from '@mui/icons-material/Attribution';
import SpaIcon from '@mui/icons-material/Spa';
import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
import PostAddIcon from '@mui/icons-material/PostAdd';
import MarkUnreadChatAltIcon from '@mui/icons-material/MarkUnreadChatAlt';
import PermMediaIcon from '@mui/icons-material/PermMedia';
import ProductionQuantityLimitsIcon from '@mui/icons-material/ProductionQuantityLimits';
import SecurityIcon from '@mui/icons-material/Security';
import ErrorIcon from '@mui/icons-material/Error';
import IntegrationInstructionsIcon from '@mui/icons-material/IntegrationInstructions';
import SettingsPowerIcon from '@mui/icons-material/SettingsPower';
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
import EngineeringIcon from '@mui/icons-material/Engineering';
import BrandingWatermarkIcon from '@mui/icons-material/BrandingWatermark';
import MenuIcon from '@mui/icons-material/Menu';
import WidgetsIcon from '@mui/icons-material/Widgets';
import Author from "../Components/Author/Author";
import Sitesecurity from "../Components/Security/Security";
import Site from "../Components/Site/Site";
import WooCommerce from "../Components/WooCommerce/WooCommerce";
import Debugger from "../Components/Debugger/Debugger";
import Maintenance from "../Components/Maintenance/Maintenance";
import Emengency from "../Components/Emengency/Emengency";
import API from "../Components/Api/Api";
import PageNPost from "../Components/PageNPost/PageNPost";
import Media from "../Components/Media/Media";
import Theme from "../Components/Theme/Theme";
import Captcha from "../Components/Captcha/Captcha";
import wpazleen from '../../assets/icons/support/logo.png'
import Integration from "../Components/Integration/Integration";
import Downtimealerts from "../Components/Downtimealerts/Downtimealerts";
import Menu from "../Components/Menu/Menu";
import Wpwidgets from "../Components/Wpwidgets/Wpwidgets";
import Comment from "../Components/Comment/Comment";
import Analytics from "../Components/Analytics/Analytics";
import { getNonce, getNoticeData } from '../Helpers';

import "./setting.scss";

const Setting = () => {
  // Set "api" as the initial active tab
  const [globalsettings, setGlobalsettings] = useState(getNoticeData());
  const [activeTab, setActiveTab] = useState("api");

  // Retrieve the active tab from localStorage on component mount
  useEffect(() => {
    const storedTab = localStorage.getItem("wpnts_activeTab");
    if (storedTab) {
      setActiveTab(storedTab);
    }
  }, []);

  // Save the active tab to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem("wpnts_activeTab", activeTab);
  }, [activeTab]);


  const setActiveTabHandler = (key) => {
    setActiveTab(key);
  };


  const addContact = async e => {
    // setModalOpen(true)
    window.open('https://wpazleen.com/notifier-to-slack/', '_blank');
  }

  const fetchData = () => {
    wp.ajax.send('notice_settings', {
      data: {
        nonce: getNonce(),
      },
      success(response) {
        setGlobalsettings(response.notice_settings);
      },
      error(error) {
        console.error(error);
      },
    });
  };
  useEffect(() => {
    fetchData();

    const intervalId = setInterval(fetchData, 7000);
    return () => clearInterval(intervalId);

  }, [activeTab]);

  // Cleanup on component unmount
  useEffect(() => {
    return () => {
      // Clear any pending timeouts or intervals
      const highestTimeoutId = setTimeout(() => {}, 0);
      for (let i = 0; i < highestTimeoutId; i++) {
        clearTimeout(i);
      }
    };
  }, []);


  const renderTabContent = () => {
    switch (activeTab) {
      case "api":
        return <API noticeSettings={globalsettings} />;
      case "author":
        return <Author noticeSettings={globalsettings} />;
      case "theme":
        return <Theme noticeSettings={globalsettings} />;
      case "site":
        return <Site noticeSettings={globalsettings} />;
      case "sitesecurity":
        return <Sitesecurity noticeSettings={globalsettings} />;
      case "page":
        return <PageNPost noticeSettings={globalsettings} />;
      case "comment":
        return <Comment noticeSettings={globalsettings} />;
      case "media":
        return <Media noticeSettings={globalsettings} />;
      case "woocommerce":
        return <WooCommerce noticeSettings={globalsettings} />;
      case "menu":
        return <Menu noticeSettings={globalsettings} />;
      case "wpwidgets":
        return <Wpwidgets noticeSettings={globalsettings} />;
      case "debugger":
        return <Debugger />;
      case "maintenance":
        return <Maintenance noticeSettings={globalsettings} />;
      case "captcha":
        return <Captcha />;
      case "emengency":
        return <Emengency />;
      case "downtimealerts":
        return <Downtimealerts noticeSettings={globalsettings} />;
      case "integration":
        return <Integration onVisitTab={setActiveTabHandler} />;
      case "analytics":
        return <Analytics noticeSettings={globalsettings} />;
      default:
        return null;
    }
  };

  return (
    <div className="acb_settings_page" id="acb_settings">

      <div className="acb_top">
        <img className="wpnts_logo_footer" src={wpazleen} alt="staff" onClick={addContact} />
        <div className="getsupport">
          <h3>⚙️ Configuration</h3>
        </div>

      </div>

      <div className="acb_mails_container sidebar-settings">
        <div className="acb_sidebar">
          <div className="acb_sidebar-tabs">

            <div
              className={`tab ${activeTab === "api" && "active"} tabarea`}
              onClick={() => setActiveTab("api")}
            >
              <ApiIcon className="tab-icon" /> API & Configuration
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "analytics" && "active"} tabarea`}
              onClick={() => setActiveTab("analytics")}
            >
              <AnalyticsIcon className="tab-icon" /> Analytics
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "author" && "active"}  tabarea`}
              onClick={() => setActiveTab("author")}
            >
              <AttributionIcon className="tab-icon" /> Author
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "woocommerce" && "active"}  tabarea`}
              onClick={() => setActiveTab("woocommerce")}
            >
              <ProductionQuantityLimitsIcon className="tab-icon" />WooCommerce
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "site" && "active"}  tabarea`}
              onClick={() => setActiveTab("site")}
            >
              <SupervisedUserCircleIcon className="tab-icon" />User activity
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "sitesecurity" && "active"}  tabarea`}
              onClick={() => setActiveTab("sitesecurity")}
            >
              <SecurityIcon className="tab-icon" />Advance Site Security
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "captcha" && "active"}  tabarea`}
              onClick={() => setActiveTab("captcha")}
            >
              <VerifiedUserIcon className="tab-icon" />Cloudflare Turnstile
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "maintenance" && "active"}  tabarea`}
              onClick={() => setActiveTab("maintenance")}
            >
              <EngineeringIcon className="tab-icon" />Maintenance Mode
            </div>

            <div
              className={`tab ${activeTab === "theme" && "active"}  tabarea`}
              onClick={() => setActiveTab("theme")}
            >
              <SpaIcon className="tab-icon" />Theme
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "page" && "active"}  tabarea`}
              onClick={() => setActiveTab("page")}
            >
              <PostAddIcon className="tab-icon" />Page & Post
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "comment" && "active"}  tabarea`}
              onClick={() => setActiveTab("comment")}
            >
              <MarkUnreadChatAltIcon className="tab-icon" />Comment
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "media" && "active"}  tabarea`}
              onClick={() => setActiveTab("media")}
            >
              <PermMediaIcon className="tab-icon" />Media & Mail
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "menu" && "active"}  tabarea`}
              onClick={() => setActiveTab("menu")}
            >
              <MenuIcon className="tab-icon" />Menu
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "wpwidgets" && "active"}  tabarea`}
              onClick={() => setActiveTab("wpwidgets")}
            >
              <WidgetsIcon className="tab-icon" />Widgets
              {/* <p className="NEW_TAG">New</p> */}
            </div>


            <div
              className={`tab ${activeTab === "emengency" && "active"}  tabarea`}
              onClick={() => setActiveTab("emengency")}
            >
              <SettingsPowerIcon className="tab-icon" />Emengency Shutdown
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "debugger" && "active"}  tabarea`}
              onClick={() => setActiveTab("debugger")}
            >
              <BrandingWatermarkIcon className="tab-icon" />Error Log
              {/* <p className="NEW_TAG">New</p> */}
            </div>

            <div
              className={`tab ${activeTab === "downtimealerts" && "active"} tabarea`}
              onClick={() => setActiveTab("downtimealerts")}
            >
              <ErrorIcon className="tab-icon" />Site Cron & Errors
              {/* <p className="NEW_TAG">New</p> */}
            </div>



            <div
              className={`tab ${activeTab === "integration" && "active"}  tabarea`}
              onClick={() => setActiveTab("integration")}
            >
              <IntegrationInstructionsIcon className="tab-icon" />Integration
              {/* <p className="NEW_TAG">New</p> */}
            </div>

          </div>
        </div>

        {/* Tab Content */}
        <div className="acb_content_container">{renderTabContent()}</div>

      </div>
    </div>
  );
}

export default Setting;