import { useState, FC } from 'react';
import { cn } from '../../../../lib/cn';
import { ChevroneDown } from '../../../../assets/icons/groups';
import MyContestItem from './MyContestItem';
import RegisterContestItem from './RegisterContestItem';
import { Contest } from '../../../../redux/slices/contests';

interface ContestsBlockProps {
    contests: Contest[];
    title: string;
    className?: string;
    type?: 'my' | 'reg';
}

const ContestsBlock: FC<ContestsBlockProps> = ({
    contests,
    title,
    className,
    type = 'my',
}) => {
    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>{title}</span>
                <img
                    src={ChevroneDown}
                    className={cn(
                        'transition-all duration-300',
                        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) => {
                            return type == 'my' ? (
                                <MyContestItem
                                    key={i}
                                    id={v.id}
                                    name={v.name}
                                    startAt={v.startsAt}
                                    statusRegister={'reg'}
                                    duration={
                                        new Date(v.endsAt).getTime() -
                                        new Date(v.startsAt).getTime()
                                    }
                                    members={v.members.length}
                                    type={i % 2 ? 'second' : 'first'}
                                />
                            ) : (
                                <RegisterContestItem
                                    key={i}
                                    id={v.id}
                                    name={v.name}
                                    startAt={v.startsAt}
                                    statusRegister={'reg'}
                                    duration={
                                        new Date(v.endsAt).getTime() -
                                        new Date(v.startsAt).getTime()
                                    }
                                    members={v.members.length}
                                    type={i % 2 ? 'second' : 'first'}
                                />
                            );
                        })}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ContestsBlock;