import React, { ReactNode } from 'react';
import styled from 'styled-components';
import ModalPortal from './Abstractions/ModalPortal';
import { Button, ButtonTypes } from './Button';
import { DraggableContainer } from './DraggableContainer';

export interface IConfirmModalProps {
  onConfirm: () => void;
  onClose: () => void;
  message?: string | ReactNode;
}

export const ConfirmModal: React.FC<IConfirmModalProps> = ({
  onConfirm,
  onClose,
  message = 'Are you sure?',
}) => {
  const handleConfirm = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onConfirm();
  };

  const handleClose = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onClose();
  };

  return (
    <ModalPortal>
      <Background />
      <Container onClick={handleClose}>
        <DraggableContainer width="auto" dragDisabled>
          <Wrapper onClick={e => e.stopPropagation()}>
            {typeof message === 'string' ? <p>{message}</p> : message}

            <ButtonsWrapper>
              <div className="cancel-button">
                <Button
                  buttonType={ButtonTypes.RPGUIButton}
                  onClick={handleClose}
                >
                  No
                </Button>
              </div>
              <Button
                buttonType={ButtonTypes.RPGUIButton}
                onClick={handleConfirm}
              >
                Yes
              </Button>
            </ButtonsWrapper>
          </Wrapper>
        </DraggableContainer>
      </Container>
    </ModalPortal>
  );
};

const Background = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.5;
  left: 0;
  top: 0;
  z-index: 1000;
`;

const Container = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
`;

const Wrapper = styled.div`
  p {
    margin: 0;
  }
`;

const ButtonsWrapper = styled.div`
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 5px;

  .cancel-button {
    filter: grayscale(0.7);
  }
`;
