import { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { setMenuActivePage } from '../../../redux/slices/store';
import { Navigate, Route, Routes, useParams } from 'react-router-dom';
import { fetchContestById } from '../../../redux/slices/contests';
import ContestMissions from './Missions';

export interface Article {
    id: number;
    name: string;
    tags: string[];
}

const Contest = () => {
    const { contestId } = useParams<{ contestId: string }>();
    const contestIdNumber =
        contestId && /^\d+$/.test(contestId) ? parseInt(contestId, 10) : null;
    if (contestIdNumber === null) {
        return <Navigate to="/home/contests" replace />;
    }
    const dispatch = useAppDispatch();
    const contest = useAppSelector((state) => state.contests.selectedContest);

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

    useEffect(() => {
        dispatch(fetchContestById(contestIdNumber));
    }, [contestIdNumber]);

    return (
        <div>
            <Routes>
                <Route
                    path="*"
                    element={<ContestMissions contest={contest} />}
                />
            </Routes>
        </div>
    );
};

export default Contest;