import React, { useEffect, useRef, useState } from "react";
import "./Left_Tabs.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons";
import "swiper/css";
import "swiper/css/pagination";
import { Dropdown } from "react-bootstrap";
import Logout_Modal from "../../common-components/common_modal/logout_modal/Logout_Modal";

const Left_Tabs = (props) => {
  const [showLogoutModal, setshowLogoutModal] = useState(false);
  const [activeTab, setActiveTab] = useState(0);
  const [activeSubTab, setActiveSubTab] = useState(null);
  const [expandedTabIndex, setExpandedTabIndex] = useState(null);

  const mobile_tabs = [
    {
      tab_label: "PERSONAL INFORMATION",
    },
    {
      tab_label: "Ordered",
    },
    {
      tab_label: "Delivered",
    },
    {
      tab_label: "Return",
    },
    {
      tab_label: "Cancelled",
    },
    {
      tab_label: "MANAGE ADDRESS",
    },
    {
      tab_label: "MY WALLET",
    },
    {
      tab_label: "CHANGE PASSWORD",
    },
    {
      tab_label: "LOGOUT",
    },
  ];

  const tabs = [
    {
      tab_label: "PERSONAL INFORMATION",
    },
    {
      tab_label: "MY ORDERS",
      subTabs: ["Ordered", "Delivered", "Return", "Cancelled"],
    },
    {
      tab_label: "MANAGE ADDRESS",
    },
    {
      tab_label: "MY WALLET",
    },
    {
      tab_label: "CHANGE PASSWORD",
    },
    {
      tab_label: "LOGOUT",
    },
  ];

  useEffect(() => {
    const creditsTab = tabs.find((tab) => tab.tab_label === "MY ORDERS");
    const index = tabs.findIndex((tab) => tab.tab_label === "MY ORDERS");

    if (activeTab === index && creditsTab?.subTabs?.length > 0) {
      if (!activeSubTab || !creditsTab.subTabs.includes(activeSubTab)) {
        const defaultSubTab = creditsTab.subTabs[0];
        setActiveSubTab(defaultSubTab);
        props?.setSelectedTab(defaultSubTab);
      }
    }
  }, [activeTab]);

  const toggleExpand = (index) => {
    setExpandedTabIndex((prev) => (prev === index ? null : index));
  };

  return (
    <section className="Left_Tabs">
      <div className="desktop_sidebar">
        {tabs.map((item, index) => {
          const isMainActive = activeTab === index;
          const hasSubTabs = item.subTabs?.length > 0;
          const isExpanded = expandedTabIndex === index;

          return (
            <>
              <div
                className={`tabs_main_div ${isMainActive ? "active red_bg_div" : "blue_bg_div"}`}
                onClick={() => {
                  if (item?.tab_label === "LOGOUT") {
                    setshowLogoutModal(true);
                    return;
                  }

                  if (!hasSubTabs) {
                    setActiveTab(index);
                    setActiveSubTab(null);
                    props?.setSelectedTab(item?.tab_label);
                    setExpandedTabIndex(null);
                  } else {
                    setActiveTab(index);
                    if (expandedTabIndex === index) {
                      // Do nothing — already expanded

                      return;
                    } else {
                      setExpandedTabIndex(index);
                    }
                  }
                }}
                key={index}
              >
                <div className="text_holder">
                  <p className="tab_name">{item?.tab_label}</p>
                  {hasSubTabs && (
                    <span className="icon">
                      {isExpanded ? (
                        <FontAwesomeIcon icon={faAngleUp} />
                      ) : (
                        <FontAwesomeIcon icon={faAngleDown} />
                      )}
                    </span>
                  )}
                </div>
              </div>

              {isMainActive && hasSubTabs && (
                <div className="inner_tabs">
                  {item.subTabs.map((subTab, subIndex) => (
                    <div
                      key={subIndex}
                      className={`inner_tab ${activeSubTab === subTab ? "active-sub-tab" : "blue_bg_div"}`}
                      onClick={() => {
                        setActiveSubTab(subTab);
                        props?.setSelectedTab(subTab);
                      }}
                    >
                      {subTab}
                    </div>
                  ))}
                </div>
              )}
            </>
          );
        })}
      </div>

      <div className="mobile_div">
        <Dropdown>
          <Dropdown.Toggle
            className="tabs_main_div  active dropdown_button"
            id="tab-dropdown"
          >
            <div className="text_holder">
              <p className="tab_name">
                {mobile_tabs[activeTab]?.tab_label || "Select Tab"}
              </p>
            </div>
          </Dropdown.Toggle>

          <Dropdown.Menu>
            {mobile_tabs.map((value, index) => {
              const isMainActive = activeTab === index;

              return (
                <>
                  <Dropdown.Item>
                    <div
                      className={`tabs_main_div ${isMainActive ? "active red_bg_div" : "blue_bg_div"}`}
                      onClick={() => {
                        if (value?.tab_label === "LOGOUT") {
                          setshowLogoutModal(true);
                          return;
                        }

                        setActiveTab(index);
                        props?.setSelectedTab(value?.tab_label);
                      }}
                      key={index}
                    >
                      <div className="text_holder">
                        <p className="tab_name">{value?.tab_label}</p>
                      </div>
                    </div>
                  </Dropdown.Item>
                </>
              );
            })}
          </Dropdown.Menu>
        </Dropdown>
      </div>

      <Logout_Modal
        show={showLogoutModal}
        onHide={() => setshowLogoutModal(false)}
      />
    </section>
  );
};

export default Left_Tabs;
