import { useSelector } from 'react-redux';
import classNames from 'classnames';
import isDragDropSupported from '@filerobot/utils/lib/isDragDropSupported';
import { LoaderView, PoweredBy } from '@filerobot/common';
import { useTheme } from '@scaleflex/ui/theme/hooks';
import { selectCoreLoading } from '@filerobot/core/lib/slices/common.slice';
import { useExplorer, useIsSmallScreen } from '../hooks';
import ActionBar from './ActionBar';
import Views from './Views';
import MainMenu from './MainMenu';
import Styled from '../Explorer.styled';
import { selectActivePickerPanel, selectIsMainMenuCollapsed } from '../slices/panels.slice';
import { selectAreInsidesReadyToBeVisible, selectDarkMode, selectIsExplorerPluginLoading, selectIsPluginModalClosing, selectIsPluginModalHidden } from '../slices/common.slice';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var ExplorerWrapper = function ExplorerWrapper(_ref) {
  var children = _ref.children;
  var _useExplorer = useExplorer(),
    i18n = _useExplorer.i18n,
    _useExplorer$opts = _useExplorer.opts,
    opts = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
    isTargetDomEl = _useExplorer.isTargetDomEl,
    handleClickOutside = _useExplorer.handleClickOutside,
    requestCloseModal = _useExplorer.requestCloseModal,
    handleDragOver = _useExplorer.handleDragOver,
    handleDragLeave = _useExplorer.handleDragLeave,
    handleDrop = _useExplorer.handleDrop;
  var theme = useTheme();
  var activePickerPanel = useSelector(selectActivePickerPanel);
  var isClosing = useSelector(selectIsPluginModalClosing);
  var isHidden = useSelector(selectIsPluginModalHidden);
  var areInsidesReadyToBeVisible = useSelector(selectAreInsidesReadyToBeVisible);
  var themeMode = useSelector(function (state) {
    return selectDarkMode(state) ? 'dark' : 'light';
  });
  var isCoreLoading = useSelector(selectCoreLoading);
  var isExplorerLoading = useSelector(selectIsExplorerPluginLoading);
  var isMainMenuCollapsed = useSelector(selectIsMainMenuCollapsed);
  var isWidgetSmallSize = useIsSmallScreen();
  var floaty = opts.floaty,
    animateOpenClose = opts.animateOpenClose,
    inline = opts.inline,
    width = opts.width,
    height = opts.height,
    noItemsBrowser = opts.noItemsBrowser,
    showFilerobotCopyright = opts.showFilerobotCopyright,
    explorerWrapperClassName = opts.explorerWrapperClassName;

  // TODO: we are adding this check until we support string and percentage in @scaleflex/ui
  var containerBreakpointClass = floaty || typeof width === 'string' ? '' : theme.breakpoints.getBreakpointClass(width, true);
  var explorerClassName = classNames({
    'filerobot-Root': isTargetDomEl,
    'filerobot-Explorer': true,
    'filerobot-Explorer--animateOpenClose': animateOpenClose,
    'filerobot-Explorer--isClosing': isClosing,
    'filerobot-Explorer--modal': !inline,
    'filerobot-Explorer--isInnerWrapVisible': areInsidesReadyToBeVisible
  }, containerBreakpointClass, explorerWrapperClassName);
  var explorerInnerClassName = classNames({
    'filerobot-size--fullscreen': width === '100%' && height === '100%'
  }, 'filerobot-Explorer-inner');
  return /*#__PURE__*/_jsxs("div", {
    className: explorerClassName,
    "data-filerobot-theme": themeMode,
    "data-filerobot-floaty": floaty,
    "data-filerobot-drag-drop-supported": isDragDropSupported(),
    "aria-hidden": inline ? 'false' : isHidden,
    "aria-label": !inline ? i18n('explorerWindowTitle') : i18n('explorerTitle'),
    onDragOver: handleDragOver,
    onDragLeave: handleDragLeave,
    onDrop: handleDrop,
    children: [/*#__PURE__*/_jsx("div", {
      className: "filerobot-Explorer-overlay",
      tabIndex: -1,
      onClick: handleClickOutside
    }), /*#__PURE__*/_jsxs("div", {
      className: explorerInnerClassName,
      "aria-modal": !inline ? 'true' : undefined,
      role: !inline ? 'dialog' : undefined,
      style: {
        width: width,
        height: height
      },
      tabIndex: -1,
      children: [!inline && !noItemsBrowser && /*#__PURE__*/_jsx("button", {
        className: "filerobot-u-reset filerobot-Explorer-close",
        type: "button",
        "aria-label": i18n('widgetCloseModalTitle'),
        title: i18n('widgetCloseModalTitle'),
        onClick: requestCloseModal,
        children: /*#__PURE__*/_jsx("span", {
          "aria-hidden": "true",
          children: "\xD7"
        })
      }), /*#__PURE__*/_jsx("div", {
        className: "filerobot-Explorer-innerWrap",
        children: isCoreLoading || isExplorerLoading ? /*#__PURE__*/_jsx(LoaderView, {
          loaderLabel: i18n('loaderLoadingLabel')
        }) : /*#__PURE__*/_jsxs(_Fragment, {
          children: [!noItemsBrowser && /*#__PURE__*/_jsxs(Styled.Wrapper, {
            className: "filerobot-Explorer-innerContainer",
            children: [!floaty && /*#__PURE__*/_jsx(MainMenu, {}), /*#__PURE__*/_jsxs(Styled.Container, {
              className: "filerobot-Explorer-main",
              isMainMenuCollapsed: isMainMenuCollapsed,
              isWidgetSmallSize: isWidgetSmallSize,
              floaty: floaty,
              children: [/*#__PURE__*/_jsx(Views, {}), showFilerobotCopyright && /*#__PURE__*/_jsx(PoweredBy, {
                normalText: i18n('mutualizedPoweredByText'),
                strongText: "Filerobot"
              })]
            })]
          }), children, !activePickerPanel && !noItemsBrowser && /*#__PURE__*/_jsx(ActionBar, {})]
        })
      })]
    })]
  });
};
export default ExplorerWrapper;