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";
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { style } from 'typestyle';
import MediaCard from './MediaCard/';
import MonitorCard from './MonitorCard/';
import ReadmeCard from './ReadmeCard/';
import ShotCard from './ShotCard/';
import EditorCard from './EditorCard/';
import HierarchyCard from './HierarchyCard/';
import * as MonitorTypes from '../utils/MonitorTypes';
var cn = {
  container: style({
    flex: 1,
    position: 'relative',
    display: 'flex',
    flexWrap: 'wrap',
    justfiyContent: 'space-between',
    alignItems: 'stretch',
    overflowX: 'hidden',
    overflowY: 'scroll',
    paddingLeft: 16,
    boxSizing: 'border-box',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    backgroundSize: 'contain'
  })
};

var CardContainer =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(CardContainer, _PureComponent);

  function CardContainer() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, CardContainer);

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

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

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cardRefs", {});

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scrollToCard", function (name) {
      // そのカードにスクロールする
      var scrollTarget = document.getElementById(name);

      if (scrollTarget) {
        scrollTarget.scrollIntoView({
          behavior: 'smooth',
          block: 'nearest',
          inline: 'nearest'
        });
      }
    });

    return _this;
  }

  _createClass(CardContainer, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      // visible が false から true にかわったらスクロールする
      if (prevProps.cardVisibility !== this.props.cardVisibility) {
        var _arr = Object.keys(this.props.cardVisibility);

        for (var _i = 0; _i < _arr.length; _i++) {
          var name = _arr[_i];

          if (!prevProps.cardVisibility[name] && this.props.cardVisibility[name]) {
            this.scrollToCard(name);
          }
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var bag = function bag(name) {
        return {
          name: name,
          visible: _this2.props.cardVisibility[name],
          order: _this2.props.cardProps[name].order,
          cardProps: _this2.props.cardProps,
          showAll: _this2.props.showAll
        };
      };

      var commonProps = {
        localization: this.props.localization,
        getConfig: this.props.getConfig,
        loadConfig: this.props.loadConfig,
        showAll: this.props.showAll,
        globalEvent: this.props.globalEvent,
        setLocation: this.props.setLocation,
        isPopout: this.props.monitorType === MonitorTypes.Popout,
        togglePopout: this.props.togglePopout,
        toggleFullScreen: this.props.toggleFullScreen,
        showNotice: this.props.showNotice,
        setCardVisibility: this.props.setCardVisibility,
        openFileDialog: this.props.openFileDialog,
        href: this.props.href,
        scrollToCard: this.scrollToCard,
        cardProps: this.props.cardProps,
        reboot: this.props.reboot,
        isFullScreen: this.props.monitorType === MonitorTypes.FullScreen,
        asset: this.props.asset,
        isExpandingEditorCard: this.props.isExpandingEditorCard,
        setExpandingEditorCard: this.props.setExpandingEditorCard
      };
      return React.createElement("div", {
        className: cn.container
      }, React.createElement(MediaCard, _extends({
        ref: function ref(_ref) {
          return _this2.cardRefs.MediaCard = _ref;
        }
      }, commonProps, {
        cardPropsBag: bag('MediaCard')
      })), React.createElement(MonitorCard, _extends({
        ref: function ref(_ref2) {
          return _this2.cardRefs.MonitorCard = _ref2;
        }
      }, commonProps, {
        cardPropsBag: bag('MonitorCard')
      })), React.createElement(ReadmeCard, _extends({
        ref: function ref(_ref3) {
          return _this2.cardRefs.ReadmeCard = _ref3;
        }
      }, commonProps, {
        cardPropsBag: bag('ReadmeCard')
      })), React.createElement(ShotCard, _extends({
        ref: function ref(_ref4) {
          return _this2.cardRefs.ShotCard = _ref4;
        }
      }, commonProps, {
        cardPropsBag: bag('ShotCard')
      })), React.createElement(EditorCard, _extends({
        ref: function ref(_ref5) {
          return _this2.cardRefs.EditorCard = _ref5;
        }
      }, commonProps, {
        cardPropsBag: bag('EditorCard')
      })), React.createElement(HierarchyCard, _extends({
        ref: function ref(_ref6) {
          return _this2.cardRefs.HierarchyCard = _ref6;
        }
      }, commonProps, {
        cardPropsBag: bag('HierarchyCard')
      })));
    }
  }]);

  return CardContainer;
}(PureComponent);

_defineProperty(CardContainer, "propTypes", {
  cardProps: PropTypes.object.isRequired,
  cardVisibility: PropTypes.object.isRequired,
  getConfig: PropTypes.func.isRequired,
  loadConfig: PropTypes.func.isRequired,
  setCardVisibility: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  showAll: PropTypes.bool.isRequired,
  setLocation: PropTypes.func.isRequired,
  openFileDialog: PropTypes.func.isRequired,
  reboot: PropTypes.bool.isRequired,
  href: PropTypes.string.isRequired,
  monitorType: PropTypes.symbol.isRequired,
  toggleFullScreen: PropTypes.func.isRequired,
  togglePopout: PropTypes.func.isRequired,
  showNotice: PropTypes.func.isRequired,
  globalEvent: PropTypes.object.isRequired,
  isExpandingEditorCard: PropTypes.bool.isRequired,
  setExpandingEditorCard: PropTypes.func.isRequired // Card Element の参照を保持するオブジェクト

});

export { CardContainer as default };