
"use client";

import React, { useEffect, useState } from "react";
import "./Left_Tabs.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faUser,
  faBoxOpen,
  faLocationDot,
  faLock,
  faWallet,
  faRightFromBracket,
  faChevronDown,
  faChevronUp,
  faTruck,
  faCheckCircle,
  faRotateLeft,
  faXmarkCircle,
} from "@fortawesome/free-solid-svg-icons";
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 tabs = [
    {
      tab_label: "PERSONAL INFORMATION",
      short_label: "Personal Information",
      icon: faUser,
    },
    {
      tab_label: "MY ORDERS",
      short_label: "My Orders",
      icon: faBoxOpen,
      subTabs: [
        {
          label: "Ordered",
          icon: faTruck,
        },
        {
          label: "Delivered",
          icon: faCheckCircle,
        },
        {
          label: "Return",
          icon: faRotateLeft,
        },
        {
          label: "Cancelled",
          icon: faXmarkCircle,
        },
      ],
    },
    {
      tab_label: "MANAGE ADDRESS",
      short_label: "Manage Address",
      icon: faLocationDot,
    },
    {
      tab_label: "CHANGE PASSWORD",
      short_label: "Change Password",
      icon: faLock,
    },
    {
      tab_label: "WALLET",
      short_label: "Wallet",
      icon: faWallet,
    },
  ];

  const mobileTabs = [
    {
      tab_label: "PERSONAL INFORMATION",
      short_label: "Personal Information",
      icon: faUser,
    },
    {
      tab_label: "Ordered",
      short_label: "Ordered",
      icon: faTruck,
    },
    {
      tab_label: "Delivered",
      short_label: "Delivered",
      icon: faCheckCircle,
    },
    {
      tab_label: "Return",
      short_label: "Return",
      icon: faRotateLeft,
    },
    {
      tab_label: "Cancelled",
      short_label: "Cancelled",
      icon: faXmarkCircle,
    },
    {
      tab_label: "MANAGE ADDRESS",
      short_label: "Manage Address",
      icon: faLocationDot,
    },
    {
      tab_label: "CHANGE PASSWORD",
      short_label: "Change Password",
      icon: faLock,
    },
    {
      tab_label: "WALLET",
      short_label: "Wallet",
      icon: faWallet,
    },
    {
      tab_label: "LOGOUT",
      short_label: "Logout",
      icon: faRightFromBracket,
    },
  ];

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

    if (activeTab === orderIndex) {
      const orderTab = tabs[orderIndex];

      if (
        orderTab?.subTabs?.length &&
        (!activeSubTab ||
          !orderTab.subTabs.some((item) => item.label === activeSubTab))
      ) {
        const defaultSubTab = orderTab.subTabs[0].label;

        setActiveSubTab(defaultSubTab);
        props?.setSelectedTab(defaultSubTab);
      }
    }
  }, [activeTab]);

  const handleDesktopTab = (item, index) => {
    const hasSubTabs = item.subTabs?.length > 0;

    setActiveTab(index);

    if (hasSubTabs) {
      setExpandedTabIndex((prev) => (prev === index ? null : index));
      return;
    }

    setActiveSubTab(null);
    setExpandedTabIndex(null);
    props?.setSelectedTab(item.tab_label);
  };

  const handleSubTab = (subTab) => {
    setActiveSubTab(subTab.label);
    props?.setSelectedTab(subTab.label);
  };

  const handleMobileTab = (item, index) => {
    if (item.tab_label === "LOGOUT") {
      setShowLogoutModal(true);
      return;
    }

    setActiveTab(index);
    setActiveSubTab(null);
    props?.setSelectedTab(item.tab_label);
  };

  return (
    <section className="Left_Tabs">
      <div className="desktop_sidebar">
        <div className="account_sidebar">
          <div className="sidebar_heading">
            <div className="sidebar_heading_icon">
              <FontAwesomeIcon icon={faUser} />
            </div>

            <div>
              <span className="sidebar_heading_title">My Account</span>

              <span className="sidebar_heading_subtitle">
                Manage your account
              </span>
            </div>
          </div>

          <div className="sidebar_menu">
            {tabs.map((item, index) => {
              const isActive = activeTab === index;
              const hasSubTabs = item.subTabs?.length > 0;
              const isExpanded = expandedTabIndex === index;

              return (
                <div className="sidebar_group" key={item.tab_label}>
                  <div
                    className={`sidebar_item ${isActive ? "active" : ""}`}
                    onClick={() => handleDesktopTab(item, index)}
                  >
                    <div className="sidebar_item_left">
                      <span className="sidebar_icon">
                        <FontAwesomeIcon icon={item.icon} />
                      </span>

                      <span className="sidebar_text">{item.short_label}</span>
                    </div>

                    {hasSubTabs && (
                      <span className="sidebar_arrow">
                        <FontAwesomeIcon
                          icon={isExpanded ? faChevronUp : faChevronDown}
                        />
                      </span>
                    )}
                  </div>

                  {hasSubTabs && isActive && isExpanded && (
                    <div className="sidebar_submenu">
                      {item.subTabs.map((subTab) => {
                        const isSubActive = activeSubTab === subTab.label;

                        return (
                          <div
                            key={subTab.label}
                            className={`sidebar_sub_item ${
                              isSubActive ? "active" : ""
                            }`}
                            onClick={() => handleSubTab(subTab)}
                          >
                            <span className="sub_icon">
                              <FontAwesomeIcon icon={subTab.icon} />
                            </span>

                            <span className="sub_text">{subTab.label}</span>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          <div className="sidebar_logout">
            <div
              className="logout_item"
              onClick={() => setShowLogoutModal(true)}
            >
              <span className="logout_icon">
                <FontAwesomeIcon icon={faRightFromBracket} />
              </span>

              <span>Logout</span>
            </div>
          </div>
        </div>
      </div>

      <div className="mobile_div">
        <Dropdown>
          <Dropdown.Toggle
            className="mobile_account_dropdown"
            id="account-tab-dropdown"
          >
            <div className="mobile_selected">
              <span className="mobile_selected_icon">
                <FontAwesomeIcon icon={mobileTabs[activeTab]?.icon || faUser} />
              </span>

              <span className="mobile_selected_text">
                {mobileTabs[activeTab]?.short_label || "Personal Information"}
              </span>
            </div>
          </Dropdown.Toggle>

          <Dropdown.Menu>
            {mobileTabs.map((item, index) => {
              const isActive = activeTab === index;

              return (
                <Dropdown.Item
                  key={item.tab_label}
                  className="mobile_dropdown_item"
                >
                  <div
                    className={`mobile_tab_item ${isActive ? "active" : ""} ${
                      item.tab_label === "LOGOUT" ? "logout" : ""
                    }`}
                    onClick={() => handleMobileTab(item, index)}
                  >
                    <span className="mobile_tab_icon">
                      <FontAwesomeIcon icon={item.icon} />
                    </span>

                    <span>{item.short_label}</span>
                  </div>
                </Dropdown.Item>
              );
            })}
          </Dropdown.Menu>
        </Dropdown>
      </div>

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

export default Left_Tabs;
