import {UserSchema} from "../../client";
import {ObjectSelectProps} from "../../components/ObjectSelect/ObjectSelect.tsx";
import {ContextModalProps} from "@mantine/modals";
import {Button, Flex, rem} from "@mantine/core";
import {useState} from "react";
import UserSelect from "../../components/Selects/UserSelect/UserSelect.tsx";
import {notifications} from "../../shared/lib/notifications.ts";

type SelectProps = Omit<ObjectSelectProps<UserSchema>, 'data' | 'getValueFn' | 'getLabelFn' | 'onChange'>;
type Props = {
    onSelect: (user: UserSchema) => void
    selectProps?: SelectProps;
}

const EmployeeSelectModal = ({
                                 context,
                                 id,
                                 innerProps,
                             }: ContextModalProps<Props>) => {
    const [innerValue, setInnerValue] = useState<UserSchema | undefined>();

    const closeSelf = () => {
        context.closeContextModal(id);
    }

    const onSelectClick = () => {
        if (!innerValue) {
            notifications.error({message: "Необходимо выбрать сотрудника"})
            return;
        }
        innerProps.onSelect(innerValue);
        closeSelf();
    }
    const onCloseClick = () => {
        closeSelf();
    }
    return (
        <Flex direction={"column"}
              gap={rem(10)}
        >
            <Flex w={"100%"}>
                <UserSelect
                    onChange={setInnerValue}
                    w={"100%"}
                    placeholder={"Выберите сотрудника"}
                    {...innerProps.selectProps}

                />
            </Flex>
            <Flex justify={"flex-end"} gap={rem(10)}>
                <Button
                    variant={"default"}
                    onClick={() => onCloseClick()}
                >
                    Отменить
                </Button>
                <Button
                    onClick={() => onSelectClick()}
                >
                    Выбрать сотрудника
                </Button>
            </Flex>
        </Flex>
    )
}

export default EmployeeSelectModal
