import {
  Avatar,
  Button,
  Checkbox,
  Descriptions,
  notification,
  PageHeader,
  Tag
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import Moment from "react-moment";
import { Link } from "react-router-dom";
import CarImage from "../../assets/car.svg";
import CurrencyFormatter from "../../utils/CurrencyFormatter";

export default function JobsDetailHeader({
  job,
  mutationConvertJob,
  refetch,
  handleSubmit,
  scheduleModalState
}) {
  const { t } = useTranslation();
  const [scheduleModalVisible, setscheduleModalVisible] = scheduleModalState;

  const tombstoneTitle = (
    <div>
      <Avatar size="large" alt="Vehicle Image" src={CarImage} />
      {`${t("jobs.fields.ro_number")} ${
        job.ro_number ? job.ro_number : t("general.labels.na")
      }`}
    </div>
  );

  const tombstoneSubtitle = (
    <div>
      <Tag color="red">
        {job.owner ? (
          <Link to={`/manage/owners/${job.owner.id}`}>
            {`${job.ownr_co_nm || ""}${job.ownr_fn || ""} ${job.ownr_ln || ""}`}
          </Link>
        ) : (
          t("jobs.errors.noowner")
        )}
      </Tag>

      <Tag color="green">
        {job.vehicle ? (
          <Link to={`/manage/vehicles/${job.vehicle.id}`}>
            {job.vehicle.v_model_yr || t("general.labels.na")}{" "}
            {job.vehicle.v_make_desc || t("general.labels.na")}{" "}
            {job.vehicle.v_model_desc || t("general.labels.na")} |{" "}
            {job.vehicle.plate_no || t("general.labels.na")} |{" "}
            {job.vehicle.v_vin || t("general.labels.na")}
          </Link>
        ) : null}
      </Tag>
    </div>
  );

  const menuExtra = [
    <Button
      key="schedule"
      //TODO: Enabled logic based on status.
      onClick={() => {
        setscheduleModalVisible(true);
      }}
    >
      {t("jobs.actions.schedule")}
    </Button>,
    <Button
      key="convert"
      type="dashed"
      disabled={job.converted}
      onClick={() => {
        mutationConvertJob({
          variables: { jobId: job.id }
        }).then(r => {
          refetch();

          notification["success"]({
            message: t("jobs.successes.converted")
          });
        });
      }}
    >
      {t("jobs.actions.convert")}
    </Button>,
    <Button
      type="primary"
      key="submit"
      htmlType="button"
      onClick={handleSubmit}
    >
      {t("general.labels.save")}
    </Button>
  ];

  return (
    <PageHeader
      style={{
        border: "1px solid rgb(235, 237, 240)"
      }}
      title={tombstoneTitle}
      subTitle={tombstoneSubtitle}
      tags={
        <span key="job-status">
          {job.job_status ? (
            <Tag color="blue">{job.job_status.name}</Tag>
          ) : null}
        </span>
      }
      extra={menuExtra}
    >
      <Descriptions size="small" column={5}>
        <Descriptions.Item label={t("jobs.fields.repairtotal")}>
          <CurrencyFormatter>{job.claim_total}</CurrencyFormatter>
        </Descriptions.Item>

        <Descriptions.Item label={t("jobs.fields.customerowing")}>
          ##NO BINDING YET##
        </Descriptions.Item>

        <Descriptions.Item label={t("jobs.fields.specialcoveragepolicy")}>
          <Checkbox checked={job.special_coverage_policy} />
        </Descriptions.Item>

        <Descriptions.Item label={t("jobs.fields.scheduled_completion")}>
          {job.scheduled_completion ? (
            <Moment format="MM/DD/YYYY">{job.scheduled_completion}</Moment>
          ) : null}
        </Descriptions.Item>

        <Descriptions.Item label={t("jobs.fields.servicecar")}>
          {job.service_car}
        </Descriptions.Item>
      </Descriptions>
    </PageHeader>
  );
}