import { useState, FC } from 'react';
import GroupItem from './GroupItem';
import { cn } from '../../../lib/cn';
import { ChevroneDown } from '../../../assets/icons/groups';
import { Group } from '../../../redux/slices/groups';
import { GroupInvite, GroupUpdate } from './Groups';

interface GroupsBlockProps {
    groups: Group[];
    title: string;
    className?: string;
    setUpdateActive: (value: any) => void;
    setUpdateGroup: (value: GroupUpdate) => void;
    setInviteActive: (value: any) => void;
    setInviteGroup: (value: GroupInvite) => void;
    type: 'manage' | 'member';
}

const GroupsBlock: FC<GroupsBlockProps> = ({
    groups,
    title,
    className,
    setUpdateActive,
    setUpdateGroup,
    setInviteActive,
    setInviteGroup,
    type,
}) => {
    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] border-b-[1px] border-b-transparent items-center cursor-pointer 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="grid grid-cols-3 gap-[20px] pt-[20px] pb-[20px] box-border">
                        {groups.map((v, i) => (
                            <GroupItem
                                key={i}
                                id={v.id}
                                visible={true}
                                description={v.description}
                                setUpdateActive={setUpdateActive}
                                setUpdateGroup={setUpdateGroup}
                                setInviteActive={setInviteActive}
                                setInviteGroup={setInviteGroup}
                                role={'owner'}
                                name={v.name}
                                type={type}
                            />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default GroupsBlock;