import React, { Fragment, useState } from 'react';
import { Avatar, Box, Text, Tooltip, Popover, ScrollArea } from '@mantine/core';
import { IconPlus, IconUserCircle, IconUsers } from '@tabler/icons-react';
import acronym from "./acronym";
import useTwColorByName from "./useTwColorByName";

const getDisplayName = (user) => {
    if (user.name) return user.name;
    const first = user.firstName || user.first_name || '';
    const last = user.lastName || user.last_name || '';
    if (first || last) return `${first} ${last}`.trim();
    if (user.email) return user.email.split('@')[0];
    return '?';
};

const UsersAvatarGroup = (props) => {
    const {
        users,
        sliceStart = 0,
        withArrow = false,
        size = 40,
        maxCount,
        onAvatarClick,
    } = props;
    const bgColor = useTwColorByName();
    const [additionalUsersOpened, setAdditionalUsersOpened] = useState(false);
    return (
        <>
            <Tooltip.Group openDelay={300} closeDelay={100}>
                <Avatar.Group spacing="sm">
                    {users && users.length > 0 ? (
                        <Fragment>
                            {users.slice(sliceStart, sliceStart + maxCount).map((user, index) => {
                                const displayName = getDisplayName(user);
                                return (
                                <Tooltip key={index} label={displayName} withArrow={withArrow}>
                                    <Box className="avatar-wrapper"
                                        onClick={() => onAvatarClick && onAvatarClick(user)}
                                    >
                                        <Avatar
                                            color={`${bgColor(displayName)["font-color"]}`}
                                            bg={`${bgColor(displayName)["bg-color"]}`}
                                            size={size} mr="-2"
                                            src={user.avatar ? user.avatar : null}
                                            className={onAvatarClick ? 'hoverable-avatar' : 'cursor-pointer'}
                                        >
                                            {user.avatar ? '' : <Text style={{ "lineHeight": "14px" }} size="xs">{acronym(displayName)}</Text>}
                                        </Avatar>
                                    </Box>
                                </Tooltip>
                                );
                            })}
                            {users.length > sliceStart + maxCount && (
                                <Popover
                                    position="bottom-end"
                                    withArrow
                                    shadow="md"
                                    offset={5}
                                    opened={additionalUsersOpened}
                                    onChange={setAdditionalUsersOpened}
                                    withinPortal={true}
                                    radius={"md"}
                                >
                                    <Popover.Target>
                                        <Box
                                            className="avatar-wrapper"
                                            onClick={() => setAdditionalUsersOpened(!additionalUsersOpened)}
                                            style={{
                                                transition: 'transform 0.2s ease, filter 0.2s ease',
                                            }}
                                            onMouseEnter={(e) => {
                                                e.currentTarget.style.transform = 'scale(1.08)';
                                                e.currentTarget.style.filter = 'brightness(0.9)';
                                            }}
                                            onMouseLeave={(e) => {
                                                e.currentTarget.style.transform = 'scale(1)';
                                                e.currentTarget.style.filter = 'brightness(1)';
                                            }}
                                        >
                                            <Avatar
                                                size={size}
                                                mr="-2"
                                                bg="#ED7D31"
                                                color="#fff"
                                                radius="xl"
                                                className="cursor-pointer font-semibold"
                                            >
                                                +{users.length - sliceStart - maxCount}
                                            </Avatar>
                                        </Box>
                                    </Popover.Target>
                                    <Popover.Dropdown p={0} style={{ overflow: 'hidden' }}>
                                        <ScrollArea
                                            style={{
                                                width: '100%',
                                                height: '320px',
                                            }}
                                            scrollbarSize={6}
                                            type="auto"
                                        >
                                            {users.map((user, index) => {
                                                const projectRole = user.project_role;
                                                const dn = getDisplayName(user);
                                                return (
                                                    <div
                                                        key={index}
                                                        className="flex items-center gap-3 py-3 px-3 border-b border-solid border-gray-200 hover:bg-gray-50 transition cursor-pointer"
                                                        style={{ minWidth: '400px' }}
                                                        onClick={() => {
                                                            onAvatarClick && onAvatarClick(user);
                                                            setAdditionalUsersOpened(false);
                                                        }}
                                                    >
                                                        <Avatar
                                                            color={`${bgColor(dn)["font-color"]}`}
                                                            bg={`${bgColor(dn)["bg-color"]}`}
                                                            size={40}
                                                            src={user.avatar ? user.avatar : null}
                                                            radius="xl"
                                                            style={{ flexShrink: 0 }}
                                                        >
                                                            {user.avatar ? '' : <Text style={{ "lineHeight": "14px" }} size="xs">{acronym(dn)}</Text>}
                                                        </Avatar>
                                                        <div className="mls-ne ml-2 w-full">
                                                            <Text size="sm" fw={700} c="#202020" lineClamp={1}>{dn}</Text>
                                                            <Text size="xs" fw={400} c="#202020" lineClamp={1}>{user.email}</Text>
                                                            {projectRole && (
                                                                <Text size="xs" fw={400} c="#555" bg={"#f4f4f4"} style={{ display: "inline-block" }}>{projectRole.name}</Text>
                                                            )}
                                                        </div>
                                                    </div>
                                                );
                                            })}
                                        </ScrollArea>
                                    </Popover.Dropdown>
                                </Popover>
                            )}
                        </Fragment>
                    )
                        :
                        (
                            ''
                            // <IconUserCircle color="#4d4d4d" size={size} />
                        )
                    }

                </Avatar.Group>
            </Tooltip.Group>
        </>

    );
}

export default UsersAvatarGroup;