import { Openbook, Cup, Clipboard } from '../../../assets/icons/menu';

import React from 'react';
import { Link } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import {
    setMenuActivePage,
    setMenuActiveProfilePage,
} from '../../../redux/slices/store';

interface MenuItemProps {
    icon: string;
    text: string;
    href: string;
    page: string;
    profilePage: string;
    active?: boolean;
}

const MenuItem: React.FC<MenuItemProps> = ({
    icon,
    text = '',
    href = '',
    active = false,
    page = '',
    profilePage = '',
}) => {
    const dispatch = useAppDispatch();

    return (
        <Link
            to={href}
            className={`
        flex items-center gap-3 p-[16px] rounded-[10px] h-[40px] text-[18px] font-bold 
        transition-all duration-300 text-liquid-white
        active:scale-95 hover:bg-liquid-lighter hover:ring-[1px] hover:ring-liquid-light hover:ring-inset
        ${active && 'bg-liquid-lighter '}
      `}
            onClick={() => {
                dispatch(setMenuActivePage(page));
                dispatch(setMenuActiveProfilePage(profilePage));
            }}
        >
            <img src={icon} />
            <span>{text}</span>
        </Link>
    );
};

const AccountMenu = () => {
    const menuItems = [
        {
            text: 'Задачи',
            href: '/home/account/missions',
            icon: Clipboard,
            page: 'account',
            profilePage: 'missions',
        },
        {
            text: 'Статьи',
            href: '/home/account/articles',
            icon: Openbook,
            page: 'account',
            profilePage: 'articles',
        },
        {
            text: 'Контесты',
            href: '/home/account/contests',
            icon: Cup,
            page: 'account',
            profilePage: 'contests',
        },
    ];

    const activeProfilePage = useAppSelector(
        (state) => state.store.menu.activeProfilePage,
    );

    return (
        <div className="h-full w-full relative  flex p-[20px] gap-[10px]">
            {menuItems.map((v, i) => (
                <MenuItem
                    {...v}
                    key={i}
                    active={activeProfilePage == v.profilePage}
                />
            ))}
        </div>
    );
};

export default AccountMenu;