import {Form, Input} from "antd";
import React, {useContext} from "react";
import {useTranslation} from "react-i18next";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import JobsCreateVehicleInfoPredefined from "./jobs-create-vehicle-info.predefined.component";

export default function JobsCreateVehicleInfoNewComponent({form}) {
    const [state] = useContext(JobCreateContext);

    const {t} = useTranslation();
    return (
        <div>
            <LayoutFormRow header={t("vehicles.forms.detail")} grow>
                <Form.Item
                    label={t("vehicles.fields.v_vin")}
                    name={["vehicle", "data", "v_vin"]}
                    rules={[
                        {
                            required: state.vehicle.new,
                            //message: t("general.validation.required"),
                        },
                    ]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
            </LayoutFormRow>
            <LayoutFormRow grow noDivider>
                <Form.Item
                    label={t("vehicles.fields.v_color")}
                    name={["vehicle", "data", "v_color"]}
                    rules={[
                        {
                            required: state.vehicle.new,
                            //message: t("general.validation.required"),
                        },
                    ]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
                <Form.Item
                    label={t("vehicles.fields.v_model_yr")}
                    name={["vehicle", "data", "v_model_yr"]}
                    rules={[
                        {
                            required: state.vehicle.new,
                            //message: t("general.validation.required"),
                        },
                    ]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
            </LayoutFormRow>

            <LayoutFormRow grow noDivider>
                <Form.Item
                    span={10}
                    label={t("vehicles.fields.v_make_desc")}
                    name={["vehicle", "data", "v_make_desc"]}
                    rules={[
                        {
                            required: state.vehicle.new,
                            //message: t("general.validation.required"),
                        },
                    ]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
                <Form.Item
                    span={11}
                    label={t("vehicles.fields.v_model_desc")}
                    name={["vehicle", "data", "v_model_desc"]}
                    rules={[
                        {
                            required: state.vehicle.new,
                            //message: t("general.validation.required"),
                        },
                    ]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
                <JobsCreateVehicleInfoPredefined
                    disabled={!state.vehicle.new}
                    form={form}
                    span={1}
                />
            </LayoutFormRow>

            <LayoutFormRow header={t("vehicles.forms.registration")} grow>
                <Form.Item
                    label={t("vehicles.fields.plate_st")}
                    name={["vehicle", "data", "plate_st"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
                <Form.Item
                    label={t("vehicles.fields.plate_no")}
                    name={["vehicle", "data", "plate_no"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
            </LayoutFormRow>

            <LayoutFormRow header={t("vehicles.forms.misc")} grow>
                <Form.Item
                    label={t("vehicles.fields.v_type")}
                    name={["vehicle", "data", "v_type"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
                <Form.Item
                    label={t("vehicles.fields.v_trimcode")}
                    name={["vehicle", "data", "v_trimcode"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
            </LayoutFormRow>
            <LayoutFormRow grow>
                <Form.Item
                    label={t("vehicles.fields.v_tone")}
                    name={["vehicle", "data", "v_tone"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
                <Form.Item
                    label={t("vehicles.fields.v_bstyle")}
                    name={["vehicle", "data", "v_bstyle"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
            </LayoutFormRow>
            <LayoutFormRow grow>
                <Form.Item
                    label={t("vehicles.fields.v_stage")}
                    name={["vehicle", "data", "v_stage"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
                <Form.Item
                    label={t("vehicles.fields.v_prod_dt")}
                    name={["vehicle", "data", "v_prod_dt"]}
                >
                    <FormDatePicker disabled={!state.vehicle.new}/>
                </Form.Item>
            </LayoutFormRow>
            <LayoutFormRow grow>
                {
                    //  <Form.Item
                    //       label={t("vehicles.fields.v_paint_codes")}
                    //       name={["vehicle", "data", "v_paint_codes"]}
                    //     >
                    //       <Input disabled={!state.vehicle.new} />
                    //     </Form.Item>
                }
                <Form.Item
                    label={t("vehicles.fields.v_options")}
                    name={["vehicle", "data", "v_options"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
            </LayoutFormRow>
            <LayoutFormRow grow>
                <Form.Item
                    label={t("vehicles.fields.trim_color")}
                    name={["vehicle", "data", "trim_color"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
                <Form.Item
                    label={t("vehicles.fields.v_mldgcode")}
                    name={["vehicle", "data", "v_mldgcode"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
            </LayoutFormRow>
            <LayoutFormRow grow>
                <Form.Item
                    label={t("vehicles.fields.v_makecode")}
                    name={["vehicle", "data", "v_makecode"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
                <Form.Item
                    label={t("vehicles.fields.v_engine")}
                    name={["vehicle", "data", "v_engine"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
            </LayoutFormRow>

            <LayoutFormRow grow>
                <Form.Item
                    label={t("vehicles.fields.v_cond")}
                    name={["vehicle", "data", "v_cond"]}
                >
                    <Input disabled={!state.vehicle.new}/>
                </Form.Item>
            </LayoutFormRow>
        </div>
    );
}