import React from "react";
import { Create, useForm } from "@refinedev/antd";
import { Form, Input, InputNumber, DatePicker, Switch, Select } from "antd";
import { useTranslation } from "react-i18next";
import { Base64Upload } from "@cundi/refine-xaf";
import dayjs from "dayjs";

export const BasicTypeTestCreate: React.FC = () => {
    const { t } = useTranslation();
    const { formProps, saveButtonProps } = useForm();

    return (
        <Create saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
                <Form.Item
                    label={t("basicTypeTest.stringValue")}
                    name="StringValue"
                    rules={[{ required: true }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label={t("basicTypeTest.memoValue")}
                    name="MemoValue"
                >
                    <Input.TextArea rows={4} />
                </Form.Item>
                <Form.Item
                    label={t("basicTypeTest.intValue")}
                    name="IntValue"
                    rules={[{ required: true }]}
                >
                    <InputNumber style={{ width: "100%" }} />
                </Form.Item>
                <Form.Item
                    label={t("basicTypeTest.doubleValue")}
                    name="DoubleValue"
                    rules={[{ required: true }]}
                >
                    <InputNumber style={{ width: "100%" }} step={0.1} />
                </Form.Item>
                <Form.Item
                    label={t("basicTypeTest.dateTimeValue")}
                    name="DateTimeValue"
                    rules={[{ required: true }]}
                    getValueProps={(value) => ({
                        value: value ? dayjs(value) : "",
                    })}
                >
                    <DatePicker showTime />
                </Form.Item>
                <Form.Item
                    label={t("basicTypeTest.boolValue")}
                    name="BoolValue"
                    valuePropName="checked"
                >
                    <Switch />
                </Form.Item>
                <Form.Item
                    label={t("basicTypeTest.statusValue")}
                    name="StatusValue"
                >
                    <Select
                        options={[
                            { value: "Draft", label: t("basicTypeTest.status.Draft") },
                            { value: "Active", label: t("basicTypeTest.status.Active") },
                            { value: "Completed", label: t("basicTypeTest.status.Completed") },
                            { value: "Cancelled", label: t("basicTypeTest.status.Cancelled") },
                        ]}
                    />
                </Form.Item>
                <Form.Item
                    label={t("basicTypeTest.imageValue")}
                    name="ImageValue"
                >
                    <Base64Upload />
                </Form.Item>
            </Form>
        </Create>
    );
};