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

const ModalContainer = styled(BaseModalContainer)`
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 5;
  width: 20.06rem;
  min-width: 20.06rem;
  max-width: 20.06rem;
`;

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

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

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

  if (!isOpen) return null;

  return (
    <ModalBackdrop isOpen={isOpen} onClick={handleBackdropClick}>
      <ModalContainer>
        <Stack>
          <Typography sx={{ color: 'var(--GreyDark, rgba(74, 85, 101, 1))' }}>
            Удалить этот элемент?
          </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>
    </ModalBackdrop>
  );
};
