import { DatePicker, Form } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";

export default function JobsDetailDatesComponent({ job }) {
  const { t } = useTranslation();

  // initialValue: job.loss_date ? moment(job.loss_date) : null
  // initialValue: job.date_estimated ? moment(job.date_estimated) : null
  // initialValue: job.date_open ? moment(job.date_open) : null
  // initialValue: job.date_scheduled ? moment(job.date_scheduled) : null
  // initialValue: job.scheduled_in ? moment(job.scheduled_in) : null
  // initialValue: job.actual_in ? moment(job.actual_in) : null
  // initialValue: job.scheduled_completion            ? moment(job.scheduled_completion)            : null
  // initialValue: job.actual_completion            ? moment(job.actual_completion)            : null
  // initialValue: job.scheduled_delivery            ? moment(job.scheduled_delivery)            : null
  // initialValue: job.actual_delivery ? moment(job.actual_delivery) : null
  // initialValue: job.date_invoiced ? moment(job.date_invoiced) : null
  // initialValue: job.date_closed ? moment(job.date_closed) : null
  // initialValue: job.date_exported ? moment(job.date_exported) : null

  return (
    <div>
      <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
        <DatePicker />
      </Form.Item>
      CAA # seems not correct based on field mapping Class seems not correct
      based on field mapping
      <Form.Item label={t("jobs.fields.date_estimated")} name="date_estimated">
        <DatePicker />
      </Form.Item>
      <Form.Item label={t("jobs.fields.date_open")} name="date_open">
        <DatePicker />
      </Form.Item>
      <Form.Item label={t("jobs.fields.date_scheduled")} name="date_scheduled">
        <DatePicker />
      </Form.Item>
      <Form.Item label={t("jobs.fields.scheduled_in")} name="scheduled_in">
        <DatePicker />
      </Form.Item>
      <Form.Item label={t("jobs.fields.actual_in")} name="actual_in">
        <DatePicker />
      </Form.Item>
      <Form.Item
        label={t("jobs.fields.scheduled_completion")}
        name="scheduled_completion"
      >
        <DatePicker />
      </Form.Item>
      <Form.Item
        label={t("jobs.fields.actual_completion")}
        name="actual_completion"
      >
        <DatePicker />
      </Form.Item>
      <Form.Item
        label={t("jobs.fields.scheduled_delivery")}
        name="scheduled_delivery"
      >
        <DatePicker />
      </Form.Item>
      <Form.Item
        label={t("jobs.fields.actual_delivery")}
        name="actual_delivery"
      >
        <DatePicker />
      </Form.Item>
      <Form.Item label={t("jobs.fields.date_invoiced")} name="date_invoiced">
        <DatePicker />
      </Form.Item>
      <Form.Item label={t("jobs.fields.date_closed")} name="date_closed">
        <DatePicker />
      </Form.Item>
      <Form.Item label={t("jobs.fields.date_exported")} name="date_exported">
        <DatePicker />
      </Form.Item>
    </div>
  );
}
