import { cn } from "../../../lib/cn";
import { Book, UserAdd, Edit, EyeClosed, EyeOpen } from "../../../assets/icons/groups";
import { useNavigate } from "react-router-dom";
import { GroupUpdate } from "./Groups";

export interface GroupItemProps {
    id: number;
    role: "menager" | "member" | "owner" | "viewer";
    visible: boolean;
    name: string;
    description: string;
    setUpdateActive: (value: any) => void;
    setUpdateGroup: (value: GroupUpdate) => void;
}


interface IconComponentProps {
    src: string;
    onClick?: () => void;
}

const IconComponent: React.FC<IconComponentProps> = ({
    src, 
    onClick
}) => {

    return <img 
    src={src}
    onClick={(e) => {
        e.stopPropagation();
        if (onClick) 
            onClick();
        }}
    className="hover:bg-liquid-light rounded-[5px] cursor-pointer transition-all duration-300"
    />
}

const GroupItem: React.FC<GroupItemProps> = ({
    id, name, visible, role, description, setUpdateGroup, setUpdateActive
}) => {
    const navigate = useNavigate();

    return (
        <div className={cn("w-full h-[120px] box-border relative rounded-[10px] p-[10px] text-liquid-white bg-liquid-lighter cursor-pointer",
        )}
            onClick={() => navigate(`/group/${id}`)}
        >
            <div className="grid grid-cols-[100px,1fr] gap-[20px]">
                <img src={Book} className="bg-liquid-brightmain rounded-[10px]"/>
                <div className="grid grid-flow-row grid-rows-[1fr,24px]">
                    <div className="text-[18px] font-bold">
                        {name}
                    </div>
                    <div className=" flex gap-[10px]">
                        {
                            (role == "menager" || role == "owner") && <IconComponent src={UserAdd}/>
                        }
                        {
                            (role == "menager" || role == "owner") && <IconComponent src={Edit} onClick={() => {
                                
                                setUpdateGroup({id, name, description });
                                setUpdateActive(true);
                            }} />
                        }
                        {
                            visible == false && <IconComponent src={EyeOpen} />
                        }
                        {
                            visible == true && <IconComponent src={EyeClosed} />
                        }
                    </div>
                </div>
            </div>
        </div>
    );
};

export default GroupItem;