bodyshop/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx

import { DatePicker, Form, Input, Checkbox } from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";

export default function JobsCreateVehicleInfoNewComponent() {
  const [state, setState] = useContext(JobCreateContext);

  const { t } = useTranslation();
  return (
    <div>
      <Checkbox
        defaultChecked={state.vehicle.new}
        checked={state.vehicle.new}
        onChange={() => {
          setState({
            ...state,
            vehicle: {
              ...state.vehicle,
              new: !state.vehicle.new,
              selectedid: null
            }
          });
        }}
      >
        {t("jobs.labels.create.newvehicle")}
      </Checkbox>
      <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>
      <Form.Item
        label={t("vehicles.fields.plate_no")}
        name={["vehicle", "data", "plate_no"]}
        rules={[
          {
            required: state.vehicle.new,
            message: t("general.validation.required")
          }
        ]}
      >
        <Input disabled={!state.vehicle.new} />
      </Form.Item>
      <Form.Item
        label={t("vehicles.fields.plate_st")}
        name={["vehicle", "data", "plate_st"]}
        rules={[
          {
            required: state.vehicle.new,
            message: t("general.validation.required")
          }
        ]}
      >
        <Input disabled={!state.vehicle.new} />
      </Form.Item>
      <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>
      <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>
      <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"]}
      >
        <DatePicker disabled={!state.vehicle.new} />
      </Form.Item>
      {
        //TODO Add handling for paint code json
      }
      <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>
      <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>
      <Form.Item
        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>
      <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>
      <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_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
        label={t("vehicles.fields.v_engine")}
        name={["vehicle", "data", "v_engine"]}
      >
        <Input disabled={!state.vehicle.new} />
      </Form.Item>
      <Form.Item
        label={t("vehicles.fields.v_cond")}
        name={["vehicle", "data", "v_cond"]}
      >
        <Input disabled={!state.vehicle.new} />
      </Form.Item>
      <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>
    </div>
  );
}