import React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import PhoneFormatter from "../../utils/PhoneFormatter";
import CardTemplate from "./job-detail-cards.template.component";

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

  return (
    <CardTemplate
      loading={loading}
      title={t("jobs.labels.cards.customer")}
      extraLink={data && data.owner ? `/manage/owners/${data.owner.id}` : null}>
      {data ? (
        <span>
          <div>{`${data.ownr_fn || ""} ${data.ownr_ln || ""}`}</div>
          <div>
            {t("jobs.fields.phoneshort")}:
            <PhoneFormatter>{`${data.ownr_ph1 ||
              t("general.labels.na")}`}</PhoneFormatter>
          </div>
          <div>
            {t("jobs.fields.ownr_ea")}:
            {data.ownr_ea ? (
              <a href={`mailto:${data.ownr_ea}`}>
                <span>{`${data.ownr_ea || ""}`}</span>
              </a>
            ) : (
              t("general.labels.na")
            )}
          </div>
          <div>{`${(data.owner && data.owner.preferred_contact) || ""}`}</div>
          {data.vehicle ? (
            <Link to={`/manage/vehicles/${data.vehicle.id}`}>
              {`${data.vehicle.v_model_yr || ""} ${data.vehicle.v_make_desc ||
                ""} ${data.vehicle.v_model_desc || ""}`}
            </Link>
          ) : (
            <span>{t("jobs.errors.novehicle")}</span>
          )}
        </span>
      ) : null}
    </CardTemplate>
  );
}