import React from "react";
import { Create, useForm } from "@refinedev/antd";
import { Form, Input, DatePicker } from "antd";
import { useTranslation } from "react-i18next";
import dayjs from "dayjs";

export const OrderCreate: React.FC = () => {
    const { t } = useTranslation();
    const { formProps, saveButtonProps } = useForm({
        redirect: "edit",
    });

    return (
        <Create saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
                <Form.Item
                    label={t("order.orderNumber")}
                    name="OrderNumber"
                    rules={[{ required: true, message: t("validation.required") }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label={t("order.orderDate")}
                    name="OrderDate"
                    getValueProps={(value) => ({
                        value: value ? dayjs(value) : dayjs(),
                    })}
                    getValueFromEvent={(date) => date?.toISOString()}
                    rules={[{ required: true, message: t("validation.required") }]}
                >
                    <DatePicker style={{ width: "100%" }} />
                </Form.Item>
                <Form.Item
                    label={t("order.customerName")}
                    name="CustomerName"
                    rules={[{ required: true, message: t("validation.required") }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label={t("order.notes")}
                    name="Notes"
                >
                    <Input.TextArea rows={3} />
                </Form.Item>
            </Form>
        </Create>
    );
};