"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
const OutlineItem = _ref => {
  let {
    node
  } = _ref;
  const [isHighlighted, setIsHighlighted] = (0, _react.useState)(false);
  const onMouseOver = (0, _react.useCallback)(() => {
    setIsHighlighted(true);
  }, []);
  const onMouseOut = (0, _react.useCallback)(() => {
    setIsHighlighted(false);
  }, []);
  const onItemClick = (0, _react.useCallback)(() => {
    const {
      id
    } = node;
    document.getElementById(id).scrollIntoView();
  }, [node]);
  const className = (0, _classnames.default)('sf-editor-outline-item', {
    'pl-5': node.type === 'header2',
    'pl-7': node.type === 'header3',
    'active': isHighlighted
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    className: className,
    onClick: onItemClick,
    onMouseOver: onMouseOver,
    onMouseOut: onMouseOut
  }, node.children.map(child => child.text).join(''));
};
var _default = exports.default = OutlineItem;