import React, { ReactElement, useCallback, useContext, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  fetchComicBookMetadata,
  toggleImportQueueStatus,
} from "../actions/fileops.actions";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Loader from "react-loader-spinner";

interface IProps {
  matches?: unknown;
  fetchComicMetadata?: any;
  path: string;
  covers?: any;
}

/**
 * Returns the average of two numbers.
 *
 * @remarks
 * This method is part of the {@link core-library#Statistics | Statistics subsystem}.
 *
 * @param x - The first input number
 * @param y - The second input number
 * @returns The arithmetic mean of `x` and `y`
 *
 * @beta
 */

export const Import = (props: IProps): ReactElement => {
  const dispatch = useDispatch();
  const libraryQueueResults = useSelector(
    (state: RootState) => state.fileOps.librarySearchResultCount,
  );
  const libraryQueueImportStatus = useSelector(
    (state: RootState) => state.fileOps.IMSCallInProgress,
  );
  const [isImportQueuePaused, setImportQueueStatus] = useState(false);
  const initiateImport = useCallback(() => {
    if (typeof props.path !== "undefined") {
      dispatch(fetchComicBookMetadata(props.path));
    }
  }, [dispatch]);

  const toggleImport = useCallback(() => {
    setImportQueueStatus(!isImportQueuePaused);
    if (isImportQueuePaused === false) {
      dispatch(toggleImportQueueStatus({ action: "resume" }));
    } else if (isImportQueuePaused === true) {
      dispatch(toggleImportQueueStatus({ action: "pause" }));
    }
  }, [isImportQueuePaused]);
  const pauseIconText = (
    <>
      <i className="fa-solid fa-pause mr-2"></i> Pause Import
    </>
  );
  const playIconText = (
    <>
      <i className="fa-solid fa-play mr-2"></i> Resume Import
    </>
  );
  return (
    <div className="container">
      <section className="section is-small">
        <h1 className="title">Import</h1>
        <article className="message is-dark">
          <div className="message-body">
            <p className="mb-2">
              <span className="tag is-medium is-info is-light">
                Import Only
              </span>
              will add comics identified from the mapped folder into the local
              db.
            </p>
            <p>
              <span className="tag is-medium is-info is-light">
                Import and Tag
              </span>
              will scan the ComicVine, shortboxed APIs and import comics from
              the mapped folder with the additional metadata.
            </p>
          </div>
        </article>
        <p className="buttons">
          <button
            className={
              libraryQueueImportStatus
                ? "button is-loading is-medium"
                : "button is-medium"
            }
            onClick={initiateImport}
          >
            <span className="icon">
              <i className="fas fa-file-import"></i>
            </span>
            <span>Import Only</span>
          </button>

          <button className="button is-medium">
            <span className="icon">
              <i className="fas fa-tag"></i>
            </span>
            <span>Import and Tag</span>
          </button>
        </p>
        <div className="columns is-multiline">
          <div className="column is-one-fifth">
            <div className="box control-palette">
              <span className="is-size-2 has-text-weight-bold">
                {JSON.stringify(libraryQueueResults, null, 2)}
              </span>
            </div>
            <div className="is-half">
              <div className="content">
                <div className="control">
                  <button
                    className="button is-warning is-light"
                    onClick={toggleImport}
                  >
                    {!isImportQueuePaused ? pauseIconText : playIconText}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Import;