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 { useNavigate } from "react-router-dom";
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;