import React, { ReactElement, useCallback, useEffect, useMemo } from "react";
import { searchIssue } from "../../actions/fileops.actions";
import SearchBar from "../Library/SearchBar";
import T2Table from "../shared/T2Table";
import { isEmpty, isUndefined } from "lodash";
import MetadataPanel from "../shared/MetadataPanel";

export const WantedComics = (props): ReactElement => {
  // const wantedComics = useSelector(
  //   (state: RootState) => state.fileOps.wantedComics,
  // );
  useEffect(() => {
    // dispatch(
    //   searchIssue(
    //     {
    //       query: {},
    //     },
    //     {
    //       pagination: {
    //         size: 25,
    //         from: 0,
    //       },
    //       type: "wanted",
    //       trigger: "wantedComicsPage"
    //     },
    //   ),
    // );
  }, []);

  const columnData = [
    {
      header: "Comic Information",
      columns: [
        {
          header: "Details",
          id: "comicDetails",
          minWidth: 350,
          accessorFn: (data) => data,
          cell: (value) => <MetadataPanel data={value.getValue()} />,
        },
      ],
    },
    {
      header: "Download Status",
      columns: [
        {
          header: "Files",
          accessorKey: "acquisition",
          align: "right",
          cell: (props) => {
            const {
              directconnect: { downloads },
            } = props.getValue();
            return (
              <div
                style={{
                  display: "flex",
                  // flexDirection: "column",
                  justifyContent: "center",
                }}
              >
                {downloads.length > 0 ? (
                  <span className="tag is-warning">{downloads.length}</span>
                ) : null}
              </div>
            );
          },
        },
        {
          header: "Download Details",
          id: "downloadDetails",
          accessorKey: "acquisition",
          cell: (data) => (
            <ol>
              {data.getValue().directconnect.downloads.map((download, idx) => {
                return (
                  <li className="is-size-7" key={idx}>
                    {download.name}
                  </li>
                );
              })}
            </ol>
          ),
        },
        {
          header: "Type",
          id: "dcc",
        },
      ],
    },
  ];

  /**
   * Pagination control that fetches the next x (pageSize) items
   * based on the y (pageIndex) offset from the Elasticsearch index
   * @param {number} pageIndex
   * @param {number} pageSize
   * @returns void
   *
   **/
  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
    dispatch(
      searchIssue(
        {
          query: {},
        },
        {
          pagination: {
            size: pageSize,
            from: pageSize * pageIndex + 1,
          },
          type: "wanted",
          trigger: "wantedComicsPage",
        },
      ),
    );
  }, []);

  /**
   * Pagination control that fetches the previous x (pageSize) items
   * based on the y (pageIndex) offset from the Elasticsearch index
   * @param {number} pageIndex
   * @param {number} pageSize
   * @returns void
   **/
  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
    let from = 0;
    if (pageIndex === 2) {
      from = (pageIndex - 1) * pageSize + 2 - 17;
    } else {
      from = (pageIndex - 1) * pageSize + 2 - 16;
    }
    dispatch(
      searchIssue(
        {
          query: {},
        },
        {
          pagination: {
            size: pageSize,
            from,
          },
          type: "wanted",
          trigger: "wantedComicsPage",
        },
      ),
    );
  }, []);

  return (
    <section className="container">
      <div className="section">
        <div className="header-area">
          <h1 className="title">Wanted Comics</h1>
        </div>
        {!isEmpty(wantedComics) && (
          <div>
            <div className="library">
              <T2Table
                sourceData={wantedComics}
                totalPages={wantedComics.length}
                columns={columnData}
                paginationHandlers={{
                  nextPage: nextPage,
                  previousPage: previousPage,
                }}
                // rowClickHandler={navigateToComicDetail}
              />
              {/* pagination controls */}
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

export default WantedComics;