import React from 'react';
import { connect } from 'react-redux';
import Menu from 'antd/es/menu';
import 'antd/es/menu/style';
import Dropdown from 'antd/es/dropdown';
import 'antd/es/dropdown/style';
import Button from 'antd/es/button';
import 'antd/es/button/style';
import { NO_TRAIL_FLOW } from '../../../../core/constants';
import { selectCodeCrumbedFlow } from '../../../../core/dataBus/actions';
import { getCodeCrumbsUserChoice } from '../../../../core/dataBus/selectors';
import { getCheckedState } from '../../../../core/controlsBus/selectors';
import './index.less';

var FlowSelect = function FlowSelect(_ref) {
  var codeCrumbsDiagramOn = _ref.codeCrumbsDiagramOn,
      codeCrumbsMinimize = _ref.codeCrumbsMinimize,
      codeCrumbedFlowsMap = _ref.codeCrumbedFlowsMap,
      onCodeCrumbedFlowSelect = _ref.onCodeCrumbedFlowSelect,
      selectedCrumbedFlowKey = _ref.selectedCrumbedFlowKey;

  if (!codeCrumbsDiagramOn || !Object.keys(codeCrumbedFlowsMap).length || codeCrumbsMinimize) {
    return null;
  }

  var noTrailLabel = '- no trail -';
  var menu = React.createElement(Menu, null, Object.keys(codeCrumbedFlowsMap).filter(function (key) {
    return key !== selectedCrumbedFlowKey;
  }).sort(function (a, b) {
    return a > b ? -1 : 1;
  }).map(function (flow) {
    return React.createElement(Menu.Item, {
      key: flow
    }, React.createElement("a", {
      target: "_blank",
      rel: "noopener noreferrer",
      onClick: function onClick() {
        return onCodeCrumbedFlowSelect(flow);
      }
    }, flow === NO_TRAIL_FLOW ? noTrailLabel : "# ".concat(flow)));
  }));
  return React.createElement("div", {
    className: 'FlowSelect'
  }, React.createElement(Dropdown, {
    overlay: menu,
    placement: "bottomLeft"
  }, React.createElement(Button, {
    size: 'small'
  }, selectedCrumbedFlowKey === NO_TRAIL_FLOW ? noTrailLabel : React.createElement(React.Fragment, null, "trail", React.createElement("span", {
    className: 'flow'
  }, " #".concat(selectedCrumbedFlowKey))))));
};

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

  var _getCodeCrumbsUserCho = getCodeCrumbsUserChoice(state, props),
      codeCrumbedFlowsMap = _getCodeCrumbsUserCho.codeCrumbedFlowsMap,
      selectedCrumbedFlowKey = _getCodeCrumbsUserCho.selectedCrumbedFlowKey;

  return {
    codeCrumbsDiagramOn: codeCrumbsDiagramOn,
    codeCrumbsMinimize: codeCrumbsMinimize,
    codeCrumbedFlowsMap: codeCrumbedFlowsMap,
    selectedCrumbedFlowKey: selectedCrumbedFlowKey
  };
};

var mapDispatchToProps = function mapDispatchToProps(dispatch, props) {
  var namespace = props.namespace;
  return {
    onCodeCrumbedFlowSelect: function onCodeCrumbedFlowSelect(flow) {
      return dispatch(selectCodeCrumbedFlow(flow, namespace));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(FlowSelect);