import { useDispatch, useSelector } from 'react-redux';
import { TextWithHighlights } from '@filerobot/common';
import { Bookmark } from '@scaleflex/icons';
import { collectionsDeselected, selectActiveCollection, selectCollections } from '../../../slices/collections.slice';
import Styled from './CollectionsTree.styled';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var CollectionTreeItem = function CollectionTreeItem(_ref) {
  var collectionUuid = _ref.collectionUuid,
    activateCollection = _ref.activateCollection,
    debouncedCollectionsSearchTerm = _ref.debouncedCollectionsSearchTerm;
  var dispatch = useDispatch();
  var activeCollection = useSelector(selectActiveCollection);
  var collections = useSelector(selectCollections);
  var deselectAllCollections = function deselectAllCollections() {
    return dispatch(collectionsDeselected());
  };
  var handleActivateCollection = function handleActivateCollection(collectionUuid) {
    deselectAllCollections();
    activateCollection(collectionUuid);
  };
  return /*#__PURE__*/_jsxs(Styled.Item, {
    $active: (activeCollection === null || activeCollection === void 0 ? void 0 : activeCollection.uuid) === collectionUuid,
    onClick: function onClick() {
      return handleActivateCollection(collectionUuid);
    },
    children: [/*#__PURE__*/_jsx(Styled.ItemIcon, {
      children: /*#__PURE__*/_jsx(Bookmark, {})
    }), /*#__PURE__*/_jsx(Styled.ItemLabel, {
      children: /*#__PURE__*/_jsx(TextWithHighlights, {
        text: collections[collectionUuid].title || '',
        hightlightText: debouncedCollectionsSearchTerm
      })
    })]
  }, collectionUuid);
};
export default CollectionTreeItem;