import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

var _dec, _dec2, _class, _class2, _temp;

import React, { PureComponent } from 'react';
import { withTheme } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import { style } from 'typestyle';
import Button from '@material-ui/core/Button';
import Popover from '@material-ui/core/Popover';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Divider from '@material-ui/core/Divider';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import AVPlayCircleOutline from '@material-ui/icons/PlayCircleOutline';
import NavigationRefresh from '@material-ui/icons/Refresh';
import NavigationArrowDropDown from '@material-ui/icons/ArrowDropDown';
import { fade } from '@material-ui/core/styles/colorManipulator';
import withFiles from '../../store/withFiles';
import { debounce } from 'lodash';
var cn = {
  currentSecondaryText: style({
    marginLeft: 8,
    fontSize: '.8rem',
    opacity: 0.6
  }),
  menu: style({
    maxHeight: 300
  }),
  href: style({
    marginLeft: 8,
    fontSize: '.8rem',
    opacity: 0.6
  })
};

var getCn = function getCn(props) {
  return {
    dropDown: style({
      marginLeft: props.theme.spacing.unit,
      minWidth: 0,
      paddingLeft: 0,
      paddingRight: 0
    }),
    current: style({
      marginTop: -8,
      marginBottom: -8,
      backgroundColor: fade(props.theme.palette.primary.main, 0.1)
    }),
    button: style({
      marginRight: props.theme.spacing.unit
    })
  };
};

var PlayMenu = (_dec = withTheme(), _dec2 = withFiles({
  watch: '**/*.html'
}), _dec(_class = _dec2(_class = (_temp = _class2 =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(PlayMenu, _PureComponent);

  function PlayMenu() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, PlayMenu);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(PlayMenu)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
      open: false,
      anchorEl: null,
      // [...{ title, href(name) }]
      entries: [],
      hasMultiEntry: false
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleShowPopover", function (event) {
      var parser = new DOMParser();

      var entries = _this.props.files.map(function (file) {
        var doc = parser.parseFromString(file.text, 'text/html');
        var titleNode = doc.querySelector('title');
        var title = titleNode && titleNode.textContent;
        return {
          title: title || file.name,
          href: file.name
        };
      }).sort(function (a, b) {
        return a.title > b.title ? 1 : -1;
      });

      _this.setState({
        open: true,
        anchorEl: event.currentTarget,
        entries: entries
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handlePlay", debounce(function () {
      _this.props.runApp();
    }, 5000, {
      leading: true,
      trailing: false
    }));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleItemTouchTap", debounce(function (event, menuItem) {
      _this.props.runApp(menuItem.props.value);

      _this.setState({
        open: false
      });
    }, 5000, {
      leading: true,
      trailing: false
    }));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleRequestClose", function () {
      _this.setState({
        open: false
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderMenu", function (entry) {
      return React.createElement(MenuItem, {
        key: entry.href,
        value: entry.href
      }, React.createElement("span", null, entry.title), React.createElement("span", {
        style: cn.href
      }, entry.href));
    });

    return _this;
  }

  _createClass(PlayMenu, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var dcn = getCn(this.props);
      var localization = this.props.localization;
      var current = this.state.entries.find(function (item) {
        return item.href === _this2.props.href;
      });
      return React.createElement(React.Fragment, null, React.createElement(Button, {
        variant: "contained",
        color: this.props.hasChanged ? 'primary' : 'default',
        className: dcn.button,
        onClick: this.handlePlay
      }, React.createElement(AVPlayCircleOutline, {
        fontSize: "small"
      }), localization.editorCard.play), this.state.hasMultiEntry ? React.createElement(Button, {
        variant: "text",
        color: "primary",
        className: dcn.dropDown,
        onClick: this.handleShowPopover
      }, React.createElement(NavigationArrowDropDown, null)) : null, React.createElement(Popover, {
        open: this.state.open,
        anchorEl: this.state.anchorEl,
        anchorOrigin: {
          horizontal: 'right',
          vertical: 'bottom'
        },
        targetOrigin: {
          horizontal: 'right',
          vertical: 'top'
        },
        onClose: this.handleRequestClose
      }, React.createElement(Menu, {
        value: this.state.href,
        className: cn.menu,
        onItemTouchTap: this.handleItemTouchTap
      }, current && [React.createElement(MenuItem, {
        key: "current",
        value: current.href
      }, React.createElement(ListItemIcon, null, React.createElement(NavigationRefresh, null)), React.createElement(ListItemText, {
        inset: true,
        primary: current.title,
        secondary: React.createElement("span", {
          className: cn.currentSecondaryText
        }, "Ctrl + Space")
      }), current.title), React.createElement(Divider, {
        key: "divider"
      })], this.state.entries.map(this.renderMenu))));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, state) {
      var hasMultiEntry = props.files.length > 1;

      if (state.hasMultiEntry !== hasMultiEntry) {
        return {
          hasMultiEntry: hasMultiEntry
        };
      }

      return null;
    }
  }]);

  return PlayMenu;
}(PureComponent), _defineProperty(_class2, "propTypes", {
  theme: PropTypes.object.isRequired,
  runApp: PropTypes.func.isRequired,
  href: PropTypes.string.isRequired,
  localization: PropTypes.object.isRequired,
  hasChanged: PropTypes.bool.isRequired,
  // Injected by withFiles (for JSX)
  files: PropTypes.array.isRequired
}), _temp)) || _class) || _class);
export { PlayMenu as default };