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, { Suspense } from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { getCheckedState } from '../../../../../../core/controlsBus/selectors';
import { getCodeCrumbsUserChoice, getSourceLayout, getProjectMetadata } from '../../../../../../core/dataBus/selectors';
import { getCcPosition, isCodeCrumbSelected } from '../helpers';
import './index.less';
var Code = React.lazy(function () {
  return import(
  /* webpackChunkName: "code" */
  '../../../../../sideBar/component/Code');
});

var DetailsComponent = function DetailsComponent(props) {
  var name = props.name,
      details = props.details,
      position = props.position,
      selected = props.selected;
  var nameWidth = name ? name.length * 7.5 : 100;
  return React.createElement("div", {
    className: classNames('CcDetailsContainer', {
      CcDetailsSelected: selected
    }),
    style: {
      left: position.x,
      top: position.y,
      width: nameWidth + 'px'
    }
  }, details);
};

var ccUnderlayPaddingH = 20;

var CodeComponent =
/*#__PURE__*/
function (_React$Component) {
  _inherits(CodeComponent, _React$Component);

  function CodeComponent() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, CodeComponent);

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

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

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

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMouseEnter", function () {
      _this.setState({
        isExpanded: true
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMouseLeave", function () {
      _this.setState({
        isExpanded: false
      });
    });

    return _this;
  }

  _createClass(CodeComponent, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          position = _this$props.position,
          crumbNodeLines = _this$props.crumbNodeLines,
          file = _this$props.file,
          language = _this$props.language,
          namespace = _this$props.namespace;
      var fileCode = file.data.fileCode;
      var isExpanded = this.state.isExpanded;
      return React.createElement(React.Fragment, null, React.createElement("div", {
        className: classNames('CcCodeContainer', {
          CcCodeContainerExpanded: isExpanded
        }),
        style: {
          left: position.x,
          top: position.y
        },
        onMouseEnter: this.onMouseEnter,
        onMouseLeave: this.onMouseLeave
      }, React.createElement(Suspense, {
        fallback: null
      }, React.createElement(Code, {
        namespace: namespace,
        language: language,
        code: fileCode,
        fontSize: 10,
        lineHeight: 15,
        crumbedLines: [crumbNodeLines]
      }))), React.createElement("div", {
        style: {
          left: position.x - ccUnderlayPaddingH,
          top: position.y
        },
        className: classNames('CcCodeContainerUnderlay', {
          CcCodeContainerUnderlayExpanded: isExpanded
        })
      }));
    }
  }]);

  return CodeComponent;
}(React.Component);

var ExtraInfoSet = function ExtraInfoSet(_ref) {
  var detailsEnabled = _ref.detailsEnabled,
      codePreviewEnabled = _ref.codePreviewEnabled,
      shiftToCenterPoint = _ref.shiftToCenterPoint,
      ccAlightPoint = _ref.ccAlightPoint,
      selectedCcFlowEdgeNodes = _ref.selectedCcFlowEdgeNodes,
      flowSteps = _ref.flowSteps,
      sortedFlowSteps = _ref.sortedFlowSteps,
      filesLayoutMap = _ref.filesLayoutMap,
      ccShiftIndexMap = _ref.ccShiftIndexMap,
      namespace = _ref.namespace,
      language = _ref.language;
  if (!detailsEnabled && !codePreviewEnabled) return null;
  var crumbs = sortedFlowSteps.length ? sortedFlowSteps : flowSteps;
  return React.createElement(React.Fragment, null, crumbs.map(function (crumb) {
    if (crumb.namespace !== namespace) {
      return null;
    }

    var _ref2 = [crumb.y, crumb.x],
        _ = _ref2[0],
        nY = _ref2[1];
    var position = shiftToCenterPoint(getCcPosition(ccAlightPoint, ccShiftIndexMap[crumb.id]), nY + 8);

    if (detailsEnabled && crumb.params && crumb.params.details) {
      return React.createElement(DetailsComponent, {
        key: crumb.id,
        details: crumb.params.details,
        name: crumb.name,
        position: position,
        selected: isCodeCrumbSelected(selectedCcFlowEdgeNodes, crumb)
      });
    }

    if (codePreviewEnabled) {
      return React.createElement(CodeComponent, {
        key: crumb.id,
        position: position,
        crumbNodeLines: crumb.crumbNodeLines,
        file: filesLayoutMap[crumb.filePath],
        namespace: namespace,
        language: language
      });
    }

    return null;
  }));
};

var mapStateToProps = function mapStateToProps(state, props) {
  var _getCheckedState = getCheckedState(state),
      codeCrumbsMinimize = _getCheckedState.codeCrumbsMinimize,
      codeCrumbsDetails = _getCheckedState.codeCrumbsDetails,
      codeCrumbsCodePreview = _getCheckedState.codeCrumbsCodePreview;

  var namespace = props.namespace;
  var namespaceProps = {
    namespace: namespace
  };

  var _getProjectMetadata = getProjectMetadata(state, namespaceProps),
      language = _getProjectMetadata.language;

  var _getCodeCrumbsUserCho = getCodeCrumbsUserChoice(state, namespaceProps),
      selectedCcFlowEdgeNodes = _getCodeCrumbsUserCho.selectedCcFlowEdgeNodes;

  var _getSourceLayout = getSourceLayout(state, namespaceProps),
      ccAlightPoint = _getSourceLayout.ccAlightPoint,
      filesLayoutMap = _getSourceLayout.filesLayoutMap;

  return {
    detailsEnabled: !codeCrumbsMinimize && codeCrumbsDetails,
    codePreviewEnabled: !codeCrumbsMinimize && codeCrumbsCodePreview,
    filesLayoutMap: filesLayoutMap,
    selectedCcFlowEdgeNodes: selectedCcFlowEdgeNodes,
    ccAlightPoint: ccAlightPoint,
    language: language
  };
};

export default connect(mapStateToProps)(ExtraInfoSet);