import { FC, useEffect, useState } from 'react';
import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
import { cn } from '../../../../lib/cn';
import MissionsBlock from './MissionsBlock';
import {
    deleteMission,
    setMissionsStatus,
} from '../../../../redux/slices/missions';
import ConfirmModal from '../../../../components/modal/ConfirmModal';

interface ItemProps {
    count: number;
    totalCount: number;
    title: string;
    color?: 'default' | 'red' | 'green' | 'orange';
}

const Item: FC<ItemProps> = ({
    count,
    totalCount,
    title,
    color = 'default',
}) => {
    return (
        <div
            className={cn(
                'flex flex-row rounded-full bg-liquid-lighter px-[16px] py-[8px] gap-[10px] text-[14px]',
                color == 'default' && 'text-liquid-light',
                color == 'red' && 'text-liquid-red',
                color == 'green' && 'text-liquid-green',
                color == 'orange' && 'text-liquid-orange',
            )}
        >
            <div>
                {count}/{totalCount}
            </div>
            <div>{title}</div>
        </div>
    );
};

const Missions = () => {
    const dispatch = useAppDispatch();

    const [modalDeleteTask, setModalDeleteTask] = useState<boolean>(false);
    const [taskdeleteId, setTaskDeleteId] = useState<number>(0);

    const { data: missionData } = useAppSelector(
        (state) => state.profile.missions,
    );

    useEffect(() => {
        dispatch(setMenuActiveProfilePage('missions'));
    }, []);

    useEffect(() => {
        dispatch(setMissionsStatus({ key: 'fetchMy', status: 'idle' }));
    }, [status]);

    return (
        <div className="h-full w-full relative overflow-y-scroll medium-scrollbar">
            <div className="w-full flex flex-col">
                <div className="p-[20px] flex flex-col gap-[20px]">
                    <div className="text-[24px] font-bold text-liquid-white">
                        Решенные задачи
                    </div>
                    <div className="flex flex-row justify-between items-start">
                        <div className="flex gap-[10px]">
                            <Item
                                count={missionData?.summary?.total?.solved ?? 0}
                                totalCount={
                                    missionData?.summary?.total?.total ?? 0
                                }
                                title={
                                    missionData?.summary?.total?.label ??
                                    'Задачи'
                                }
                            />
                        </div>
                        <div className="flex gap-[20px]">
                            {missionData?.summary?.buckets?.map((bucket) => (
                                <Item
                                    key={bucket.key}
                                    count={bucket.solved}
                                    totalCount={bucket.total}
                                    title={bucket.label}
                                    color={
                                        bucket.key === 'easy'
                                            ? 'green'
                                            : bucket.key === 'medium'
                                            ? 'orange'
                                            : 'red'
                                    }
                                />
                            ))}
                        </div>
                    </div>
                </div>
                <div className="p-[20px]">
                    <MissionsBlock
                        missions={missionData?.authored.items ?? []}
                        title="Мои миссии"
                        setTastDeleteId={setTaskDeleteId}
                        setDeleteModalActive={setModalDeleteTask}
                    />
                </div>
            </div>

            <ConfirmModal
                active={modalDeleteTask}
                setActive={setModalDeleteTask}
                title="Подтвердите действия"
                message={`Вы действительно хотите удалить задачу #${taskdeleteId}?`}
                confirmColor="error"
                confirmText="Удалить"
                onConfirmClick={() => {
                    dispatch(deleteMission(taskdeleteId));
                }}
            />
        </div>
    );
};

export default Missions;