import { SyncOutlined } from "@ant-design/icons";
import { useQuery } from "@apollo/client";
import { Button, List, Space, Spin, Typography } from "antd";
import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroller";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_ALL_JOBS_PAGINATED } from "../../../graphql/jobs.queries";
import { setSelectedJobId } from "../../../redux/application/application.actions";
import { selectSelectedJobId } from "../../../redux/application/application.selectors";
import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
import TimeAgoFormatter from "../../atoms/time-ago-formatter/time-ago-formatter.atom";
import "./jobs-list.organism.styles.scss";
const mapStateToProps = createStructuredSelector({
  selectedJobId: selectSelectedJobId,
});
const mapDispatchToProps = (dispatch) => ({
  setSelectedJobId: (jobId) => dispatch(setSelectedJobId(jobId)),
});

const limit = 20;
export function JobsTableOrganism({ selectedJobId, setSelectedJobId }) {
  const [state, setState] = useState({ hasMore: true });

  const { loading, error, data, refetch, fetchMore } = useQuery(
    QUERY_ALL_JOBS_PAGINATED,
    {
      variables: {
        offset: 0,
        limit: limit,
        order: [{ updated_at: "desc" }],
      },
    }
  );

  const handleInfiniteOnLoad = (page) => {
    fetchMore({
      variables: {
        offset: limit * page,
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) {
          console.log("No more results. Fetch More was empty.");
          setState({ ...state, hasMore: false });
          return prev;
        }

        const newCache = Object.assign({}, prev, {
          jobs: [...prev.jobs, ...fetchMoreResult.jobs],
        });

        if (
          newCache.jobs.length >= data &&
          data.jobs_aggregate.aggregate.count
        ) {
          console.log("No more results.");
          setState({ ...state, hasMore: false });
        }

        return newCache;
      },
    });
  };

  const handleSelect = (jobId) => {
    setSelectedJobId(jobId);
  };

  if (error)
    return (
      <ErrorResultAtom
        title="Error fetching Jobs data."
        errorMessage={JSON.stringify(error)}
      />
    );

  return (
    <div className="jobs-list-container">
      <Button onClick={() => refetch()}>
        <SyncOutlined />
      </Button>
      <div className="jobs-list-infinite-container">
        <InfiniteScroll
          pageStart={0}
          loadMore={handleInfiniteOnLoad}
          hasMore={!loading && state.hasMore}
          useWindow={false}
        >
          <List
            dataSource={data ? data.jobs : []}
            renderItem={(item) => (
              <List.Item
                className="jobs-list-item"
                key={item.id}
                onClick={() => handleSelect(item.id)}
              >
                <div
                  className={`jobs-list-item-content ${
                    item.id === selectedJobId
                      ? "jobs-list-item-content-selected"
                      : ""
                  }`}
                >
                  <div style={{ display: "flex" }}>
                    <Typography.Title level={4} style={{ flex: 1 }}>
                      {`${item.clm_no}${
                        item.ins_co_nm ? ` | ${item.ins_co_nm}` : ""
                      }`}
                    </Typography.Title>
                    <span className="job-list-last-updated-time">
                      <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
                    </span>
                  </div>
                  <Space>
                    <span>{`${item.ownr_fn} ${item.ownr_ln}`}</span>
                    <span>
                      {`${item.v_model_yr} ${item.v_makedesc} ${item.v_model} ${item.v_vin}`}
                    </span>
                  </Space>
                </div>
              </List.Item>
            )}
          >
            {loading && state.hasMore && (
              <div>
                <Spin />
              </div>
            )}
          </List>
        </InfiniteScroll>
      </div>
      {`${data ? data.jobs.length : 0} jobs loaded. ${
        data ? data.jobs_aggregate.aggregate.count : 0
      } total jobs.`}
    </div>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsTableOrganism);
