import { useEffect, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import ignoreEvent from '@filerobot/utils/lib/ignoreEvent';
import { usePlugin } from '@filerobot/core/lib/hooks';
import Styled from './PickerPanel.styled';
import UploadBar from '../UploadBar';
import { pickerPanelUpdated } from '../../slices/panels.slice';
import { useExplorer } from '../../hooks';

// We don't use the activePickerPanel from useSelector directly cause once the `activePickerPanel: null` would cause an error
// As redux rerenders all the components subscribed (using useSelector) to specific selector
// so both (parent & child) components will do that rerender even if the parent show/hides the child depending in that value.
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var PickerPanelContent = function PickerPanelContent(_ref) {
  var activePickerPanel = _ref.activePickerPanel;
  var _useExplorer = useExplorer(),
    i18n = _useExplorer.i18n;
  var dispatch = useDispatch();
  var pluginOfThePanel = usePlugin(activePickerPanel.id);
  // We are calling the plugin's state here through the selector for triggering re-render once we have any of the plugin's state updated
  // So in that case it will rerender the plugin's view.
  var pluginState = useSelector(function (state) {
    return state[pluginOfThePanel.id];
  });
  var _ref2 = pluginState || {},
    panelAuthenticated = _ref2.authenticated,
    panelLoading = _ref2.loading,
    panelCurrentSelection = _ref2.currentSelection,
    panelOpenedFolders = _ref2.openedFolders,
    hideActionButtons = _ref2.hideActionButtons;
  var addPanelSelection = function addPanelSelection() {
    return pluginOfThePanel.addSelectedItems();
  };
  var openAddPanelAndCloseOthers = useCallback(function () {
    dispatch(pickerPanelUpdated({
      pickerPanel: false
    }));
  }, []);
  useEffect(function () {
    if (!pluginOfThePanel) {
      openAddPanelAndCloseOthers();
    }
  }, [pluginOfThePanel]);
  var handleClose = function handleClose() {
    if (typeof (pluginOfThePanel === null || pluginOfThePanel === void 0 ? void 0 : pluginOfThePanel.clearSelection) === 'function') {
      pluginOfThePanel.clearSelection();
    }
    openAddPanelAndCloseOthers();
  };
  var panelGetPrevFolder = function panelGetPrevFolder() {
    var _pluginOfThePanel$get;
    var prevFolder = panelOpenedFolders.at(-2);
    pluginOfThePanel === null || pluginOfThePanel === void 0 ? void 0 : (_pluginOfThePanel$get = pluginOfThePanel.getPrevFolder) === null || _pluginOfThePanel$get === void 0 ? void 0 : _pluginOfThePanel$get.call(pluginOfThePanel, prevFolder);
  };
  return /*#__PURE__*/_jsxs(Styled.Wrapper, {
    role: "tabpanel",
    "data-filerobot-paneltype": "PickerPanel",
    id: "filerobot-Explorer-panel--".concat(activePickerPanel.id),
    className: "filerobot-Explorer-panel",
    onDragOver: ignoreEvent,
    onDragLeave: ignoreEvent,
    onDrop: ignoreEvent,
    onPaste: ignoreEvent,
    children: [/*#__PURE__*/_jsxs(Styled.TopBar, {
      children: [/*#__PURE__*/_jsx(Styled.CloseButton, {
        onClick: handleClose,
        color: "link-basic"
      }), typeof (pluginOfThePanel === null || pluginOfThePanel === void 0 ? void 0 : pluginOfThePanel.renderPanelBarTopLeftComponent) === 'function' && /*#__PURE__*/_jsx(Styled.ImportButtonWrapper, {
        children: pluginOfThePanel.renderPanelBarTopLeftComponent()
      }), /*#__PURE__*/_jsx(Styled.Title, {
        className: "filerobot-Explorer-title",
        role: "heading",
        "aria-level": "1",
        children: i18n('pickerPanelImportFromTitle', {
          name: activePickerPanel.name
        })
      })]
    }), /*#__PURE__*/_jsx(Styled.PanelBody, {
      className: "filerobot-Explorer-panelBody",
      children: pluginOfThePanel === null || pluginOfThePanel === void 0 ? void 0 : pluginOfThePanel.render({
        openAddPanelAndCloseOthers: openAddPanelAndCloseOthers
      })
    }), /*#__PURE__*/_jsx(UploadBar, {
      addPanelSelection: addPanelSelection,
      panelCurrentSelection: panelCurrentSelection,
      panelOpenedFolders: panelOpenedFolders,
      panelGetPrevFolder: panelGetPrevFolder,
      onCancelClick: openAddPanelAndCloseOthers,
      panelAuthenticated: panelAuthenticated && !hideActionButtons,
      panelLoading: panelLoading
    })]
  });
};
export default PickerPanelContent;