import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import SimpleDialog from "../SimpleDialog";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Button from "@material-ui/core/Button";
import EditIcon from "@material-ui/icons/Edit";
var useStyles = makeStyles({
  table: {}
});
var hotkeyIconStyle = {
  marginLeft: 8,
  width: 16,
  height: 16
};
export default (function (_ref) {
  var open = _ref.open,
      onClose = _ref.onClose,
      onChangeHotkey = _ref.onChangeHotkey,
      hotkeyList = _ref.hotkeyList,
      onClearHotkeys = _ref.onClearHotkeys;
  var classes = useStyles();

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      selectedHotKey = _useState2[0],
      setSelectedHotKey = _useState2[1];

  var _useState3 = useState({}),
      _useState4 = _slicedToArray(_useState3, 2),
      _useState4$ = _useState4[0],
      modifier = _useState4$.modifier,
      key = _useState4$.key,
      setCurrentKeyCombo = _useState4[1];

  useEffect(function () {
    if (!selectedHotKey) return;

    function keyListener(e) {
      if (["shift", "ctrl", "cmd", "alt"].includes(e.key.toLowerCase())) {
        setCurrentKeyCombo({
          modifier: e.key.toLowerCase(),
          key: key
        });
      }

      if (e.key.length === 1) {
        setCurrentKeyCombo({
          modifier: modifier,
          key: e.key.toLowerCase()
        });
      }
    }

    window.addEventListener("keydown", keyListener);
    return function () {
      window.removeEventListener("keydown", keyListener);
    };
  }, [selectedHotKey, key, modifier, setCurrentKeyCombo]);
  useEffect(function () {
    if (!key) return;

    if (modifier) {
      onChangeHotkey(selectedHotKey, "".concat(modifier, " + ").concat(key));
    } else {
      onChangeHotkey(selectedHotKey, key);
    }

    setCurrentKeyCombo({});
    setSelectedHotKey(null);
  }, [modifier, key, onChangeHotkey, selectedHotKey]);
  return /*#__PURE__*/React.createElement(SimpleDialog, {
    title: "Manage Keyboard Shortcuts",
    actions: [{
      text: "Clear Hotkeys",
      onClick: onClearHotkeys
    }],
    open: open,
    onClose: onClose
  }, /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
    className: classes.table,
    "aria-label": "simple table"
  }, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, null, "Action"), /*#__PURE__*/React.createElement(TableCell, {
    align: "right"
  }, "Keyboard Shortcut"))), /*#__PURE__*/React.createElement(TableBody, null, hotkeyList.map(function (hotkey) {
    return /*#__PURE__*/React.createElement(TableRow, {
      key: hotkey.description
    }, /*#__PURE__*/React.createElement(TableCell, null, hotkey.description), /*#__PURE__*/React.createElement(TableCell, {
      align: "right"
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        if (selectedHotKey !== hotkey) {
          setSelectedHotKey(hotkey);
          setCurrentKeyCombo({});
          return;
        }
      },
      style: {
        minWidth: 0
      }
    }, /*#__PURE__*/React.createElement("b", null, selectedHotKey === hotkey ? modifier || key ? "<".concat(modifier ? modifier + "+" : "").concat(key || "???", ">") : "<Press Any Key>" : hotkey.binding), selectedHotKey === hotkey ? /*#__PURE__*/React.createElement(EditIcon, {
      style: hotkeyIconStyle
    }) : /*#__PURE__*/React.createElement(EditIcon, {
      style: hotkeyIconStyle
    }))));
  })))));
});