import { useState } from 'react';
import { Popover } from '@mui/material';

export const ModalSetting = ({ isOpen, onClose, children, hidden = false }) => {
  const [anchorEl, setAnchorEl] = useState(null);

  return (
    <>
      <div ref={setAnchorEl} style={{ height: '0px' }} />
      {anchorEl && (
        <Popover
          open={isOpen}
          onClose={onClose}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'left',
          }}
          slotProps={{
            paper: {
              style: {
                width: 'fit-content',
                height: 'max-content',
                border: '0.06rem solid var(--Stroke, rgba(0, 0, 0, 0.1))',
                borderRadius: '1rem',
                boxShadow:
                  '0rem 2rem 4rem -2rem rgba(0, 0, 0, 0.1),0rem 4rem 6rem -1rem rgba(0, 0, 0, 0.1)',
                marginTop: '1rem',
                pointerEvents: 'auto',
                overflow: 'visible', // Разрешаем выпадающие списки
                display: hidden ? 'none' : '',
              },
            },
            root: {
              style: {
                pointerEvents: 'auto',
                display: hidden ? 'none' : '',
              },
            },
          }}
          sx={{
            zIndex: (theme) => theme.zIndex.modal,
            pointerEvents: 'auto',
            '& .MuiPopover-paper': {
              pointerEvents: 'auto',
            },
            '& .MuiPopover-root': {
              pointerEvents: 'none',
            },
            '& .MuiBackdrop-root': {
              pointerEvents: 'none',
              backgroundColor: 'transparent',
            },
          }}
          disableScrollLock={true}
          disablePortal={false}
          disableEnforceFocus={true}
          disableAutoFocus={true}
        >
          {children}
        </Popover>
      )}
    </>
  );
};
