import { Divider, Form, Input, DatePicker } from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import FormItemPhone from "../form-items-formatted/phone-form-item.component";
import moment from "moment";

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

  console.log("job.loss_date", job.loss_date);

  return (
    <div>
      <Form.Item label={t("jobs.fields.ins_co_id")}>
        {getFieldDecorator("ins_co_id", {
          initialValue: job.ins_co_id
        })(<Input name="ins_co_id" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.policy_no")}>
        {getFieldDecorator("policy_no", {
          initialValue: job.policy_no
        })(<Input name="policy_no" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.clm_no")}>
        {getFieldDecorator("clm_no", {
          initialValue: job.clm_no
        })(<Input name="clm_no" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.regie_number")}>
        {getFieldDecorator("regie_number", {
          initialValue: job.regie_number
        })(<Input name="regie_number" />)}
      </Form.Item>
      TODO: missing KOL field???
      <Form.Item label={t("jobs.fields.loss_date")}>
        {getFieldDecorator("loss_date", {
          initialValue: job.loss_date ? moment(job.loss_date) : null
        })(<DatePicker name="loss_date" />)}
      </Form.Item>
      DAMAGE {JSON.stringify(job.area_of_damage)}
      CAA # seems not correct based on field mapping Class seems not correct
      based on field mapping
      <Form.Item label={t("jobs.fields.ins_co_nm")}>
        {getFieldDecorator("ins_co_nm", {
          initialValue: job.ins_co_nm
        })(<Input name="ins_co_nm" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.ins_addr1")}>
        {getFieldDecorator("ins_addr1", {
          initialValue: job.ins_addr1
        })(<Input name="ins_addr1" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.ins_city")}>
        {getFieldDecorator("ins_city", {
          initialValue: job.ins_city
        })(<Input name="ins_city" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.ins_ct_ln")}>
        {getFieldDecorator("ins_ct_ln", {
          initialValue: job.ins_ct_ln
        })(<Input name="ins_ct_ln" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.ins_ct_fn")}>
        {getFieldDecorator("ins_ct_fn", {
          initialValue: job.ins_ct_fn
        })(<Input name="ins_ct_fn" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.ins_ph1")}>
        {getFieldDecorator("ins_ph1", {
          initialValue: job.ins_ph1
        })(<FormItemPhone customInput={Input} name="ins_ph1" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.ins_ea")}>
        {getFieldDecorator("ins_ea", {
          initialValue: job.ins_ea,
          rules: [
            {
              type: "email",
              message: "This is not a valid email address."
            }
          ]
        })(<FormItemEmail name="ins_ea" email={getFieldValue("ins_ea")} />)}
      </Form.Item>
      <Divider />
      Appraiser Info
      <Form.Item label={t("jobs.fields.est_co_nm")}>
        {getFieldDecorator("est_co_nm", {
          initialValue: job.est_co_nm
        })(<Input name="est_co_nm" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.est_ct_fn")}>
        {getFieldDecorator("est_ct_fn", {
          initialValue: job.est_ct_fn
        })(<Input name="est_ct_fn" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.est_ct_ln")}>
        {getFieldDecorator("est_ct_ln", {
          initialValue: job.est_ct_ln
        })(<Input name="est_ct_ln" />)}
      </Form.Item>
      TODO: Field is pay date but title is inspection date. Likely incorrect?
      <Form.Item label={t("jobs.fields.pay_date")}>
        {getFieldDecorator("pay_date", {
          initialValue: job.pay_date
        })(<Input name="pay_date" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.est_ph1")}>
        {getFieldDecorator("est_ph1", {
          initialValue: job.est_ph1
        })(<Input name="est_ph1" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.est_ea")}>
        {getFieldDecorator("est_ea", {
          initialValue: job.est_ea,
          rules: [
            {
              type: "email",
              message: "This is not a valid email address."
            }
          ]
        })(<FormItemEmail name="est_ea" email={getFieldValue("est_ea")} />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.selling_dealer")}>
        {getFieldDecorator("selling_dealer", {
          initialValue: job.selling_dealer
        })(<Input name="selling_dealer" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.servicing_dealer")}>
        {getFieldDecorator("servicing_dealer", {
          initialValue: job.servicing_dealer
        })(<Input name="servicing_dealer" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.selling_dealer_contact")}>
        {getFieldDecorator("selling_dealer_contact", {
          initialValue: job.selling_dealer_contact
        })(<Input name="selling_dealer_contact" />)}
      </Form.Item>
      <Form.Item label={t("jobs.fields.servicing_dealer_contact")}>
        {getFieldDecorator("servicing_dealer_contact", {
          initialValue: job.servicing_dealer_contact
        })(<Input name="servicing_dealer_contact" />)}
      </Form.Item>
      TODO: Adding servicing/selling dealer contact info?
    </div>
  );
}