import _extends from "@babel/runtime/helpers/extends";
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, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { style } from 'typestyle';
import Card from '@material-ui/core/Card';
import CardWindow from '../CardWindow';
import uniq from 'lodash/uniq';
import ShotPane from './ShotPane';
import withFiles from '../../store/withFiles';
import normalize from '../../File/normalize';
var scrapbox = {
  url: function url(title) {
    return "https://scrapbox.io/hackforplay/".concat(encodeURIComponent(title));
  },
  page: function page(title) {
    return "https://scrapbox.io/api/pages/hackforplay/".concat(encodeURIComponent(title));
  },
  icon: function icon(title) {
    return "https://scrapbox.io/api/pages/hackforplay/".concat(encodeURIComponent(title), "/icon");
  }
};
var cn = {
  hintFlexbox: style({
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    margin: '1em 0'
  }),
  hintHeading: style({
    fontSize: '1.5em',
    fontWeight: 600,
    marginRight: '1em'
  }),
  cardLink: style({
    textDecoration: 'none'
  }),
  cardFlexbox: style({
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'stretch',
    overflow: 'hidden'
  }),
  card: style({
    width: '10em',
    height: '10em',
    marginRight: '1em',
    wordBreak: 'break-all',
    padding: '1em'
  }),
  cardTitle: style({
    margin: 0,
    overflow: 'hidden',
    display: '-webkit-box',
    WebkitLineClamp: 3,
    WebkitBoxOrient: 'vertical',
    textOverflow: 'ellipsis'
  }),
  cardIcon: style({
    width: '100%'
  })
};
var ShotCard = (_dec = withFiles({
  watch: '**/*.js'
}), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(ShotCard, _PureComponent);

  function ShotCard() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, ShotCard);

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

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

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
      file: null,
      completes: [],
      footer: null
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleCode", function (event) {
      var value = event.data.value;

      if (value) {
        // feeles.openCode()
        var filePath = normalize(value);

        var file = _this.props.files.find(function (file) {
          return file.name === filePath;
        });

        if (!file) {
          throw new Error("NotFound: ".concat(value, " by feeles.openCode()"));
        }

        _this.setState({
          file: file,
          completes: _this.props.getConfig('snippets')(file)
        });

        _this.props.setCardVisibility('ShotCard', true);
      } else {
        // feeles.closeCode()
        _this.props.setCardVisibility('ShotCard', false);
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleSetLinkObjects", function () {
      var linkObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
      var titles = linkObjects.map(function (obj) {
        return obj.linkText;
      });

      _this.setState({
        footer: _this.renderFooter(uniq(titles))
      });
    });

    return _this;
  }

  _createClass(ShotCard, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var globalEvent = this.props.globalEvent;
      globalEvent.on('message.code', this.handleCode);
    }
  }, {
    key: "renderFooter",
    value: function renderFooter(titles) {
      return titles.length > 0 ? React.createElement("div", null, React.createElement("div", {
        className: cn.hintFlexbox
      }, React.createElement("div", {
        className: cn.hintHeading
      }, "\uD83D\uDCA1 \u30D2\u30F3\u30C8"), React.createElement("div", null, React.createElement("a", {
        href: "http://scrapbox.io"
      }, "Scrapbox"), " \u306B\u3068\u3073\u307E\u3059 (\u5B9F\u9A13\u6BB5\u968E\u306E\u6A5F\u80FD)")), React.createElement("div", {
        className: cn.cardFlexbox
      }, titles.map(function (title) {
        return React.createElement("a", {
          key: title,
          href: scrapbox.url(title),
          rel: "noopener noreferrer",
          target: "_blank",
          className: cn.cardLink
        }, React.createElement(Card, {
          className: cn.card
        }, React.createElement("div", {
          className: cn.cardTitle
        }, title), React.createElement("img", {
          src: scrapbox.icon(title),
          alt: "\u30DA\u30FC\u30B8\u304C\u5B58\u5728\u3057\u306A\u3044\u304B\u3001\u30A2\u30A4\u30B3\u30F3\u304C\u8A2D\u5B9A\u3055\u308C\u3066\u3044\u307E\u305B\u3093",
          className: cn.cardIcon
        })));
      }).concat(React.createElement("div", {
        key: "$lastcard"
      })))) : null;
    }
  }, {
    key: "render",
    value: function render() {
      var visible = this.props.cardPropsBag.visible;
      return React.createElement(CardWindow, _extends({}, this.props.cardPropsBag, {
        footer: this.state.footer
      }), visible ? React.createElement(ShotPane, {
        file: this.state.file,
        completes: this.state.completes,
        localization: this.props.localization,
        loadConfig: this.props.loadConfig,
        globalEvent: this.props.globalEvent,
        handleSetLinkObjects: this.handleSetLinkObjects
      }) : null);
    }
  }]);

  return ShotCard;
}(PureComponent), _defineProperty(_class2, "propTypes", {
  cardPropsBag: PropTypes.object.isRequired,
  setCardVisibility: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  getConfig: PropTypes.func.isRequired,
  loadConfig: PropTypes.func.isRequired,
  globalEvent: PropTypes.object.isRequired,
  // Injected by withFiles (for JSX)
  files: PropTypes.array.isRequired
}), _temp)) || _class);
export { ShotCard as default };