import CardD from "@/components/icons/CardD";
import LogoutD from "@/components/icons/LogoutD";
import CalndarD from "@/components/icons/CalndarD";
import MessageD from "@/components/icons/MessageD";
import ProfileD from "@/components/icons/ProfileD";
import NotificationD from "@/components/icons/NotificationD";
import { Button } from "@mui/material";
import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
import { useState } from "react";
import ModalLogout from "./ModalLogout";

function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSide }) {

    const listMenu = [
        { name: 'حساب کاربری', icon: <ProfileD active={value === 0} /> },
        { name: 'نوبت های من', icon: <CalndarD active={value === 1} /> },
        { name: 'تراکنش های من', icon: <CardD active={value === 2} /> },
        { name: 'نظرات من', icon: <MessageD active={value === 3} /> },
        { name: 'پیام ها', icon: <NotificationD active={value === 4} /> },
        { name: 'خروج', icon: <LogoutD active={value === 5} /> },
    ];

    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <ul className="flex flex-col items-start justify-start w-full">
            <ModalLogout
                open={open}
                handleClose={handleClose}
            />
            {listMenu.map((item, idx) => (
                <li
                    className="w-full"
                    key={idx}
                >
                    <Button
                        className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
                            transition-all duration-300 before:transition-all before:duration-300
                            !relative before:!absolute before:!right-0 !flex !justify-between !items-center
                            before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
                            ${value === idx ?
                                'before:md:!bg-[#5559CE]' :
                                'before:!bg-transparent'
                            }`}
                        onClick={() => {
                            setIsOpenSide(false);
                            !isTurnsDetails && setIsTurnsDetails(false);
                            if (idx === 5)
                                handleOpen()
                            else
                                setValue(idx);
                        }}
                    >
                        <div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">
                            <div className="w-[24px] h-[24px]">
                                {item.icon}
                            </div>
                            <p
                                className={`
                                text-[16px] transition-all duration-500
                                ${value === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
                            `}
                            >{item.name}</p>
                        </div>
                        <div className="flex md:hidden">
                            <ArrowLeftSideBar active={value === idx} />
                        </div>
                    </Button>
                    {listMenu.length > idx + 1 && (
                        <span className="block bg-[#EFEFEF] h-px mx-[24px] w-[calc(100%-48px)]"></span>
                    )}
                </li>
            ))}
        </ul>
    )
}

export default List