import { DatePicker, Form, Input } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import FormItemPhone from "../form-items-formatted/phone-form-item.component";
import Car from "../job-damage-visual/job-damage-visual.component";
import FormRow from "../layout-form-row/layout-form-row.component";

export default function JobsDetailInsurance({ job, form }) {
  const { getFieldValue } = form;
  const { t } = useTranslation();

  return (
    <div>
      <FormRow header={t("jobs.forms.inscoinfo")}>
        <Form.Item label={t("jobs.fields.ins_co_id")} name='ins_co_id'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.ins_co_nm")} name='ins_co_nm'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.ins_addr1")} name='ins_addr1'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.ins_city")} name='ins_city'>
          <Input />
        </Form.Item>
      </FormRow>
      <FormRow>
        <Form.Item label={t("jobs.fields.ins_ct_ln")} name='ins_ct_ln'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.ins_ct_fn")} name='ins_ct_fn'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.ins_ph1")} name='ins_ph1'>
          <FormItemPhone customInput={Input} />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.ins_ea")}
          name='ins_ea'
          rules={[
            {
              type: "email",
              message: "This is not a valid email address.",
            },
          ]}>
          <FormItemEmail email={getFieldValue("ins_ea")} />
        </Form.Item>
      </FormRow>
      <FormRow header={t("jobs.forms.claiminfo")}>
        <Form.Item label={t("jobs.fields.clm_no")} name='clm_no'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.policy_no")} name='policy_no'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.regie_number")} name='regie_number'>
          <Input />
        </Form.Item>
      </FormRow>
      <FormRow header={t("jobs.forms.lossinfo")}>
        <div style={{ display: "inline", height: "8rem" }}>
          {job.area_of_damage ? (
            <Car
              dmg1={job.area_of_damage.impact1 || null}
              dmg2={job.area_of_damage.impact2 || null}
            />
          ) : (
            t("jobs.errors.nodamage")
          )}
        </div>
        <Form.Item label={t("jobs.fields.loss_desc")} name='loss_desc'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.loss_date")} name='loss_date'>
          <DatePicker />
        </Form.Item>
      </FormRow>
      <FormRow header={t("jobs.forms.appraiserinfo")}>
        <Form.Item label={t("jobs.fields.est_co_nm")} name='est_co_nm'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.est_ct_fn")} name='est_ct_fn'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.est_ct_ln")} name='est_ct_ln'>
          <Input />
        </Form.Item>
        <Form.Item label={t("jobs.fields.est_ph1")} name='est_ph1'>
          <Input />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.est_ea")}
          name='est_ea'
          rules={[
            {
              type: "email",
              message: "This is not a valid email address.",
            },
          ]}>
          <FormItemEmail email={getFieldValue("est_ea")} />
        </Form.Item>
      </FormRow>
      <FormRow header='TODO: TO BE PLACED'>
        <Form.Item label={t("jobs.fields.pay_date")} name='pay_date'>
          <Input />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.selling_dealer")}
          name='selling_dealer'>
          <Input />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.servicing_dealer")}
          name='servicing_dealer'>
          <Input />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.selling_dealer_contact")}
          name='selling_dealer_contact'>
          <Input />
        </Form.Item>
        <Form.Item
          label={t("jobs.fields.servicing_dealer_contact")}
          name='servicing_dealer_contact'>
          <Input />
        </Form.Item>
        TODO: Adding servicing/selling dealer contact info?
      </FormRow>
    </div>
  );
}