import React from "react";
import { IconPlus } from "@tabler/icons-react";
import { Box, Center, Group, Text } from "@mantine/core";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import useIsMobile from "@/hooks/utils/useIsMobile";
import styles from "./CreateStatusButton.module.css";

const CreateStatusButton = () => {
    const { statusesCrud } = useStatusesContext();
    const isMobile = useIsMobile();

    return (
        <Box className={styles.container}>
            <Box
                p={isMobile ? "sm" : 0}
                className={styles["inner-container"]}>
                <InPlaceInput
                    placeholder={"Название колонки"}
                    onChange={name => statusesCrud.onCreate({ name })}
                    getChildren={startEditing => (
                        <Center
                            p={"sm"}
                            onClick={() => startEditing()}>
                            <Group
                                gap={"xs"}
                                wrap={"nowrap"}
                                align={"center"}>
                                <IconPlus />
                                {isMobile && <Text>Добавить</Text>}
                            </Group>
                        </Center>
                    )}
                    modalTitle={"Создание колонки"}
                    inputStyles={{
                        wrapper: {
                            width: 250,
                            paddingInline: "var(--mantine-spacing-md)",
                            paddingBlock: "var(--mantine-spacing-xs)",
                        },
                        input: {
                            width: 250,
                        },
                    }}
                />
            </Box>
        </Box>
    );
};

export default CreateStatusButton;