import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _isEqual from "lodash/isEqual";
import * as React from "react";
import { connect } from "react-redux";
import { css } from "emotion";
import { getActiveElement, getElement } from "../../selectors";
var breadcrumbs = /*#__PURE__*/css({
  display: "flex",
  zIndex: 20,
  flexDirection: "row",
  padding: '5px 12px',
  position: "absolute",
  left: 55,
  bottom: 0,
  width: "auto",
  backgroundColor: "var(--mdc-theme-surface)",
  borderTop: "1px solid var(--mdc-theme-on-background)",
  fontSize: "14px",
  borderRadius: '3px',
  boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)",
  "> li": {
    cursor: "pointer",
    listStyleType: "none",
    ".element": {
      color: "var(--mdc-theme-secondary)",
      padding: "5px",
      display: "inline-block",
      "&:hover": {
        backgroundColor: "#d9f7f3",
        borderRadius: '3px'
      }
    },
    ".divider": {
      color: "var(--mdc-theme-text-secondary-on-background)"
    }
  }
}, "label:breadcrumbs;");

var Breadcrumbs = function Breadcrumbs(_ref) {
  var elements = _ref.elements,
      activateElement = _ref.activateElement,
      highlightElement = _ref.highlightElement;

  if (!elements) {
    return null;
  }

  return /*#__PURE__*/React.createElement("ul", {
    className: breadcrumbs
  }, elements.map(function (el, index) {
    return /*#__PURE__*/React.createElement("li", {
      key: el.id // onMouseOver={() => highlightElement({ element: el.id })}
      ,
      onClick: function onClick() {
        return activateElement({
          element: el.id
        });
      }
    }, /*#__PURE__*/React.createElement("span", {
      className: "element"
    }, el.type.replace("pb-editor-page-element-", "")), elements.length - 1 > index ? /*#__PURE__*/React.createElement("span", {
      className: "divider"
    }, "\xA0>\xA0") : null);
  }));
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    highlightElement: function highlightElement(payload) {
      dispatch({
        type: 'ui/highlightElement',
        payload: payload
      });
    },
    activateElement: function activateElement(payload) {
      dispatch({
        type: 'ui/activatePageElement',
        payload: payload
      });
    }
  };
};

export default connect(function (state) {
  var element = getActiveElement(state);

  if (!element) {
    return {
      elements: null
    };
  }

  var paths = element.path.split(".").slice(1);
  var elements = paths.map(function (path, index) {
    var elPath = [0].concat(_toConsumableArray(paths.slice(0, index + 1))).join(".");
    var el = getElement(state, elPath);
    return {
      id: el.id,
      type: el.type,
      index: path,
      active: el.id === element.id
    };
  });
  return {
    elements: elements
  };
}, mapDispatchToProps, null, {
  areStatePropsEqual: _isEqual
})(Breadcrumbs);
//# sourceMappingURL=Breadcrumbs.js.map