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 React from 'react';
import PropTypes from 'prop-types';
import { style, classes } from 'typestyle';
import { Button, Tooltip } from '@material-ui/core';
import findAssetButton from './findAssetButton';
import withAsset from '../../store/withAsset';
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
  })
};
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: ''
    });

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

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

    return _this;
  }

  _createClass(AssetLink, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          name = _this$props.name,
          className = _this$props.className;
      var iconUrl = this.state.iconUrl;
      return React.createElement(Tooltip, {
        title: this.props.localization.editorCard.edit(name)
      }, React.createElement(Button, {
        variant: "outlined",
        className: classes(className, cn.button),
        disabled: !this.state.name,
        onClick: this.handleClick
      }, this.state.iconUrl ? React.createElement("img", {
        src: iconUrl,
        alt: name,
        className: cn.icon
      }) : React.createElement("span", {
        className: cn.icon
      }, 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
          };
        }
      }

      return null;
    }
  }]);

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