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, _class, _class2, _temp;

import { Button, Collapse, List, ListItem, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip } from '@material-ui/core';
import { Add, ExpandLess, ExpandMore } from '@material-ui/icons';
import PropTypes from 'prop-types';
import React from 'react';
import { classes, style } from 'typestyle';
import withAsset from '../../store/withAsset';
import findAssetButton from './findAssetButton';
import { getScopeNames } from './getScopeNames';
var iconSize = 32;
var padding = 2;
export var assetLinkWidth = iconSize + padding * 2;
export var cn = {
  button: style({
    minWidth: assetLinkWidth,
    padding: padding
  }),
  icon: style({
    maxHeight: iconSize,
    width: iconSize
  }),
  title: style({
    justifyContent: 'space-between'
  })
};
var AssetLink = (_dec = withAsset({}), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_React$Component) {
  _inherits(AssetLink, _React$Component);

  function AssetLink() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, AssetLink);

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

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

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
      name: '',
      iconUrl: '',
      insertCode: '',
      scopeNames: [],
      anchorEl: null,
      openScopes: false
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClick", function (event) {
      if (_this.props.showPopover) {
        _this.setState({
          anchorEl: event.currentTarget
        });
      } else {
        // 選択肢を出さず、ファイルを開く
        _this.handleOpenFile();
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleToggleScopes", function () {
      _this.setState(function (prev) {
        return {
          openScopes: !prev.openScopes
        };
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleOnceMoreInsert", function (scope) {
      return function () {
        var insertCode = _this.state.insertCode;
        if (!insertCode) return;

        _this.props.insertCode({
          insertCode: insertCode
        }, scope);

        _this.handleClose();
      };
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleOpenFile", function () {
      var _this$state = _this.state,
          name = _this$state.name,
          iconUrl = _this$state.iconUrl;
      if (!name) return;

      _this.props.openFile({
        name: name,
        iconUrl: iconUrl
      });

      _this.handleClose();
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClose", function () {
      _this.setState({
        anchorEl: null,
        openScopes: false
      });

      _this.props.onClose();
    });

    return _this;
  }

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

      var _this$props = this.props,
          name = _this$props.name,
          className = _this$props.className,
          localization = _this$props.localization;
      var _this$state2 = this.state,
          iconUrl = _this$state2.iconUrl,
          insertCode = _this$state2.insertCode;
      return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
        title: localization.editorCard.edit(name)
      }, React.createElement(Button, {
        variant: "outlined",
        className: classes(className, cn.button),
        disabled: !this.state.name,
        onClick: this.handleClick
      }, iconUrl ? React.createElement("img", {
        src: iconUrl,
        alt: name,
        className: cn.icon
      }) : React.createElement("span", {
        className: cn.icon
      }, name))), React.createElement(Menu, {
        open: Boolean(this.state.anchorEl),
        anchorEl: this.state.anchorEl,
        onClose: this.handleClose
      }, React.createElement(MenuItem, {
        disabled: true,
        dense: true,
        divider: true,
        className: cn.title
      }, React.createElement("img", {
        src: iconUrl,
        className: cn.icon
      }), React.createElement("span", null, name)), React.createElement(MenuItem, {
        disabled: !insertCode,
        onClick: this.handleToggleScopes
      }, React.createElement(ListItemText, null, localization.editorCard.onceMoreInsert), this.state.openScopes ? React.createElement(ExpandLess, null) : React.createElement(ExpandMore, null)), React.createElement(Collapse, {
        in: this.state.openScopes,
        timeout: "auto",
        unmountOnExit: true
      }, React.createElement(List, {
        disablePadding: true
      }, this.state.scopeNames.map(function (scopeName) {
        return React.createElement(ListItem, {
          key: scopeName,
          button: true
        }, React.createElement(ListItemIcon, null, React.createElement(Add, null)), React.createElement(ListItemText, {
          inset: true,
          primary: scopeName,
          onClick: _this2.handleOnceMoreInsert(scopeName)
        }));
      }))), React.createElement(MenuItem, {
        disabled: !this.state.name,
        onClick: this.handleOpenFile
      }, localization.editorCard.edit(name))));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, state) {
      if (props.name !== state.name) {
        // まだ計算されていない
        var assetButton = findAssetButton(props.asset.assetPackage, props.name);

        if (assetButton) {
          return {
            name: props.name,
            iconUrl: assetButton.iconUrl,
            insertCode: assetButton.insertCode,
            scopeNames: getScopeNames(props.asset.assetPackage, assetButton).filter(props.isAvailableScope)
          };
        }
      }

      return null;
    }
  }]);

  return AssetLink;
}(React.Component), _defineProperty(_class2, "propTypes", {
  name: PropTypes.string.isRequired,
  className: PropTypes.string.isRequired,
  showPopover: PropTypes.bool.isRequired,
  openFile: PropTypes.func.isRequired,
  insertCode: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
  isAvailableScope: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  // Injected by withAsset
  asset: PropTypes.object.isRequired
}), _temp)) || _class);
export { AssetLink as default };