import styled from '@emotion/styled';
import { createPortal } from 'react-dom';
import {
  ModalBackdrop,
  ModalContainer as BaseModalContainer,
} from '../../../../components/Stages/Modal.styles';
import { Button, Stack, Typography } from '@mui/material';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';

const FullScreenBackdrop = styled(ModalBackdrop)`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
`;

const ModalContainer = styled(BaseModalContainer)`
  position: relative;
`;

export const DeleteUserModal = ({ isOpen, onClose, onConfirm, user }) => {
  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  const handleCancel = () => {
    onClose();
  };

  const handleDelete = () => {
    if (onConfirm && user) {
      onConfirm(user);
    }
    onClose();
  };

  if (!isOpen) return null;

  // Используем Portal для рендера вне таблицы
  return createPortal(
    <FullScreenBackdrop isOpen={isOpen} onClick={handleBackdropClick}>
      <ModalContainer onClick={(e) => e.stopPropagation()}>
        <Stack>
          <Typography
            sx={{
              color: 'var(--GreyDark, rgba(74, 85, 101, 1))',
              fontSize: '1.125rem',
              fontWeight: 500,
            }}
          >
            Удалить пользователя?
          </Typography>

          <Typography variant="grey" sx={{ marginTop: '0.5rem' }}>
            Он будет перемещен в архив.
          </Typography>

          <Stack direction={'row'} spacing={1.25} sx={{ marginTop: '1.5rem' }}>
            <Button
              variant="outlined"
              color="default"
              onClick={handleCancel}
              sx={{ flex: 1 }}
            >
              Отмена
            </Button>
            <Button
              variant="contained"
              color={'warning'}
              startIcon={<DeleteOutlineOutlinedIcon />}
              onClick={handleDelete}
              sx={{ flex: 1 }}
            >
              Удалить
            </Button>
          </Stack>
        </Stack>
      </ModalContainer>
    </FullScreenBackdrop>,
    document.body,
  );
};
