import { useState } from "react";
import { HiOutlineHome } from "react-icons/hi";
import { IoSettingsOutline } from "react-icons/io5";
import { FaAngleDown } from "react-icons/fa6";
import { IoIosAddCircleOutline } from "react-icons/io";
import { IoPeopleOutline } from "react-icons/io5";
import { GrUserWorker } from "react-icons/gr";
import { AiOutlineDollar } from "react-icons/ai";
import { BsBoxes } from "react-icons/bs";

const Sidebar = ({ isOpen, onClose, onSectionSelect }) => {
    const [isSettingsExpanded, setIsSettingsExpanded] = useState(false);
    const [isItemsExpanded, setIsItemsExpanded] = useState(false);
    const [isCustomerExpanded, setIsCustomerExpanded] = useState(false);
    const [isEmployeeExpanded, setIsEmployeeExpanded] = useState(false);
    const [isSupplierExapanded,setIsSupplierExpanded] = useState(false);

    return (
        <aside
            className={`${
                isOpen ? "translate-x-0" : "-translate-x-full"
            } fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transition-transform duration-300 ease-in-out lg:relative lg:translate-x-0`}
        >
            <nav className="flex flex-col h-full px-4 py-6 space-y-2 overflow-y-auto cursor-pointer">
                {/* Dashboard Section */}
                <div className="text-xs font-semibold text-gray-400 uppercase mt-4 mb-2">
                    Dashboard
                </div>
                <div
                    className="flex items-center px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                    onClick={() => {
                        onSectionSelect("Dashboard");
                        onClose();
                    }}
                >
                    <div>
                        <HiOutlineHome className="w-6 h-6" />
                    </div>
                    <div className="ml-3 text-sm font-medium">Dashboard</div>
                </div>

                {/* Applications Section */}
                <div className="text-xs font-semibold text-gray-400 uppercase mt-4 mb-2">
                    Applications
                </div>
                {/* Chat Section */}
                <div
                    href="#"
                    className="flex items-center px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                    onClick={() => {
                        onSectionSelect("Purchase");
                        onClose();
                    }}
                >
                    <div>
                        <AiOutlineDollar className="w-6 h-6" />
                    </div>
                    <div className="ml-3 text-sm font-medium">Purchase</div>
                </div>
                {/*Items Section*/}
                <div
                    href="#"
                    className="flex items-center justify-between px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                    onClick={() => {
                        setIsItemsExpanded(!isItemsExpanded);
                    }}
                >
                    <div className="flex items-center">
                        <div>
                            <IoIosAddCircleOutline className="w-6 h-6" />
                        </div>
                        <div className="ml-3 text-sm font-medium">Items</div>
                    </div>
                    {/* Dropdown Icon with Animation */}
                    <FaAngleDown
                        className={`w-4 h-4 transition-transform duration-300 ${
                            isItemsExpanded ? "rotate-180" : ""
                        }`}
                    />
                </div>
                {/* Submenu Items (Conditionally Rendered) */}
                {isItemsExpanded && (
                    <div className="pl-8 space-y-1">
                        <div
                            className="flex items-center  px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                            onClick={() => {
                                onSectionSelect("AddItems");
                                onClose();
                            }}
                        >
                            <div className="ml-3 text-sm font-medium">
                                Add / Edit New Item
                            </div>
                        </div>
                        <div
                            className="flex items-center px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                            onClick={() => {
                                onSectionSelect("AddCategories");
                                onClose();
                            }}
                        >
                            <div className="ml-3 text-sm font-medium">
                                Add / Edit Categories
                            </div>
                        </div>
                    </div>
                )}

                <div
                    href="#"
                    className="flex items-center justify-between px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                    onClick={() => {
                        setIsCustomerExpanded(!isCustomerExpanded);
                    }}
                >
                    <div className="flex items-center">
                        <div>
                            <IoPeopleOutline className="w-6 h-6" />
                        </div>
                        <div className="ml-3 text-sm font-medium">Customer</div>
                    </div>
                    {/* Dropdown Icon with Animation */}
                    <FaAngleDown
                        className={`w-4 h-4 transition-transform duration-300 ${
                            isCustomerExpanded ? "rotate-180" : ""
                        }`}
                    />
                </div>
                {/* Submenu Items (Conditionally Rendered) */}
                {isCustomerExpanded && (
                    <div className="pl-8 space-y-1">
                        <div
                            className="flex items-center  px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                            onClick={() => {
                                onSectionSelect("AddCustomers");
                                onClose();
                            }}
                        >
                            <div className="ml-3 text-sm font-medium">
                                Add / Edit Customer
                            </div>
                        </div>
                        <div
                            className="flex items-center px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                            onClick={() => {
                                onSectionSelect("AddRoutes");
                                onClose();
                            }}
                        >
                            <div className="ml-3 text-sm font-medium">
                                Add / Edit Routes
                            </div>
                        </div>
                    </div>
                )}
                {/* Employee Section */}
                <div
                    href="#"
                    className="flex items-center justify-between px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                    onClick={() => {
                        setIsEmployeeExpanded(!isEmployeeExpanded);
                    }}
                >
                    <div className="flex items-center">
                        <div>
                            <GrUserWorker className="w-6 h-6" />
                        </div>
                        <div className="ml-3 text-sm font-medium">
                            Employees
                        </div>
                    </div>
                    {/* Dropdown Icon with Animation */}
                    <FaAngleDown
                        className={`w-4 h-4 transition-transform duration-300 ${
                            isEmployeeExpanded ? "rotate-180" : ""
                        }`}
                    />
                </div>
                {/* Submenu Items (Conditionally Rendered) */}
                {isEmployeeExpanded && (
                    <div className="pl-8 space-y-1">
                        <div
                            className="flex items-center  px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                            onClick={() => {
                                onSectionSelect("AddEmployees");
                                onClose();
                            }}
                        >
                            <div className="ml-3 text-sm font-medium">
                                Add / Edit Employee
                            </div>
                        </div>
                    </div>
                )}
                {/* Supplier Section */}
                <div
                    href="#"
                    className="flex items-center justify-between px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                    onClick={() => {
                        setIsSupplierExpanded(!isSupplierExapanded);
                    }}
                >
                    <div className="flex items-center">
                        <div>
                            <BsBoxes className="w-6 h-6" />
                        </div>
                        <div className="ml-3 text-sm font-medium">
                            Suppliers
                        </div>
                    </div>
                    {/* Dropdown Icon with Animation */}
                    <FaAngleDown
                        className={`w-4 h-4 transition-transform duration-300 ${
                            isSupplierExapanded ? "rotate-180" : ""
                        }`}
                    />
                </div>
                {/* Submenu Items (Conditionally Rendered) */}
                {isSupplierExapanded && (
                    <div className="pl-8 space-y-1">
                        <div
                            className="flex items-center  px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                            onClick={() => {
                                onSectionSelect("AddSuppliers");
                                onClose();
                            }}
                        >
                            <div className="ml-3 text-sm font-medium">
                                Add / Edit Suppliers
                            </div>
                        </div>
                    </div>
                )}   

                {/* Settings Section with Toggle */}
                <div className="text-xs font-semibold text-gray-400 uppercase mt-4 mb-2">
                    Settings
                </div>
                <div
                    className="flex items-center justify-between px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1 cursor-pointer"
                    onClick={() => setIsSettingsExpanded(!isSettingsExpanded)} // Toggle submenu
                >
                    <div className="flex items-center">
                        <div>
                            <IoSettingsOutline className="w-6 h-6" />
                        </div>
                        <div className="ml-3 text-sm font-medium">Settings</div>
                    </div>
                    {/* Dropdown Icon with Animation */}
                    <FaAngleDown
                        className={`w-4 h-4 transition-transform duration-300 ${
                            isSettingsExpanded ? "rotate-180" : ""
                        }`}
                    />
                </div>

                {/* Submenu Items (Conditionally Rendered) */}
                {isSettingsExpanded && (
                    <div className="pl-8 space-y-1">
                        <div
                            className="flex items-center px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                            onClick={() => {
                                onSectionSelect("SectionandLine");
                                onClose();
                            }}
                        >
                            <div className="ml-3 text-sm font-medium">
                                Add Section / Line
                            </div>
                        </div>
                        <div
                            className="flex items-center px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                            onClick={() => {
                                onSectionSelect("AddEditUsers");
                                onClose();
                            }}
                        >
                            <div className="ml-3 text-sm font-medium">
                                Add / Edit Users
                            </div>
                        </div>
                        <div
                            className="flex items-center px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                            onClick={() => {
                                onSectionSelect("VariableSettings");
                                onClose();
                            }}
                        >
                            <div className="ml-3 text-sm font-medium">
                                Change Variable Settings
                            </div>
                        </div>
                        <div
                            className="flex items-center px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition duration-200 transform hover:-translate-x-1"
                            onClick={() => {
                                onSectionSelect("BankDetailsAddEdit");
                                onClose();
                            }}
                        >
                            <div className="ml-3 text-sm font-medium">
                               Bank Details Settings
                            </div>
                        </div>
                    </div>
                )}
            </nav>
        </aside>
    );
};

export default Sidebar;
