import { useEffect, useState } from 'react';
import { SecondaryButton } from '../../../components/button/SecondaryButton';
import { cn } from '../../../lib/cn';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import ContestsBlock from './ContestsBlock';
import {
    setContestsNameFilter,
    setMenuActivePage,
} from '../../../redux/slices/store';
import {
    fetchContests,
    fetchMyContests,
    fetchParticipatingContests,
} from '../../../redux/slices/contests';
import ModalCreateContest from './ModalCreate';
import Filters from './Filter';

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

    const [modalActive, setModalActive] = useState<boolean>(false);

    const { contests, status } = useAppSelector(
        (state) => state.contests.fetchContests,
    );

    const nameFilter = useAppSelector(
        (state) => state.store.contests.filterName,
    );

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

    return (
        <div className="h-full w-[calc(100%+250px)] box-border p-[20px] pt-[20p]">
            <div className="h-full box-border">
                <div className="relative flex items-center mb-[20px]">
                    <div
                        className={cn(
                            'h-[50px] text-[40px] font-bold text-liquid-white flex items-center',
                        )}
                    >
                        Контесты
                    </div>
                    <SecondaryButton
                        onClick={() => {
                            setModalActive(true);
                        }}
                        text="Создать контест"
                        className="absolute right-0"
                    />
                </div>

                <Filters
                    onChangeName={(v: string) => {
                        dispatch(setContestsNameFilter(v));
                    }}
                />
                {status == 'loading' && (
                    <div className="text-liquid-white p-4">
                        Загрузка контестов...
                    </div>
                )}
                {status == 'successful' && (
                    <>
                        <ContestsBlock
                            className="mb-[20px]"
                            title="Текущие"
                            contests={contests
                                .filter((v) =>
                                    v.name
                                        .toLocaleLowerCase()
                                        .includes(
                                            nameFilter.toLocaleLowerCase(),
                                        ),
                                )
                                .filter((c) => c.scheduleType != 'AlwaysOpen')}
                            type="upcoming"
                        />

                        <ContestsBlock
                            className="mb-[20px]"
                            title="Постоянные"
                            contests={contests
                                .filter((v) =>
                                    v.name
                                        .toLocaleLowerCase()
                                        .includes(
                                            nameFilter.toLocaleLowerCase(),
                                        ),
                                )
                                .filter((c) => c.scheduleType == 'AlwaysOpen')}
                            type="past"
                        />
                    </>
                )}
            </div>

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

export default Contests;