import React, { FC } from "react";
import { Flex, Stack, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/components/Footer";
import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
import StatusSelect from "@/components/selects/StatusSelect/StatusSelect";
import { BoardSchema, DealSchema, StatusSchema } from "@/lib/client";
import { utcDateTimeToLocalString } from "@/utils/datetime";

type Props = {
    value: DealSchema;
    onChange: (deal: DealSchema) => void;
    onDelete: (deal: DealSchema) => void;
};

export type DealForm = Omit<DealSchema, "board" | "status"> & {
    board?: BoardSchema | undefined;
    status?: StatusSchema | undefined;
};

const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
    const form = useForm<DealForm>({
        initialValues: value,
        validate: {
            name: value => !value && "Введите название",
            board: value => !value && "Выберите доску",
            status: value => !value && "Выберите статус",
        },
    });

    const onSubmit = (values: DealForm) => {
        form.resetDirty();
        onChange({
            ...values,
            board: values.board!,
            status: values.status!,
        });
    };

    return (
        <form onSubmit={form.onSubmit(onSubmit)}>
            <Stack p={"md"}>
                <Flex
                    gap={"md"}
                    w={"100%"}
                    direction={{ base: "column", sm: "row" }}>
                    <TextInput
                        label={"Название"}
                        {...form.getInputProps("name")}
                        flex={1}
                    />
                    <TextInput
                        label={"Дата создания"}
                        value={utcDateTimeToLocalString(value.createdAt)}
                        readOnly
                        flex={1}
                    />
                </Flex>
                <Flex
                    gap={"md"}
                    w={"100%"}
                    direction={{ base: "column", sm: "row" }}>
                    <BoardSelect
                        label={"Доска"}
                        {...form.getInputProps("board")}
                        onChange={board => {
                            form.setFieldValue("board", board ?? undefined);
                            form.setFieldValue("status", undefined);
                        }}
                        projectId={value.board.projectId}
                        flex={1}
                    />
                    <StatusSelect
                        label={"Статус"}
                        {...form.getInputProps("status")}
                        boardId={form.values.board?.id}
                        flex={1}
                    />
                </Flex>
                <Footer
                    form={form}
                    onDelete={() => onDelete(value)}
                />
            </Stack>
        </form>
    );
};

export default GeneralTab;