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>
      <div>{`${t("jobs.fields.ro_number")}: ${event.job.ro_number}`}</div>
      <div>
        {t("jobs.fields.clm_total")}:
        <CurrencyFormatter>{event.job.clm_total}</CurrencyFormatter>
      </div>
      <div>{`${t("jobs.fields.clm_no")}: ${event.job.clm_no}`}</div>
      <div>
        {t("jobs.fields.ownr_ea")}:{event.job.ownr_ea}
      </div>
      <div>
        {t("jobs.fields.ownr_ph1")}:
        <PhoneFormatter>{event.job.ownr_ph1}</PhoneFormatter>
      </div>
      <Link to={`/manage/jobs/${event.job.id}`}>
        <Button>{t("appointments.actions.viewjob")}</Button>
      </Link>
      <Button onClick={() => handleCancel(event.id)}>
        {t("appointments.actions.cancel")}
      </Button>
      <Button>
        {
          //TODO: Add reschedule Func.
        }
        {t("appointments.actions.reschedule")}
      </Button>
      <Button>
        {
          //TODO: Add intake func.
        }
        {t("appointments.actions.intake")}
      </Button>
    </div>
  );

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