// @flow

import React, { useState, useContext } from 'react';
import {
  DIJKSTRA,
  BELLMAN_FORD,
  A_STAR,
  DFS,
  BFS,
  DELAY_SLOWEST,
  DELAY_SLOW,
  DELAY_NORMAL,
  DELAY_FAST,
  DELAY_FASTEST,
} from 'constants.js';
import { Context, type ContextType } from 'Provider';
import PathFinder from 'algorithms/index';
import { FaPause, FaPlay } from 'react-icons/fa';
import './Header.scss';

const Header = () => {
  const [type, setType] = useState<string>(DIJKSTRA);
  const [pause, setPause] = useState<boolean>(false);
  const context = useContext<ContextType>(Context);
  const {
    begin,
    end,
    updateItem,
    delay,
    pathFinder,
    clear,
    clearPath,
    board,
    isVisualized,
    setIsPathExist,
    setIsVisualized,
    setIsHelped,
  } = context;

  const onAlgoChange = (e: ElementEvent<HTMLSelectElement>) => {
    setType(e.target.value);
  };

  const onDelayChange = (e: ElementEvent<HTMLSelectElement>) => {
    delay.current = Number(e.target.value);
  };

  const onVisualize = () => {
    if (isVisualized) return;
    clearPath();
    setIsVisualized(true);

    pathFinder.current = new PathFinder[type]({
      begin: begin.current,
      end: end.current,
      updateItem,
      board: board.current,
    });
    const isPossiblePath = pathFinder.current.execute();
    setIsPathExist(isPossiblePath);
  };

  const onClearAll = () => {
    if (isVisualized && !pause) return;
    if (pause) setPause(false);
    setIsVisualized(false);

    clear();
  };

  const onClearPath = () => {
    if (isVisualized && !pause) return;
    if (pause) setPause(false);
    setIsVisualized(false);

    clearPath();
  };

  const onPause = () => {
    if (pause) {
      setPause(false);
      pathFinder.current.resumeTimers();
    } else {
      setPause(true);
      pathFinder.current.stopTimers();
    }
  };

  const onHelp = () => {
    setIsHelped(true);
  };

  return (
    <div className="content-header">
      <select
        className="content-header__select"
        onChange={onAlgoChange}
        id="algorithm"
        disabled={isVisualized}
      >
        <option value={DIJKSTRA} defaultChecked>
          Dijkstra
        </option>
        <option value={BELLMAN_FORD}>Bellman-Ford</option>
        <option value={BFS}>0-1 BFS</option>
        <option value={DFS}>DFS</option>
        <option value={A_STAR}>A*</option>
      </select>
      <select
        className="content-header__select"
        onChange={onDelayChange}
        defaultValue={300}
        disabled={isVisualized}
      >
        <option value={DELAY_SLOW}>slowest</option>
        <option value={DELAY_SLOWEST}>slow</option>
        <option value={DELAY_NORMAL}>normal</option>
        <option value={DELAY_FAST}>fast</option>
        <option value={DELAY_FASTEST}>fastest</option>
      </select>
      <button
        className="content-header__button"
        onClick={onVisualize}
        disabled={isVisualized}
        type="button"
      >
        Visualize!
      </button>
      <button
        className="content-header__button"
        onClick={onClearAll}
        disabled={isVisualized && !pause}
        type="button"
      >
        Clear All
      </button>
      <button
        className="content-header__button"
        onClick={onClearPath}
        disabled={isVisualized && !pause}
        type="button"
      >
        Clear Path
      </button>
      <button
        className="content-header__button--pause"
        onClick={onPause}
        disabled={!isVisualized}
        type="button"
      >
        {pause ? <FaPlay /> : <FaPause />}
      </button>
      <button
        className="content-header__button--usage"
        onClick={onHelp}
        disabled={isVisualized && !pause}
        type="button"
      >
        How to use?
      </button>
    </div>
  );
};

export default Header;