import React from "react";
import { useQuery, useSubscription } from "@apollo/react-hooks";
//import { GET_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
import { Table, Divider, Icon } from "antd";

import {
  GET_ALL_OPEN_JOBS,
  SUBSCRIPTION_ALL_OPEN_JOBS
} from "../../graphql/jobs.queries";

export default function JobsPage() {
  const { loading, error, data } = useQuery(GET_ALL_OPEN_JOBS);

  //const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS);

  const columns = [
    {
      title: "RO #",
      dataIndex: "ro_number",
      key: "ro_number"
    },
    {
      title: "Est. #",
      dataIndex: "est_number",
      key: "est_number"
    },
    {
      title: "Status",
      dataIndex: "status",
      key: "status"
    },
    {
      title: "Customer",
      dataIndex: "customer",
      key: "customer",
      render: (text, record) => {
        return record.owner ? (
          <div>
            {record.owner.first_name} {record.owner.last_name}
          </div>
        ) : (
          "No Customer"
        );
      }
    },
    {
      title: "Vehicle",
      dataIndex: "vehicle",
      key: "vehicle",
      render: (text, record) => {
        return record.vehicle ? (
          <div>
            {record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
            {record.vehicle.v_model_desc}
          </div>
        ) : (
          "No Vehicle"
        );
      }
    },
    {
      title: "Action",
      key: "action",
      render: (text, record) => (
        <span>
          <a>Action 一 {record.ro_number}</a>
          <Divider type="vertical" />
          <a>Delete</a>
          <Divider type="vertical" />
          <a className="ant-dropdown-link">
            More actions <Icon type="down" />
          </a>
        </span>
      )
    }
  ];

  //if (loading) return "Loading";
  if (error) return `Error! ${error.message}`;
  //console.log("$$$Develop (jobs.page.jsx) | jobs", jobs);
  console.log("JobsPage Rendering...");

  return (
    <div>
      <Table
        loading={loading}
        pagination={{ position: "bottom" }}
        columns={columns.map(item => ({ ...item }))}
        rowKey="id"
        dataSource={data ? data.jobs : null}
      />
    </div>
  );
}