import { DownOutlined } from "@ant-design/icons";
import { Button, Card, Popover } from "antd";
import React from "react";
import { useLazyQuery } from "@apollo/client";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { QUERY_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import "./schedule-production-list.styles.scss";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
export default function ScheduleProductionList() {
  const { t } = useTranslation();
  const [callQuery, { loading, error, data }] = useLazyQuery(
    QUERY_JOBS_IN_PRODUCTION
  );

  const content = () => {
    return (
      <Card>
        <div
          onClick={(e) => e.stopPropagation()}
          className="jobs-in-production-table"
        >
          {loading ? <LoadingSkeleton /> : null}
          {error ? (
            <AlertComponent message={error.message} type="error" />
          ) : null}
          {data ? (
            <table>
              <tbody>
                {data && data.jobs
                  ? data.jobs.map((j) => (
                      <tr key={j.id}>
                        <td>
                          <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
                        </td>
                        <td><OwnerNameDisplay ownerObject={j} /></td>
                        <td>{`${j.v_model_yr || ""} ${j.v_make_desc || ""} ${
                          j.v_model_desc || ""
                        }`}</td>
                        <td>{`${j.labhrs.aggregate.sum.mod_lb_hrs || "0"} / ${
                          j.larhrs.aggregate.sum.mod_lb_hrs || "0"
                        }`}</td>
                        <td>
                          <DateTimeFormatter>
                            {j.scheduled_completion}
                          </DateTimeFormatter>
                        </td>
                      </tr>
                    ))
                  : null}
              </tbody>
            </table>
          ) : null}
        </div>
      </Card>
    );
  };

  return (
    <Popover content={content} trigger="click" placement="bottomRight">
      <Button onClick={() => callQuery()}>
        {t("appointments.labels.inproduction")}
        <DownOutlined />
      </Button>
    </Popover>
  );
}
