import { MultiSelect, rem } from "@mantine/core";
import { PositionSchema, UserSchema } from "../../../../../../client";
import { useWorkShiftsPlanningContext } from "../../contexts/WorkShiftsPlanningContext.tsx";


type Props = {
    date: Date;
    positions?: PositionSchema[];
    user: UserSchema;
}

const PositionsMultiSelect = ({ date, positions, user }: Props) => {
    const {
        onUpdate,
        userPositions,
    } = useWorkShiftsPlanningContext();

    return (
        <MultiSelect
            data={userPositions.get(user.id)?.map(
                position => ({
                    value: position.key,
                    label: position.name,
                }),
            )}

            onChange={values => {
                onUpdate(user.id, date, values);
            }}

            value={positions?.map(p => p.key) ?? []}

            miw={rem(140)}
        />
    );
};

export default PositionsMultiSelect;
