import React from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { LibraryAddCheckOutlined } from '@mui/icons-material';

import { JOB_STATE_CREATED, JOB_STATE_PROCESSING } from '../../constants';

import { monitoringStateSelector } from '../../redux/selectors';
import { setAction } from '../../redux/slices';
import { getIsWordpressMode, getIsWPVideoMode } from '@/modules/@common/app/helpers';
import { selectedVideoAction } from '@/modules/editorial/editorialSearchResults/redux/slices';
import { aiPlaylistModeSelector } from '@/modules/editorial/RightSideBar/TabPlaylist/redux/selectors';

import { Button, Tooltip } from '@/mui/components';

function WithProgressTooltip(props) {
  return props.showTooltip ? (
    <Tooltip title="Bulk action in progress. This button will be enabled once the current operation is complete.">
      <div>{props.children}</div>
    </Tooltip>
  ) : (
    props.children
  );
}

WithProgressTooltip.propTypes = {
  showTooltip: PropTypes.bool,
  children: PropTypes.node,
};

function BulkActionsActivateButton() {
  const dispatch = useDispatch();
  const monitoringState = useSelector(monitoringStateSelector);
  const aiPlaylistMode = useSelector(aiPlaylistModeSelector);

  const isWpMode = getIsWordpressMode() || getIsWPVideoMode();
  const hasProcessingState = monitoringState.some((state) =>
    [JOB_STATE_PROCESSING, JOB_STATE_CREATED].includes(state.state),
  );
  const shouldDisable = hasProcessingState || aiPlaylistMode || isWpMode;

  const handleActivateBulkMultiselect = () => {
    dispatch(selectedVideoAction());
    dispatch(setAction({ isActive: true }));
  };

  if (isWpMode) {
    return null;
  }

  return (
    <WithProgressTooltip showTooltip={hasProcessingState}>
      <Button
        variant="outlined"
        size="small"
        color="primary"
        shape="rounded"
        disabled={shouldDisable}
        startIcon={<LibraryAddCheckOutlined />}
        onClick={handleActivateBulkMultiselect}
      >
        Multiple Select
      </Button>
    </WithProgressTooltip>
  );
}

export default BulkActionsActivateButton;
