import { useSelector, useDispatch } from 'react-redux';
import { Button, MenuItem, Search } from '@scaleflex/ui/core';
import PinIcon from '@scaleflex/icons/pin';
import LabelIcon from '@scaleflex/icons/label';
import { Typography, FV } from '@filerobot/common';
import { PERMISSIONS } from '@filerobot/utils/lib/constants';
import { useDebounce } from '@filerobot/common/lib/hooks';
import { useExplorer, useExplorerI18n, useExplorerInformer } from '../../hooks';
import { activateLabelsView, attachFilesLabels, labelsSearchTermUpdated, selectLabelsBySearchTerm, selectLabelsSearchTerm } from '../../slices/labels.slice';
import Styled from './MenuSubItem.styled';
import { useLabelModal } from '../Modals';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function LabelsMenuSubItemContent(_ref) {
  var onClose = _ref.onClose,
    filesUuids = _ref.filesUuids;
  var _useExplorer = useExplorer(),
    checkUserPermissions = _useExplorer.checkUserPermissions;
  var dispatch = useDispatch();
  var i18n = useExplorerI18n();
  var info = useExplorerInformer();
  var openLabelModal = useLabelModal();
  var labelsSearchTerm = useSelector(selectLabelsSearchTerm);
  var debouncedLabelsSearchTerm = useDebounce(labelsSearchTerm, 300);
  var handleOnLabelClick = function handleOnLabelClick(label) {
    return function () {
      var labelsSids = [label === null || label === void 0 ? void 0 : label.sid];
      dispatch(attachFilesLabels({
        filesUuids: filesUuids,
        labelsSids: labelsSids
      })).then(function () {
        info(i18n('labelViewModelLabelsAttachedInfo', {
          smart_count: labelsSids.length
        }), 'success', 3000);
      });
      onClose();
    };
  };
  var handleLabelsSearchTerm = function handleLabelsSearchTerm(_ref2) {
    var value = _ref2.target.value;
    dispatch(labelsSearchTermUpdated(value));
  };
  var filteredLabels = useSelector(function (state) {
    return selectLabelsBySearchTerm(state, debouncedLabelsSearchTerm);
  });
  var openLabelsView = function openLabelsView() {
    onClose();
    dispatch(activateLabelsView());
  };
  return /*#__PURE__*/_jsxs(Styled.LabelsSubMenuItem, {
    children: [/*#__PURE__*/_jsxs(Styled.SubMenuItemHeader, {
      isLabelsContext: true,
      children: [/*#__PURE__*/_jsx(Search, {
        size: "sm",
        type: "search",
        fullWidth: true,
        value: labelsSearchTerm,
        onChange: handleLabelsSearchTerm,
        placeholder: i18n('headerBarSearchLabel'),
        style: {
          marginBottom: 8
        }
      }), /*#__PURE__*/_jsx(Typography, {
        fontVariant: FV.InputSm,
        variant: "hint",
        children: i18n('labelsMenuSearchHint')
      })]
    }), /*#__PURE__*/_jsxs(Styled.SubMenuItemContent, {
      isLabelsContext: true,
      children: [labelsSearchTerm && filteredLabels.length === 0 && checkUserPermissions([PERMISSIONS.LABEL_MANAGE]) && /*#__PURE__*/_jsx(MenuItem, {
        onClick: function onClick() {
          onClose();
          openLabelModal({
            name: labelsSearchTerm
          }, filesUuids);
        },
        children: i18n('labelsMenuCreateLabelButton')
      }, "create"), filteredLabels.map(function (label) {
        return /*#__PURE__*/_jsxs(MenuItem, {
          onClick: handleOnLabelClick(label),
          children: [/*#__PURE__*/_jsx(Styled.IconWrapper, {
            color: label === null || label === void 0 ? void 0 : label.color,
            children: /*#__PURE__*/_jsx(LabelIcon, {
              size: 12
            })
          }), /*#__PURE__*/_jsx(Styled.Truncate, {
            children: label === null || label === void 0 ? void 0 : label.name
          }), Boolean(label === null || label === void 0 ? void 0 : label.is_pinned) && /*#__PURE__*/_jsx(Styled.IconWrapper, {
            ml: true,
            children: /*#__PURE__*/_jsx(PinIcon, {
              size: 12
            })
          })]
        }, label.uuid);
      })]
    }), checkUserPermissions([PERMISSIONS.LABEL_MANAGE]) && /*#__PURE__*/_jsx(Styled.SubMenuItemFooter, {
      isLabelsContext: true,
      children: /*#__PURE__*/_jsx(Button, {
        size: "sm",
        onClick: openLabelsView,
        children: i18n('breadcrumbsLabelsMenuButton')
      })
    })]
  });
}
export default LabelsMenuSubItemContent;