"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.setOutlineSetting = exports.getOutlineSetting = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactI18next = require("react-i18next");
var _classnames = _interopRequireDefault(require("classnames"));
var _outlineItem = _interopRequireDefault(require("./outline-item"));
var _useScrollContext = require("../../hooks/use-scroll-context");
var _constants = require("../../constants");
var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
var _eventTypes = require("../../constants/event-types");
require("./style.css");
const getOutlineSetting = () => {
  const currentValue = localStorage.getItem('sf-editor');
  const config = currentValue ? JSON.parse(currentValue) : {};
  const {
    outlineOpen = false
  } = config;
  return outlineOpen;
};
exports.getOutlineSetting = getOutlineSetting;
const setOutlineSetting = isShown => {
  const currentValue = localStorage.getItem('sf-editor');
  const config = currentValue ? JSON.parse(currentValue) : {};
  config['outlineOpen'] = isShown;
  localStorage.setItem('sf-editor', JSON.stringify(config));
};
exports.setOutlineSetting = setOutlineSetting;
const getHeaderList = children => {
  const headerList = [];
  children.forEach(node => {
    if (node.type === 'header2' || node.type === 'header3') {
      headerList.push(node);
    }
  });
  return headerList;
};
const Outline = _ref => {
  let {
    editor
  } = _ref;
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const scrollRef = (0, _useScrollContext.useScrollContext)();
  const [headerList, setHeaderList] = (0, _react.useState)([]);
  const [isShown, setIsShown] = (0, _react.useState)(false);
  const [scrollLeft, setScrollLeft] = (0, _react.useState)(0);
  (0, _react.useEffect)(() => {
    const headerList = getHeaderList(editor.children);
    setHeaderList(headerList);
  }, [editor.children]);
  const updateOutlineState = (0, _react.useCallback)(nextState => {
    setOutlineSetting(nextState);
    setIsShown(nextState);
    const eventBus = _eventBus.default.getInstance();
    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.OUTLINE_STATE_CHANGED);
  }, []);
  const toggleShow = (0, _react.useCallback)(() => {
    const nextState = !isShown;
    updateOutlineState(nextState);
  }, [isShown, updateOutlineState]);
  (0, _react.useEffect)(() => {
    if (!scrollRef.current) return;
    const updateScrollLeft = () => {
      setScrollLeft(scrollRef.current.scrollLeft);
    };
    scrollRef.current.addEventListener('scroll', updateScrollLeft);
    return () => {
      var _scrollRef$current;
      (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.removeEventListener('scroll', updateScrollLeft);
    };
  }, [scrollRef]);
  (0, _react.useEffect)(() => {
    const outlineState = getOutlineSetting();
    updateOutlineState(outlineState);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('sf-editor-outline-wrapper', {
      'active': isShown
    }),
    style: {
      left: -scrollLeft
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-editor-outline"
  }, isShown && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-editor-outline-header"
  }, /*#__PURE__*/_react.default.createElement("h2", {
    className: "sf-editor-outline-header_title"
  }, t('Outline')), /*#__PURE__*/_react.default.createElement("span", {
    className: "sf-editor-outline-header_close iconfont icon-x",
    onClick: toggleShow
  })), headerList.length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
    className: "empty-container"
  }, t('No_outline')) : /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-editor-outline-list-container"
  }, headerList.map((node, index) => /*#__PURE__*/_react.default.createElement(_outlineItem.default, {
    key: index,
    node: node
  }))))), !isShown && /*#__PURE__*/_react.default.createElement("span", {
    id: "sf-editor-outline-menu",
    className: "sf-editor-outline-menu sf-editor-tooltip iconfont icon-outline",
    onClick: toggleShow
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "custom-tooltip"
  }, t('Outline'))));
};
var _default = exports.default = Outline;