import _objectSpread from "@babel/runtime/helpers/objectSpread";
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 _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";

var _dec, _dec2, _class, _class2, _temp;

/* eslint-disable react/prop-types */
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 Typography from '@material-ui/core/Typography';
import { emphasize } from '@material-ui/core/styles/colorManipulator';
import ActionOpenInNew from '@material-ui/icons/OpenInNew';
import EditorModeEdit from '@material-ui/icons/Edit';
import CodeMirrorComponent from '../../utils/CodeMirrorComponent';
import MDReactComponent from '../../jsx/MDReactComponent';
import withFiles from '../../store/withFiles';
var cn = {
  blockquote: style({
    marginLeft: '1rem',
    paddingLeft: '1rem',
    borderLeftWidth: 5,
    borderLeftStyle: 'solid'
  }),
  img: style({
    maxWidth: '100%'
  }),
  table: style({
    margin: '1rem 0',
    borderLeftWidth: 1,
    borderLeftStyle: 'solid',
    borderSpacing: 0
  }),
  containedButton: style({
    margin: 4
  })
};

var getCn = function getCn(props) {
  return {
    root: style({
      boxSizing: 'border-box',
      overflow: 'scroll',
      borderColor: props.theme.palette.divider
    }),
    th: style({
      padding: props.theme.spacing.unit,
      borderTopWidth: 1,
      borderTopStyle: 'solid',
      borderRightWidth: 1,
      borderRightStyle: 'solid',
      borderBottomWidth: 1,
      borderBottomStyle: 'solid'
    }),
    td: style({
      padding: props.theme.spacing.unit,
      borderRightWidth: 1,
      borderRightStyle: 'solid',
      borderBottomWidth: 1,
      borderBottomStyle: 'solid'
    }),
    code: style({
      backgroundColor: emphasize(props.theme.palette.background.paper, 0.07),
      padding: '.2em',
      borderRadius: 2
    })
  };
};

var mdComponents = [{
  // 外部リンク
  validate: function validate(tag, props) {
    return tag === 'a' && isValidURL(props.href);
  },
  render: function render(tag, props, children) {
    return React.createElement(Button, {
      variant: "contained",
      color: "primary",
      key: props.key,
      href: props.href,
      target: "_blank",
      className: cn.containedButton
    }, React.createElement("span", null, children), React.createElement(ActionOpenInNew, null));
  }
}, {
  // Feeles 内リンク
  validate: function validate(tag) {
    return tag === 'a';
  },
  render: function render(tag, props, children, component) {
    var onClick = function onClick() {
      component.props.setLocation(decodeURIComponent(props.href));
    };

    return React.createElement(Button, {
      variant: "contained",
      color: "primary",
      key: props.key,
      className: cn.containedButton,
      onClick: onClick
    }, React.createElement("span", {
      className: cn.containedButtonLabel
    }, children));
  }
}, {
  // 外部リンク画像
  validate: function validate(tag, props) {
    return tag === 'img' && isValidURL(props.src);
  },
  render: function render(tag, props) {
    return React.createElement("img", _extends({}, props, {
      className: cn.img
    }));
  }
}, {
  // Feeles 内画像
  validate: function validate(tag) {
    return tag === 'img';
  },
  render: function render(tag, props, children, component) {
    var file = component.props.files.find(function (file) {
      return file.name === decodeURIComponent(props.src);
    });

    if (!file) {
      return React.createElement("span", props, props.alt);
    }

    if (file.is('blob')) {
      return React.createElement("img", _extends({}, props, {
        className: cn.img,
        src: file.toDataURL()
      }));
    } // Edit file


    var onClick = function onClick() {
      component.props.globalEvent.emit('message.editor', {
        data: {
          value: file.name
        }
      });
    };

    return React.createElement(Button, {
      variant: "contained",
      color: "primary",
      key: props.key,
      className: cn.containedButton,
      onClick: onClick
    }, React.createElement(EditorModeEdit, null), React.createElement("span", {
      className: cn.containedButtonLabel
    }, props.alt));
  }
}, {
  // インタプリタ
  validate: function validate(tag) {
    return tag === 'pre';
  },
  render: function render(tag, props, children) {
    var code = children[0].props.children[0] || '';
    var containerStyle = {
      position: 'relative',
      height: Math.min(20, code.split('\n').length) + 'rem',
      paddingBottom: 8
    };
    return React.createElement("div", {
      key: props.key + code,
      style: containerStyle
    }, React.createElement(CodeMirrorComponent, {
      id: "Readme",
      value: code,
      mode: "javascript",
      keyMap: "sublime",
      readOnly: true
    }));
  }
}, {
  // 引用
  validate: function validate(tag) {
    return tag === 'blockquote';
  },
  render: function render(tag, props, children) {
    return React.createElement(Typography, {
      className: cn.blockquote,
      color: "textSecondary"
    }, children);
  }
}];
var Readme = (_dec = withTheme(), _dec2 = withFiles({}), _dec(_class = _dec2(_class = (_temp = _class2 =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(Readme, _PureComponent);

  function Readme() {
    _classCallCheck(this, Readme);

    return _possibleConstructorReturn(this, _getPrototypeOf(Readme).apply(this, arguments));
  }

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

      var dcn = getCn(this.props);

      var onIterate = function onIterate(tag, props, children) {
        for (var _i = 0; _i < mdComponents.length; _i++) {
          var _mdComponents$_i = mdComponents[_i],
              validate = _mdComponents$_i.validate,
              render = _mdComponents$_i.render;

          if (validate(tag, props)) {
            return render(tag, props, children, _this);
          }
        }

        if (tag in cn) {
          props = _objectSpread({}, props, {
            className: cn[tag]
          });
        }

        if (tag in dcn) {
          props = _objectSpread({}, props, {
            className: dcn[tag]
          });
        }

        if (children.length < 1) {
          children = null;
        }

        if (tag === 'p') {
          tag = 'div';
          props = _objectSpread({}, props, {
            style: _objectSpread({}, props.style, {
              margin: '14px 0'
            })
          });
        }

        return React.createElement(tag, props, children);
      };

      return React.createElement(MDReactComponent, {
        text: this.props.file.text,
        className: dcn.root,
        onIterate: onIterate
      });
    }
  }]);

  return Readme;
}(PureComponent), _defineProperty(_class2, "propTypes", {
  theme: PropTypes.object.isRequired,
  file: PropTypes.object.isRequired,
  localization: PropTypes.object.isRequired,
  completes: PropTypes.array.isRequired,
  setLocation: PropTypes.func.isRequired,
  globalEvent: PropTypes.object.isRequired,
  // Injected by withFiles (for JSX)
  files: PropTypes.array.isRequired
}), _temp)) || _class) || _class);
export { Readme as default };

function isValidURL(url) {
  try {
    new URL(url);
    return true;
  } catch (e) {
    return false;
  }
}