import { useQuery } from "@apollo/client/react";
import { Col, Row, Skeleton, Timeline, Typography } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { GET_JOB_LINE_ORDERS } from "../../graphql/jobs.queries";
import { selectTechnician } from "../../redux/tech/tech.selectors.js";
import { DateFormatter } from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician
});

const mapDispatchToProps = () => ({});

export default connect(mapStateToProps, mapDispatchToProps)(JobLinesExpanderSimple);

export function JobLinesExpanderSimple({ jobline, jobid, technician }) {
  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 title={error.message} type="error" />;

  return (
    <Row>
      <Col span={24}>
        <Typography.Title level={4}>{t("parts_orders.labels.parts_orders")}</Typography.Title>
        <Timeline
          items={
            data.parts_order_lines.length > 0
              ? data.parts_order_lines.map((line) => ({
                  key: line.id,
                  children: (
                    <Row wrap>
                      <Col span={4}>
                        {!technician ? (
                          <>
                            <Link to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}>
                              {line.parts_order.order_number}
                            </Link>
                          </>
                        ) : (
                          `${line.parts_order.order_number}`
                        )}
                      </Col>
                      <Col span={4}>
                        <DateFormatter>{line.parts_order.order_date}</DateFormatter>
                      </Col>
                      <Col span={4}>{line.parts_order.vendor.name}</Col>
                      {line.backordered_eta ? (
                        <Col span={4}>
                          <span>
                            {`${t("parts_orders.fields.backordered_eta")}: `}
                            <DateFormatter>{line.backordered_eta}</DateFormatter>
                          </span>
                        </Col>
                      ) : null}
                    </Row>
                  )
                }))
              : [
                  {
                    key: "no-orders",
                    children: t("parts_orders.labels.notyetordered")
                  }
                ]
          }
        />
      </Col>
    </Row>
  );
}
