import { Timeline } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { DateFormatter } 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_closed ||
            data.date_exported
          ) ? (
            <div>{t("jobs.errors.nodates")}</div>
          ) : null}

          {data.actual_in ? (
            <Timeline.Item>
              {t("jobs.fields.actual_in")}
              <DateFormatter>{data.actual_in}</DateFormatter>
            </Timeline.Item>
          ) : null}

          {data.scheduled_completion ? (
            <Timeline.Item>
              {t("jobs.fields.scheduled_completion")}
              <DateFormatter>{data.scheduled_completion}</DateFormatter>
            </Timeline.Item>
          ) : null}

          {data.scheduled_in ? (
            <Timeline.Item>
              {t("jobs.fields.scheduled_in")}
              <DateFormatter>{data.scheduled_in}</DateFormatter>
            </Timeline.Item>
          ) : null}

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

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

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

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

          {data.date_open ? (
            <Timeline.Item>
              {t("jobs.fields.date_open")}
              <DateFormatter>{data.date_open}</DateFormatter>
            </Timeline.Item>
          ) : null}

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

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

          {data.date_closed ? (
            <Timeline.Item>
              {t("jobs.fields.date_closed")}
              <DateFormatter>{data.date_closed}</DateFormatter>
            </Timeline.Item>
          ) : null}

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