import React from "react";
import {
  ButtonGroup,
  Button,
  Slider,
  Select,
  ListSubheader,
  MenuItem as SelectItem,
  Typography,
  Switch,
  Grid,
  IconButton
} from "@material-ui/core";
import { useDispatch, useSelector } from "react-redux";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faPlay,
  faStop,
  faRedo,
  faFastForward,
  faPause
} from "@fortawesome/free-solid-svg-icons";
import { MenuSection } from "./MenuSection";
import { MenuItem } from "./MenuItem";
import { useAlgorithmInfo } from "../hooks";
import * as actions from "../store/actions";
import * as selectors from "../store/selectors";

export const MenuSolverControls = ({
  onStart,
  onPause,
  onUnPause,
  onFullSpeed,
  onStop
}) => {
  const dispatch = useDispatch();
  const algorithms = useAlgorithmInfo();
  const selectedAlgorithm = useSelector(selectors.selectAlgorithm);
  const delay = useSelector(selectors.selectDelay);
  const evaluatingDetailLevel = useSelector(
    selectors.selectEvaluatingDetailLevel
  );
  const maxEvaluatingDetailLevel = useSelector(
    selectors.selectMaxEvaluatingDetailLevel
  );
  const showBestPath = useSelector(selectors.selectShowBestPath);
  const running = useSelector(selectors.selectRunning);
  const fullSpeed = useSelector(selectors.selectFullSpeed);
  const paused = useSelector(selectors.selectPaused);
  const definingPoints = useSelector(selectors.selectDefiningPoints);

  const onAlgorithmChange = event => {
    event.persist();
    onStop();
    const solverKey = event.target.value;
    const { defaults } = algorithms.find(alg => alg.solverKey === solverKey);
    dispatch(actions.setAlgorithm(solverKey, defaults));
  };

  const onDelayChange = (_, newDelay) => {
    dispatch(actions.setDelay(newDelay));
  };

  const onEvaluatingDetailLevelChange = (onLevel, offLevel) => event => {
    const level = event.target.checked ? onLevel : offLevel;
    dispatch(actions.setEvaluatingDetailLevel(level));
  };

  const onShowBestPathChange = event => {
    dispatch(actions.setShowBestPath(event.target.checked));
  };

  const onReset = () => {
    onStop();
    dispatch(actions.resetSolverState());
  };

  const onShowAlgInfo = () => {
    dispatch(actions.toggleAlgInfoOpen());
  };

  return (
    <>
      <MenuSection highlight>
        <MenuItem title="Algorithm">
          <Grid container alignItems="center">
            <Grid item xs={11}>
              <Select
                value={selectedAlgorithm}
                onChange={onAlgorithmChange}
                disabled={running || paused || definingPoints}
                variant="outlined"
                fullWidth
                margin="dense"
              >
                <ListSubheader>Heuristic Construction</ListSubheader>
                {algorithms
                  .filter(alg => alg.type === "heuristic-construction")
                  .map(alg => (
                    <SelectItem value={alg.solverKey} key={alg.solverKey}>
                      {alg.friendlyName}
                    </SelectItem>
                  ))}
                <ListSubheader>Exhaustive</ListSubheader>
                {algorithms
                  .filter(alg => alg.type === "exhaustive")
                  .map(alg => (
                    <SelectItem value={alg.solverKey} key={alg.solverKey}>
                      {alg.friendlyName}
                    </SelectItem>
                  ))}
              </Select>
            </Grid>
          </Grid>
        </MenuItem>

        <MenuItem title="Controls">
          <ButtonGroup
            fullWidth
            variant="outlined"
            color="secondary"
            size="large"
          >
            <Button
              onClick={paused ? onUnPause : running ? onPause : onStart}
              disabled={definingPoints || fullSpeed}
            >
              <FontAwesomeIcon
                icon={paused ? faPlay : running ? faPause : faPlay}
                width="0"
              />
            </Button>


            <Button onClick={onReset} disabled={running || definingPoints}>
              <FontAwesomeIcon icon={faRedo} width="0" />
            </Button>
          </ButtonGroup>
        </MenuItem>
        <MenuItem title="Delay">
          <Slider
            value={delay}
            onChange={onDelayChange}
            step={25}
            min={0}
            max={250}
            valueLabelDisplay="auto"
            color="secondary"
            disabled={definingPoints || fullSpeed}
          />
        </MenuItem>
      </MenuSection>

    </>
  );
};