import { useRef, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectElevateTopSection, topSectionHeight } from '../../slices/topSection.slice';
import { selectContainerWidth } from '../../slices/common.slice';
import Filters from '../Filters';
import HeaderBar from '../HeaderBar';
import TopBar from '../TopBar';
import { selectIsUploadsPanelOpened } from '../../slices/panels.slice';
import { selectIsShareboxView, selectViewLayout } from '../../slices/views.slice';
import Styled from './TopSection.styled';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var TopSection = function TopSection(_ref) {
  var hideTopSection = _ref.hideTopSection,
    showHeaderBar = _ref.showHeaderBar,
    showFilters = _ref.showFilters,
    showTopBar = _ref.showTopBar,
    SortElement = _ref.SortElement;
  var dispatch = useDispatch();
  var elevateTopSection = useSelector(selectElevateTopSection);
  var isUploadPanelOpened = useSelector(selectIsUploadsPanelOpened);
  var viewLayout = useSelector(selectViewLayout);
  var containerWidth = useSelector(selectContainerWidth);
  var isShareboxView = useSelector(selectIsShareboxView);
  var topSectionRef = useRef();
  useEffect(function () {
    if (!hideTopSection) {
      var _topSectionRef$curren;
      dispatch(topSectionHeight(topSectionRef === null || topSectionRef === void 0 ? void 0 : (_topSectionRef$curren = topSectionRef.current) === null || _topSectionRef$curren === void 0 ? void 0 : _topSectionRef$curren.offsetHeight));
    }
  }, []);
  useEffect(function () {
    if (!hideTopSection) {
      var _topSectionRef$curren2;
      dispatch(topSectionHeight(topSectionRef === null || topSectionRef === void 0 ? void 0 : (_topSectionRef$curren2 = topSectionRef.current) === null || _topSectionRef$curren2 === void 0 ? void 0 : _topSectionRef$curren2.offsetHeight));
    }
  }, [containerWidth, viewLayout]);
  if (hideTopSection || isUploadPanelOpened) return null;
  return /*#__PURE__*/_jsxs(Styled.Wrapper, {
    elevateTopSection: elevateTopSection,
    ref: topSectionRef,
    children: [showTopBar && !isShareboxView && /*#__PURE__*/_jsx(TopBar, {}), showFilters && !isShareboxView && /*#__PURE__*/_jsx(Filters, {}), showHeaderBar && /*#__PURE__*/_jsx(HeaderBar, {
      SortElement: SortElement
    })]
  });
};
export default TopSection;