import { useSelector } from 'react-redux';
import { Assets, Folders } from '@scaleflex/icons';
import { NoAssets } from '@filerobot/icons/lib';
import { toLocaleNumber } from '@filerobot/utils/lib/formatNumbers';
import { selectAllSelectedItemsCount, selectIsFileSelected, selectIsFolderSelected } from '../../slices/selections.slice';
import { useExplorer } from '../../hooks';
import Styled from './DetailsSideBar.styled';
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 MultipleItems = function MultipleItems(_ref) {
  var header = _ref.header,
    details = _ref.details;
  var _useExplorer = useExplorer(),
    i18n = _useExplorer.i18n,
    numberFormatLocale = _useExplorer.opts.config.numberFormatLocale;
  var selectedItemsCount = useSelector(selectAllSelectedItemsCount);
  var isFolderSelected = useSelector(selectIsFolderSelected);
  var isFileSelected = useSelector(selectIsFileSelected);
  var renderAssetsPlaceholder = function renderAssetsPlaceholder() {
    if (isFolderSelected && isFileSelected) {
      return /*#__PURE__*/_jsx(Styled.AsstesIcon, {
        children: /*#__PURE__*/_jsx(Assets, {
          size: 120
        })
      });
    }
    if (isFolderSelected && selectedItemsCount) {
      return /*#__PURE__*/_jsx(Styled.AsstesIcon, {
        children: /*#__PURE__*/_jsx(Folders, {
          size: 120
        })
      });
    }
    if (!selectedItemsCount) {
      return /*#__PURE__*/_jsxs(Styled.AssetsPreview, {
        children: [/*#__PURE__*/_jsx(NoAssets, {}), /*#__PURE__*/_jsx("label", {
          children: i18n('detailSideBarPreviewAssetLabel')
        })]
      });
    }
    return /*#__PURE__*/_jsx(Styled.AsstesIcon, {
      children: /*#__PURE__*/_jsx(Assets, {
        size: 120
      })
    });
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Styled.SideDetailsTitle, {
      children: /*#__PURE__*/_jsx("label", {
        children: isFolderSelected && !selectedItemsCount ? i18n('mutualizedPreviewLabel') : header
      })
    }), renderAssetsPlaceholder(), !!selectedItemsCount && /*#__PURE__*/_jsx(Styled.SideDetailsNavWrapper, {
      children: details.map(function (_ref2) {
        var i18nKey = _ref2.i18nKey,
          translatableValue = _ref2.translatableValue,
          value = _ref2.value;
        return /*#__PURE__*/_jsxs("li", {
          children: [/*#__PURE__*/_jsx("div", {
            children: /*#__PURE__*/_jsx("span", {
              children: i18n(i18nKey)
            })
          }), /*#__PURE__*/_jsx("div", {
            children: /*#__PURE__*/_jsx("span", {
              children: toLocaleNumber(translatableValue ? i18n(value) || value : value, numberFormatLocale)
            })
          })]
        }, i18nKey);
      })
    })]
  });
};
export default MultipleItems;