import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';

import { isUserShareModeSelector } from '../redux/selectors';
import { clearAction } from '../redux/slices';

import AccessLevel from '../components/ChangeAccessLevel/ChangeAccessLevel';
import ShareUsers from '../components/ShareToUsers/ShareToUsers';
import { Dialog, Stack } from '@/mui/components';

import styles from './BulkActionShare.module.scss';

function BulkActionShare(props) {
  const dispatch = useDispatch();
  const isUserShareMode = useSelector(isUserShareModeSelector);

  useEffect(() => () => dispatch(clearAction()), []);

  return (
    <Dialog
      classes={{
        paper: styles.Root,
      }}
      maxWidth="md"
      open={props.open}
      onClose={props.onClose}
    >
      <Stack spacing={2}>
        <ShareUsers onClose={props.onClose} />
        {!isUserShareMode && <AccessLevel onClose={props.onClose} />}
      </Stack>
    </Dialog>
  );
}

BulkActionShare.propTypes = {
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default BulkActionShare;
