import { Timeline } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import CardTemplate from "./job-detail-cards.template.component";

export default function JobDetailCardsDatesComponent({ loading, data }) {
  const { t } = useTranslation();

  return (
    <CardTemplate loading={loading} title={t("jobs.labels.cards.dates")}>
      {data ? (
        <Timeline>
          {!(
            data.actual_in ||
            data.scheduled_completion ||
            data.scheduled_in ||
            data.actual_completion ||
            data.scheduled_delivery ||
            data.actual_delivery ||
            data.date_estimated ||
            data.date_open ||
            data.date_scheduled ||
            data.date_invoiced ||
            data.date_exported
          ) ? (
            <div>{t("jobs.errors.nodates")}</div>
          ) : null}
          {data.date_last_contacted ? (
            <Timeline.Item>
              <label>{t("jobs.fields.date_last_contacted")}: </label>
              <DateTimeFormatter>{data.date_last_contacted}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}
          {data.date_open ? (
            <Timeline.Item>
              <label>{t("jobs.fields.date_open")}: </label>
              <DateTimeFormatter>{data.date_open}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}

          {data.date_estimated ? (
            <Timeline.Item>
              <label>{t("jobs.fields.date_estimated")}: </label>
              <DateTimeFormatter>{data.date_estimated}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}

          {data.date_scheduled ? (
            <Timeline.Item>
              <label>{t("jobs.fields.date_scheduled")}: </label>
              <DateTimeFormatter>{data.date_scheduled}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}

          {data.scheduled_in ? (
            <Timeline.Item>
              <label>{t("jobs.fields.scheduled_in")}: </label>
              <DateTimeFormatter>{data.scheduled_in}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}
          {data.actual_in ? (
            <Timeline.Item>
              <label>{t("jobs.fields.actual_in")}: </label>
              <DateTimeFormatter>{data.actual_in}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}
          {data.date_repairstarted ? (
            <Timeline.Item>
              <label>{t("jobs.fields.date_repairstarted")}: </label>
              <DateTimeFormatter>{data.date_repairstarted}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}
          {data.scheduled_completion ? (
            <Timeline.Item>
              <label>{t("jobs.fields.scheduled_completion")}: </label>
              <DateTimeFormatter>{data.scheduled_completion}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}

          {data.actual_completion ? (
            <Timeline.Item>
              <label>{t("jobs.fields.actual_completion")}: </label>
              <DateTimeFormatter>{data.actual_completion}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}

          {data.scheduled_delivery ? (
            <Timeline.Item>
              <label>{t("jobs.fields.scheduled_delivery")}: </label>
              <DateTimeFormatter>{data.scheduled_delivery}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}

          {data.actual_delivery ? (
            <Timeline.Item>
              <label>{t("jobs.fields.actual_delivery")}: </label>
              <DateTimeFormatter>{data.actual_delivery}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}

          {data.date_invoiced ? (
            <Timeline.Item>
              <label>{t("jobs.fields.date_invoiced")}: </label>
              <DateTimeFormatter>{data.date_invoiced}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}

          {data.date_exported ? (
            <Timeline.Item>
              <label>{t("jobs.fields.date_exported")}: </label>
              <DateTimeFormatter>{data.date_exported}</DateTimeFormatter>
            </Timeline.Item>
          ) : null}
        </Timeline>
      ) : null}
    </CardTemplate>
  );
}
