import { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
import ContestsBlock from './ContestsBlock';

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

    const { data: constestData } = useAppSelector(
        (state) => state.profile.contests,
    );

    // При загрузке страницы — выставляем вкладку и подгружаем контесты
    useEffect(() => {
        dispatch(setMenuActiveProfilePage('contests'));
    }, []);

    return (
        <div className="h-full w-full relative flex flex-col text-[60px] font-bold p-[20px] gap-[20px]">
            {/* Контесты, в которых я участвую */}
            <div>
                <ContestsBlock
                    className="mb-[20px]"
                    title="Предстоящие контесты"
                    type="upcoming"
                    contests={constestData?.upcoming.items
                        .filter((v) => v.role != 'Organizer')
                        .filter((v) => v.scheduleType != 'AlwaysOpen')}
                />
            </div>

            <div>
                <ContestsBlock
                    className="mb-[20px]"
                    title="Прошедшие контесты"
                    type="past"
                    contests={[
                        ...(constestData?.past.items.filter(
                            (v) => v.role != 'Organizer',
                        ) ?? []),
                        ...(constestData?.upcoming.items
                            .filter((v) => v.role != 'Organizer')
                            .filter((v) => v.scheduleType == 'AlwaysOpen') ??
                            []),
                    ]}
                />
            </div>

            {/* Контесты, которые я создал */}
            <div>
                <ContestsBlock
                    className="mb-[20px]"
                    title="Созданные контесты"
                    type="edit"
                    contests={constestData?.mine.items}
                />
            </div>
        </div>
    );
};

export default Contests;