import { Form, Input } from "antd";
import { useTranslation } from "react-i18next";
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";

export default function VehicleDetailFormComponent({ form }) {
  const { t } = useTranslation();

  return (
    <div>
      <FormFieldsChanged form={form} />

      <LayoutFormRow header={t("vehicles.forms.detail")}>
        <Form.Item
          label={t("vehicles.fields.v_model_yr")}
          name="v_model_yr"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("vehicles.fields.v_make_desc")}
          name="v_make_desc"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("vehicles.fields.v_model_desc")}
          name="v_model_desc"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("vehicles.fields.v_color")}
          name="v_color"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("vehicles.fields.v_vin")}
          name="v_vin"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow header={t("vehicles.forms.registration")}>
        <Form.Item label={t("vehicles.fields.plate_st")} name="plate_st">
          <Input />
        </Form.Item>
        <Form.Item label={t("vehicles.fields.plate_no")} name="plate_no">
          <Input />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow header={t("vehicles.forms.misc")}>
        <Form.Item label={t("vehicles.fields.v_type")} name="v_type">
          <Input />
        </Form.Item>
        <Form.Item label={t("vehicles.fields.v_trimcode")} name="v_trimcode">
          <Input />
        </Form.Item>
        <Form.Item label={t("vehicles.fields.v_tone")} name="v_tone">
          <Input />
        </Form.Item>
        <Form.Item label={t("vehicles.fields.v_bstyle")} name="v_bstyle">
          <Input />
        </Form.Item>

        <Form.Item label={t("vehicles.fields.v_stage")} name="v_stage">
          <Input />
        </Form.Item>
        <Form.Item label={t("vehicles.fields.v_prod_dt")} name="v_prod_dt">
          <DateTimePicker isDateOnly />
        </Form.Item>

        <Form.Item label={t("vehicles.fields.v_paint_codes", { number: 1 })} name={["v_paint_codes", "paint_cd1"]}>
          <Input />
        </Form.Item>
        <Form.Item label={t("vehicles.fields.v_paint_codes", { number: 2 })} name={["v_paint_codes", "paint_cd2"]}>
          <Input />
        </Form.Item>
        <Form.Item label={t("vehicles.fields.v_options")} name="v_options">
          <Input />
        </Form.Item>

        <Form.Item label={t("vehicles.fields.trim_color")} name="trim_color">
          <Input />
        </Form.Item>

        <Form.Item label={t("vehicles.fields.v_mldgcode")} name="v_mldgcode">
          <Input />
        </Form.Item>
        <Form.Item label={t("vehicles.fields.v_makecode")} name="v_makecode">
          <Input />
        </Form.Item>

        <Form.Item label={t("vehicles.fields.v_engine")} name="v_engine">
          <Input />
        </Form.Item>
        <Form.Item label={t("vehicles.fields.v_cond")} name="v_cond">
          <Input />
        </Form.Item>
      </LayoutFormRow>
      <Form.Item label={t("vehicles.fields.notes")} name="notes">
        <Input.TextArea rows={4} />
      </Form.Item>
    </div>
  );
}
