import { Button, DatePicker, Form, Input, InputNumber } from "antd";
import React from "react";
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";

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

  return (
    <div>
      <div className='imex-flex-row imex-flex-row__flex-space-around'>
        <Button
          className='imex-flex-row__margin-large'
          type='primary'
          key='submit'
          htmlType='submit'>
          {t("general.actions.save")}
        </Button>
        <div className='imex-flex-row__grow imex-flex-row__margin-large'>
          <FormFieldsChanged form={form} />
        </div>
      </div>

      <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"),
            },
          ]}>
          <InputNumber precision={0} />
        </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'
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}>
          <Input />
        </Form.Item>
        <Form.Item
          label={t("vehicles.fields.plate_no")}
          name='plate_no'
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}>
          <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'>
          <DatePicker />
        </Form.Item>
        {
          //TODO Add handling for paint code json
        }
        <Form.Item
          label={t("vehicles.fields.v_paint_codes")}
          name='v_paint_codes'>
          <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>
    </div>
  );
}