import React from "react";
import { Popover, Button } from "antd";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";

export default function ScheduleEventComponent({ event, handleCancel }) {
  const { t } = useTranslation();
  const popoverContent = (
    <div>
      {!event.isintake ? (
        <strong>{event.title}</strong>
      ) : (
        <div>
          <strong>{`${(event.job && event.job.ownr_fn) || ""} ${(event.job &&
            event.job.ownr_ln) ||
            ""}`}</strong>
          <span style={{ margin: 4 }}>
            {`${(event.job && event.job.vehicle.v_model_yr) ||
              ""} ${(event.job && event.job.vehicle.v_make_desc) ||
              ""} ${(event.job && event.job.vehicle.v_model_desc) || ""}`}
          </span>
        </div>
      )}
      {event.job ? (
        <div>
          <div>{`${t("jobs.fields.ro_number")}: ${(event.job &&
            event.job.ro_number) ||
            ""}`}</div>
          <div>
            {t("jobs.fields.clm_total")}:
            <CurrencyFormatter>
              {(event.job && event.job.clm_total) || ""}
            </CurrencyFormatter>
          </div>
          <div>{`${t("jobs.fields.clm_no")}: ${(event.job &&
            event.job.clm_no) ||
            ""}`}</div>
          <div>
            {t("jobs.fields.ownr_ea")}:{(event.job && event.job.ownr_ea) || ""}
          </div>
          <div>
            {t("jobs.fields.ownr_ph1")}:
            <PhoneFormatter>
              {(event.job && event.job.ownr_ph1) || ""}
            </PhoneFormatter>
          </div>
        </div>
      ) : null}
      {
        //TODO Add phone 1 MessagingActionTypes.
      }
      {event.job ? (
        <Link to={`/manage/jobs/${event.job && event.job.id}`}>
          <Button>{t("appointments.actions.viewjob")}</Button>
        </Link>
      ) : null}
      <Button onClick={() => handleCancel(event.id)}>
        {t("appointments.actions.cancel")}
      </Button>
      <Button>
        {
          //TODO Add reschedule Func.
        }
        {t("appointments.actions.reschedule")}
      </Button>
      {event.isintake ? (
        <Button>
          {
            //TODO Add intake func.
          }
          {t("appointments.actions.intake")}
        </Button>
      ) : null}
    </div>
  );

  return (
    <Popover content={popoverContent}>
      <div>
        {event.isintake ? (
          <div>
            <strong>{`${(event.job && event.job.ownr_fn) || ""} ${(event.job &&
              event.job.ownr_ln) ||
              ""}`}</strong>
            <span style={{ margin: 4 }}>
              {`${(event.job && event.job.vehicle.v_model_yr) ||
                ""} ${(event.job && event.job.vehicle.v_make_desc) ||
                ""} ${(event.job && event.job.vehicle.v_model_desc) || ""}`}
            </span>
          </div>
        ) : (
          <div>
            <strong>{`${event.title || ""}`}</strong>
          </div>
        )}
      </div>
    </Popover>
  );
}
