import MissionItem from './MissionItem';
import { SecondaryButton } from '../../../components/button/SecondaryButton';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { useEffect, useState } from 'react';
import { setMenuActivePage } from '../../../redux/slices/store';
import { fetchMissions } from '../../../redux/slices/missions';
import ModalCreate from './ModalCreate';

export interface Mission {
    id: number;
    authorId: number;
    name: string;
    difficulty: 'Easy' | 'Medium' | 'Hard';
    tags: string[];
    timeLimit: number;
    memoryLimit: number;
    createdAt: string;
    updatedAt: string;
}

const Missions = () => {
    const dispatch = useAppDispatch();
    const [modalActive, setModalActive] = useState<boolean>(false);

    const missions = useAppSelector((state) => state.missions.missions);

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

    return (
        <div className=" h-full w-full box-border p-[20px] pt-[20px]">
            <div className="h-full box-border">
                <div className="relative flex items-center mb-[20px]">
                    <div className="h-[50px] text-[40px] font-bold text-liquid-white flex items-center">
                        Задачи
                    </div>
                    <SecondaryButton
                        onClick={() => {
                            setModalActive(true);
                        }}
                        text="Добавить задачу"
                        className="absolute right-0"
                    />
                </div>

                <div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>

                <div>
                    {missions.map((v, i) => (
                        <MissionItem
                            key={i}
                            id={v.id}
                            authorId={v.authorId}
                            name={v.name}
                            difficulty={'Easy'}
                            tags={v.tags}
                            timeLimit={1000}
                            memoryLimit={256 * 1024 * 1024}
                            createdAt={v.createdAt}
                            updatedAt={v.updatedAt}
                            type={i % 2 == 0 ? 'first' : 'second'}
                            status={
                                i == 0 || i == 3 || i == 7
                                    ? 'success'
                                    : i == 2 || i == 4 || i == 9
                                    ? 'error'
                                    : 'empty'
                            }
                        />
                    ))}
                </div>

                <div>pages</div>
            </div>

            <ModalCreate setActive={setModalActive} active={modalActive} />
        </div>
    );
};

export default Missions;