import { PrimaryButton } from '../../../components/button/PrimaryButton';
import { ReverseButton } from '../../../components/button/ReverseButton';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { logout } from '../../../redux/slices/auth';
import { OpenBook, Clipboard, Cup } from '../../../assets/icons/account';
import { FC } from 'react';

interface StatisticItemProps {
    icon: string;
    title: string;
    count?: number;
    countLastWeek?: number;
}
const StatisticItem: FC<StatisticItemProps> = ({
    title,
    icon,
    count = 0,
    countLastWeek = 0,
}) => {
    return (
        <div className="h-[53px] grid grid-cols-[36px,1fr] gap-[20px] text-liquid-white">
            <img src={icon} />
            <div className="h-full flex flex-col justify-between">
                <div className="flex gap-[20px] text-[18px] font-bold leading-[23px]">
                    <div>{title}</div>
                    <div>{count}</div>
                </div>
                <div className="text-[16px] font-medium leading-[20px]">
                    {'За  7 дней '}
                    <span className="text-liquid-light">{countLastWeek}</span>
                </div>
            </div>
        </div>
    );
};

const RightPanel = () => {
    const dispatch = useAppDispatch();
    const name = useAppSelector((state) => state.auth.username);
    const email = useAppSelector((state) => state.auth.email);
    return (
        <div className="h-full w-full relative flex flex-col p-[20px] pt-[35px] gap-[20px]">
            <div className="grid grid-cols-[150px,1fr] h-[150px] gap-[20px]">
                <div className="-hfull w-full bg-[#B8B8B8] rounded-[10px]"></div>
                <div className=" relative">
                    <div className="text-liquid-white text-[24px] leading-[30px] font-bold">
                        {name}
                    </div>
                    <div className="text-liquid-light text-[18px] leading-[23px] font-medium">
                        {email}
                    </div>
                    <div className=" absolute bottom-0 text-liquid-light text-[24px] leading-[30px] font-bold">
                        Топ 50%
                    </div>
                </div>
            </div>

            <PrimaryButton
                onClick={() => {}}
                text="Редактировать"
                className="w-full"
            />

            <div className="h-[1px] w-full bg-liquid-lighter"></div>

            <div className="text-liquid-white text-[24px] leading-[30px] font-bold">
                {'Статистика решений'}
            </div>

            <StatisticItem
                icon={Clipboard}
                title={'Задачи'}
                count={14}
                countLastWeek={5}
            />
            <StatisticItem
                icon={Cup}
                title={'Контесты'}
                count={8}
                countLastWeek={2}
            />

            <div className="text-liquid-white text-[24px] leading-[30px] font-bold">
                {'Статистика созданий'}
            </div>

            <StatisticItem
                icon={Clipboard}
                title={'Задачи'}
                count={4}
                countLastWeek={2}
            />
            <StatisticItem
                icon={OpenBook}
                title={'Статьи'}
                count={12}
                countLastWeek={4}
            />
            <StatisticItem
                icon={Cup}
                title={'Контесты'}
                count={2}
                countLastWeek={0}
            />

            <ReverseButton
                className="absolute bottom-[20px] right-[20px]"
                onClick={() => {
                    dispatch(logout());
                }}
                text="Выход"
                color="error"
            />
        </div>
    );
};

export default RightPanel;