import styled from "styled-components";

import { Modal } from "@revoltchat/ui";

import UserIcon from "../../../components/common/user/UserIcon";
import { Username } from "../../../components/common/user/UserShort";
import { RenderEmoji } from "../../../components/markdown/plugins/emoji";
import { useClient } from "../../client/ClientController";
import { modalController } from "../ModalController";
import { ModalProps } from "../types";

const List = styled.div`
    max-width: 100%;
    max-height: 360px;
    overflow-y: auto;
`;

const UserRow = styled.div`
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    cursor: pointer;
    border-radius: var(--border-radius);

    &:hover {
        background: var(--secondary-background);
    }
`;

const Header = styled.div`
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1em;

    img {
        width: 1.5em;
        height: 1.5em;
        object-fit: contain;
    }
`;

export default function ReactionUsers({
    emoji,
    userIds,
    onClose,
    ...props
}: ModalProps<"reaction_users">) {
    const client = useClient();

    const openProfile = (userId: string) => {
        onClose();
        modalController.push({ type: "user_profile", user_id: userId });
    };

    // Modal must be nonDismissable, it conflicts with the message context menu otherwise.
    return (
        <Modal
            {...props}
            nonDismissable
            title={
                <Header>
                    <RenderEmoji match={emoji} />
                    <span>{userIds.length}</span>
                </Header>
            }
            actions={[
                {
                    onClick: () => {
                        onClose();
                        return true;
                    },
                    children: "Close",
                },
            ]}>
            <List>
                {userIds.map((userId) => {
                    const user = client.users.get(userId);
                    return (
                        <UserRow
                            key={userId}
                            onClick={() => openProfile(userId)}>
                            <UserIcon target={user} size={32} />
                            <Username user={user} />
                        </UserRow>
                    );
                })}
            </List>
        </Modal>
    );
}
