"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
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 STORAGE_KEY = 'panelWidth';
const SidePanel = _ref => {
  let {
    isVisible,
    eventType
  } = _ref;
  const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
  const [config, setConfig] = (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)(newWidth => {
    if (newWidth >= MIN_PANEL_WIDTH && newWidth <= MAX_PANEL_WIDTH) {
      setWidth(newWidth);
    }
  }, []);
  const resizeWidthEnd = (0, _react.useCallback)(newWidth => {
    const settings = JSON.parse(window.localStorage.getItem('sf-editor') || '{}');
    window.localStorage.setItem('sf-editor', JSON.stringify((0, _objectSpread2.default)((0, _objectSpread2.default)({}, settings), {}, {
      [STORAGE_KEY]: newWidth
    })));
    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 storedWidth = settings[STORAGE_KEY];
    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(storedWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
    setWidth(width);
  }, []);
  const handleConfig = (0, _react.useCallback)(configData => {
    setConfig(configData);
  }, []);
  (0, _react.useEffect)(() => {
    const eventBus = _eventBus.default.getInstance();
    const unsubscribePanel = eventBus.subscribe(eventType, handleConfig);
    return () => {
      unsubscribePanel();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  (0, _react.useEffect)(() => {
    const eventBus = _eventBus.default.getInstance();
    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
  }, [isVisible, config]);
  const {
    component: panelComponent,
    props: panelProps
  } = config || {};
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-panel-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-panel-container",
    style: {
      width
    }
  }, panelComponent && panelProps && /*#__PURE__*/_react.default.createElement(panelComponent, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, panelProps), {}, {
    width
  }))));
};
var _default = exports.default = SidePanel;