import { MultiSelect } from "@mantine/core";
import { UserSchema } from "../../../../client";


type Props = {
    shownUsers: UserSchema[];
    setShownUsers: (shownUsersProp: UserSchema[]) => void;
    users: UserSchema[];
}

const ShownUsersMultiSelect = ({
                                   shownUsers,
                                   setShownUsers,
                                   users,
                               }: Props) => {
    return (
        <MultiSelect
            data={users.map(user => ({
                label: `${user.firstName} ${user.secondName}`,
                value: user.id.toString(),
            }))}
            onChange={event =>
                setShownUsers(
                    users.filter(user =>
                        event.includes(user.id.toString()),
                    ),
                )
            }
            value={shownUsers.map(user => user.id.toString())}
            placeholder={
                shownUsers.length > 0 ? "" : "Показанные пользователи"
            }
            searchable
        />
    );
};

export default ShownUsersMultiSelect;
