import { IconCheck } from "@tabler/icons-react";
import { Flex, TextInput } from "@mantine/core";
import { useSelectEditorContext } from "@/app/attributes/modals/AttrSelectEditorModal/contexts/SelectEditorContext";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import InlineButton from "@/components/ui/InlineButton/InlineButton";

const CreateOptionButton = () => {
    const {
        optionsActions: {
            isCreatingOption,
            createOptionForm,
            onStartCreating,
            onFinishCreating,
        },
    } = useSelectEditorContext();

    if (!isCreatingOption) {
        return (
            <InlineButton onClick={onStartCreating}>
                Добавить опцию
            </InlineButton>
        );
    }

    return (
        <Flex gap={"xs"}>
            <TextInput {...createOptionForm.getInputProps("name")} flex={1} />
            <ActionIconWithTip
                tipLabel={"Сохранить"}
                onClick={onFinishCreating}>
                <IconCheck />
            </ActionIconWithTip>
        </Flex>
    );
};

export default CreateOptionButton;