import { useState, FC } from 'react';
import { cn } from '../../../../lib/cn';
import { ChevroneDown } from '../../../../assets/icons/groups';
import { ContestItem } from '../../../../redux/slices/profile';
import PastContestItem from './PastContestItem';
import UpcoingContestItem from './UpcomingContestItem';
import EditContestItem from './EditContestItem';

interface ContestsBlockProps {
    contests?: ContestItem[];
    title: string;
    className?: string;
    type?: 'edit' | 'upcoming' | 'past';
}

const ContestsBlock: FC<ContestsBlockProps> = ({
    contests,
    title,
    className,
    type = 'edit',
}) => {
    const [active, setActive] = useState<boolean>(title != 'Скрытые');

    return (
        <div
            className={cn(
                ' border-b-[1px] border-b-liquid-lighter rounded-[10px]',
                className,
            )}
        >
            <div
                className={cn(
                    ' h-[40px] text-[24px] font-bold flex gap-[10px] items-center cursor-pointer border-b-[1px] border-b-transparent transition-all duration-300',
                    active && 'border-b-liquid-lighter',
                )}
                onClick={() => {
                    setActive(!active);
                }}
            >
                <span className=" select-none">{title}</span>
                <img
                    src={ChevroneDown}
                    className={cn(
                        'transition-all duration-300 select-none',
                        active && 'rotate-180',
                    )}
                />
            </div>
            <div
                className={cn(
                    ' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300',
                    active && 'grid-rows-[1fr] opacity-100',
                )}
            >
                <div className="overflow-hidden">
                    <div className="pb-[10px] pt-[20px]">
                        {contests?.map((v, i) => {
                            if (type == 'past') {
                                return (
                                    <PastContestItem
                                        key={i}
                                        {...v}
                                        type={i % 2 ? 'second' : 'first'}
                                    />
                                );
                            }

                            if (type == 'upcoming') {
                                return (
                                    <UpcoingContestItem
                                        key={i}
                                        {...v}
                                        type={i % 2 ? 'second' : 'first'}
                                    />
                                );
                            }

                            if (type == 'edit') {
                                return (
                                    <EditContestItem
                                        key={i}
                                        {...v}
                                        type={i % 2 ? 'second' : 'first'}
                                    />
                                );
                            }

                            return <></>;
                        })}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ContestsBlock;