import { WarningOutlined } from "@ant-design/icons";
import { PageHeader } from "@ant-design/pro-layout";
import { Alert, Descriptions, Skeleton, Space, Tooltip } from "antd";
import React from "react";
import { DateFormat, WhichRulesetToApply } from "../../../util/constants";
import dayjs from "../../../util/day.js";
import CurrencyFormatterAtom from "../../atoms/currency-formatter/currency-formatter.atom";
import DeleteJobAtom from "../../atoms/delete-job/delete-job.atom";
import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
import TimeAgoFormatter from "../../atoms/time-ago-formatter/time-ago-formatter.atom";
import VehicleGroupAlertAtom from "../../atoms/vehicle-group-alert/vehicle-group-alert.atom";
import CloseDateDisplayMolecule from "../close-date-display/close-date-display.molecule";
import JobGroupMolecule from "../job-group/job-group.molecule";

export default function JobsDetailDescriptionMolecule({ loading, job }) {
  if (loading) return <Skeleton active />;

  if (!job)
    return (
      <ErrorResultAtom title="Error displaying job header data." errorMessage="It looks like this job doesn't exist." />
    );
  const ruleSetToApply = WhichRulesetToApply(job.close_date);
  return (
    <div>
      <PageHeader
        ghost={false}
        title={job.clm_no}
        subTitle={job.ins_co_nm}
        extra={[
          job.requires_reimport && (
            <Tooltip
              key="reimport"
              title="There are different rules that apply for claims submitted in different periods. In order to ensure accurate calculation, you must import this job again to determine which parts are eligible for parts autonomy. This happened because the R4P date was changed between these periods."
            >
              <Alert
                type="warning"
                showIcon
                message="A change in R4P date changed the applicable rules. Reimport this job for accurate scoring."
              />
            </Tooltip>
          ),
          <DeleteJobAtom key="delete" jobId={job.id} />
        ]}
      >
        <Descriptions column={{ xxl: 5, xl: 4, lg: 3, md: 2, sm: 1, xs: 1 }}>
          <Descriptions.Item label="Owner">{`${job.ownr_fn} ${job.ownr_ln}`}</Descriptions.Item>
          <Descriptions.Item label="Vehicle">
            <VehicleGroupAlertAtom job={job} />
          </Descriptions.Item>
          <Descriptions.Item label="Claim Total">
            <CurrencyFormatterAtom>{job.clm_total}</CurrencyFormatterAtom>
          </Descriptions.Item>
          <Descriptions.Item label="Group">
            <JobGroupMolecule jobId={job.id} group={job.group} job={job} />
          </Descriptions.Item>
          <Descriptions.Item label="Age">{job.v_age}</Descriptions.Item>
          <Descriptions.Item
            label={
              <Tooltip title="This is the date you will submit for payment from MPI. This should always be the latest date in the case of supplements.">
                R4P Date
              </Tooltip>
            }
          >
            <CloseDateDisplayMolecule job={job} jobId={job.id} close_date={job.close_date} />
          </Descriptions.Item>
          <Descriptions.Item label="Last Updated">
            <TimeAgoFormatter>{job.updated_at}</TimeAgoFormatter>
          </Descriptions.Item>
          <Descriptions.Item label="# RPS Eligible Parts">
            {job && job.joblines.filter((i) => !i.ignore && i.db_ref !== "900511").length}
          </Descriptions.Item>
          <Descriptions.Item label="Loss Date">
            {job.loss_date ? dayjs(job.loss_date).format(DateFormat) : "No Loss Date"}
          </Descriptions.Item>
          <Descriptions.Item label="Mileage">
            <Space size="small">
              {job.v_mileage}
              {ruleSetToApply === "V3" && job.v_mileage < 20000 && (
                <Tooltip title="Vehicle is under 20,000 KMs. No expected savings.">
                  <WarningOutlined style={{ color: "seagreen" }} />
                </Tooltip>
              )}
            </Space>
          </Descriptions.Item>
        </Descriptions>
      </PageHeader>
    </div>
  );
}
