import { useState, FC } from 'react';
import { cn } from '../../../../lib/cn';
import { ChevroneDown } from '../../../../assets/icons/groups';
import MyMissionItem from './MyMissionItem';
import { MissionItem } from '../../../../redux/slices/profile';

interface MissionsBlockProps {
    missions: MissionItem[];
    title: string;
    className?: string;
    setTastDeleteId: (v: number) => void;
    setDeleteModalActive: (v: boolean) => void;
}

const MissionsBlock: FC<MissionsBlockProps> = ({
    missions,
    title,
    className,

    setTastDeleteId,
    setDeleteModalActive,
}) => {
    const [active, setActive] = useState<boolean>(true);

    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]">
                        {missions.map((v, i) => (
                            <MyMissionItem
                                key={i}
                                id={v.missionId}
                                name={v.missionName}
                                timeLimit={v.timeLimitMilliseconds}
                                memoryLimit={v.memoryLimitBytes}
                                difficulty={v.difficultyValue}
                                type={i % 2 ? 'second' : 'first'}
                                setTastDeleteId={setTastDeleteId}
                                setDeleteModalActive={setDeleteModalActive}
                            />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MissionsBlock;