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: "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: "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