"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 _resizeWidth = _interopRequireDefault(require("./resize-width"));
var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
var _eventTypes = require("../../constants/event-types");
require("./style.css");
const MIN_PANEL_WIDTH = 360;
const MAX_PANEL_WIDTH = 620;
const ArticleInfo = _ref => {
  let {
    isVisible
  } = _ref;
  const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
  const [fileDetails, setFileDetails] = (0, _react.useState)({});
  const containerWrapperStyle = (0, _react.useMemo)(() => {
    const style = {
      width,
      zIndex: 101,
      display: isVisible ? 'block' : 'none'
    };
    if (!style.width || style.width < MIN_PANEL_WIDTH) {
      style.width = MIN_PANEL_WIDTH;
    } else if (style.width > MAX_PANEL_WIDTH) {
      style.width = MAX_PANEL_WIDTH;
    }
    return style;
  }, [width, isVisible]);
  const resizeWidth = (0, _react.useCallback)(width => {
    if (width >= MIN_PANEL_WIDTH && width <= MAX_PANEL_WIDTH) {
      setWidth(width);
    }
  }, []);
  const resizeWidthEnd = (0, _react.useCallback)(width => {
    const settings = JSON.parse(window.localStorage.getItem('sf-editor') || '{}');
    window.localStorage.setItem('sf-editor', JSON.stringify({
      ...settings,
      panelWidth: width
    }));
    const eventBus = _eventBus.default.getInstance();
    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
  }, []);
  (0, _react.useEffect)(() => {
    const settings = JSON.parse(window.localStorage.getItem('sf-editor', '{}')) || {};
    const {
      panelWidth
    } = settings;
    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
    setWidth(width);
  }, []);
  const handleFileDetails = (0, _react.useCallback)(fileDetails => {
    setFileDetails(fileDetails);
  }, []);
  (0, _react.useEffect)(() => {
    const eventBus = _eventBus.default.getInstance();
    const unsubscribeArticleInfoDetail = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, handleFileDetails);
    return () => {
      unsubscribeArticleInfoDetail();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  (0, _react.useEffect)(() => {
    const eventBus = _eventBus.default.getInstance();
    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
  }, [isVisible, fileDetails]);
  const {
    component: fileDetailsComponent,
    props: fileDetailsProps
  } = fileDetails || {};
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-article-info-container-wrapper",
    style: containerWrapperStyle
  }, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
    minWidth: MIN_PANEL_WIDTH,
    maxWidth: MAX_PANEL_WIDTH,
    resizeWidth: resizeWidth,
    resizeWidthEnd: resizeWidthEnd
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-article-info-container",
    style: {
      width
    }
  }, fileDetailsComponent && /*#__PURE__*/_react.default.createElement(fileDetailsComponent, {
    ...fileDetailsProps,
    width
  })));
};
var _default = exports.default = ArticleInfo;