import { useQuery } from "@apollo/client";
import { Col, Divider, Row, Skeleton, Space, Timeline, Typography } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { GET_JOB_LINE_ORDERS } from "../../graphql/jobs.queries";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { DateFormatter } from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";

export default function JobLinesExpander({ jobline, jobid }) {
  const { t } = useTranslation();
  const { loading, error, data } = useQuery(GET_JOB_LINE_ORDERS, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
    variables: {
      joblineid: jobline.id,
    },
  });

  if (loading) return <Skeleton />;
  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
    <Row>
      <Col md={24} lg={12}>
        <Typography.Title level={4}>
          {t("parts_orders.labels.parts_orders")}
        </Typography.Title>
        <Timeline>
          {data.parts_order_lines.length > 0 ? (
            data.parts_order_lines.map((line) => (
              <Timeline.Item key={line.id}>
                <Space split={<Divider type="vertical" />} wrap>
                  <Link
                    to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
                  >
                    {line.parts_order.order_number}
                  </Link>
                  <DateFormatter>{line.parts_order.order_date}</DateFormatter>
                  {line.parts_order.vendor.name}
                </Space>
              </Timeline.Item>
            ))
          ) : (
            <Timeline.Item>
              {t("parts_orders.labels.notyetordered")}
            </Timeline.Item>
          )}
        </Timeline>
      </Col>
      <Col md={24} lg={12}>
        <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
        <Timeline>
          {data.billlines.length > 0 ? (
            data.billlines.map((line) => (
              <Timeline.Item key={line.id}>
                <Row wrap>
                  <Col span={4}>
                    <Link
                      to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}
                    >
                      {line.bill.invoice_number}
                    </Link>
                  </Col>
                  <Col span={4}>
                    <span>
                      {`${t("billlines.fields.actual_price")}: `}
                      <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
                    </span>
                  </Col>
                  <Col span={4}>
                    <span>
                    {`${t("billlines.fields.actual_cost")}: `}
                      <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
                    </span>
                  </Col>
                  <Col span={4}>
                    <DateFormatter>{line.bill.date}</DateFormatter>
                  </Col>
                  <Col span={4}> {line.bill.vendor.name}</Col>
                </Row>
              </Timeline.Item>
            ))
          ) : (
            <Timeline.Item>
              {t("parts_orders.labels.notyetordered")}
            </Timeline.Item>
          )}
        </Timeline>
      </Col>
    </Row>
  );
}
