import { Timeline } from "antd";
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
          items={[
            ...(data.date_last_contacted
              ? [
                  {
                    key: "date_last_contacted",
                    content: (
                      <>
                        <label>{t("jobs.fields.date_last_contacted")}: </label>
                        <DateTimeFormatter>{data.date_last_contacted}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.date_open
              ? [
                  {
                    key: "date_open",
                    content: (
                      <>
                        <label>{t("jobs.fields.date_open")}: </label>
                        <DateTimeFormatter>{data.date_open}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.date_estimated
              ? [
                  {
                    key: "date_estimated",
                    content: (
                      <>
                        <label>{t("jobs.fields.date_estimated")}: </label>
                        <DateTimeFormatter>{data.date_estimated}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.date_scheduled
              ? [
                  {
                    key: "date_scheduled",
                    content: (
                      <>
                        <label>{t("jobs.fields.date_scheduled")}: </label>
                        <DateTimeFormatter>{data.date_scheduled}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.scheduled_in
              ? [
                  {
                    key: "scheduled_in",
                    content: (
                      <>
                        <label>{t("jobs.fields.scheduled_in")}: </label>
                        <DateTimeFormatter>{data.scheduled_in}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.actual_in
              ? [
                  {
                    key: "actual_in",
                    content: (
                      <>
                        <label>{t("jobs.fields.actual_in")}: </label>
                        <DateTimeFormatter>{data.actual_in}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.date_repairstarted
              ? [
                  {
                    key: "date_repairstarted",
                    content: (
                      <>
                        <label>{t("jobs.fields.date_repairstarted")}: </label>
                        <DateTimeFormatter>{data.date_repairstarted}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.scheduled_completion
              ? [
                  {
                    key: "scheduled_completion",
                    content: (
                      <>
                        <label>{t("jobs.fields.scheduled_completion")}: </label>
                        <DateTimeFormatter>{data.scheduled_completion}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.actual_completion
              ? [
                  {
                    key: "actual_completion",
                    content: (
                      <>
                        <label>{t("jobs.fields.actual_completion")}: </label>
                        <DateTimeFormatter>{data.actual_completion}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.scheduled_delivery
              ? [
                  {
                    key: "scheduled_delivery",
                    content: (
                      <>
                        <label>{t("jobs.fields.scheduled_delivery")}: </label>
                        <DateTimeFormatter>{data.scheduled_delivery}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.actual_delivery
              ? [
                  {
                    key: "actual_delivery",
                    content: (
                      <>
                        <label>{t("jobs.fields.actual_delivery")}: </label>
                        <DateTimeFormatter>{data.actual_delivery}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.date_invoiced
              ? [
                  {
                    key: "date_invoiced",
                    content: (
                      <>
                        <label>{t("jobs.fields.date_invoiced")}: </label>
                        <DateTimeFormatter>{data.date_invoiced}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : []),
            ...(data.date_exported
              ? [
                  {
                    key: "date_exported",
                    content: (
                      <>
                        <label>{t("jobs.fields.date_exported")}: </label>
                        <DateTimeFormatter>{data.date_exported}</DateTimeFormatter>
                      </>
                    )
                  }
                ]
              : [])
          ]}
        />
      ) : null}
    </CardTemplate>
  );
}
