import React, { FC } from "react";
import { Box, Group, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu";
import { useStatusesMobileContext } from "@/app/deals/drawers/StatusesMobileEditorDrawer/contexts/BoardStatusesContext";
import { BoardSchema, StatusSchema } from "@/lib/client";

type Props = {
    status: StatusSchema;
    board: BoardSchema;
};

const StatusMobile: FC<Props> = ({ status, board }) => {
    const { statusesCrud } = useStatusesMobileContext();

    const startEditing = () => {
        modals.openContextModal({
            modal: "enterNameModal",
            title: "Редактирование статуса",
            withCloseButton: true,
            innerProps: {
                onChange: values => statusesCrud.onUpdate(status.id, values),
                value: status,
            },
        });
    };

    return (
        <Group
            w={"100%"}
            pr={"md"}
            py={"xs"}
            justify={"space-between"}
            wrap={"nowrap"}>
            <Box>
                <Text>{status.name}</Text>
            </Box>
            <StatusMenu
                status={status}
                board={board}
                onDeleteStatus={statusesCrud.onDelete}
                handleEdit={startEditing}
                withChangeOrderButton={false}
            />
        </Group>
    );
};

export default StatusMobile;