import { Flex, rem } from "@mantine/core";
import ShownUsersMultiSelect from "../../../../components/ShownUsersMultiselect/ShownUsersMultiSelect.tsx";
import { DatePickerInput } from "@mantine/dates";
import { useWorkShiftsPlanningContext } from "../../contexts/WorkShiftsPlanningContext.tsx";

const WorkShiftsPlanningHeader = () => {
    const {
        dateRange,
        setDateRange,
        users,
        shownUsers,
        setShownUsers,
    } = useWorkShiftsPlanningContext();

    return (
        <Flex
            align={"center"}
            justify={"space-between"}
            gap={rem(10)}
        >
            <ShownUsersMultiSelect
                shownUsers={shownUsers}
                setShownUsers={setShownUsers}
                users={users}
            />
            <DatePickerInput
                placeholder={"Выберите временной промежуток"}
                type={"range"}
                value={dateRange}
                onChange={(value) => {
                    setDateRange(value);
                }}
            />
        </Flex>
    );
};

export default WorkShiftsPlanningHeader;
