import * as React from 'react';
import {MouseEvent, PureComponent} from 'react';
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from './';

export interface DangerZoneProps {
  modalMessage: string;
  modalTitle: string;
  text: string;
  onRemoveConfirmation: () => void;
}

export interface DangerZoneState {
  modalOpen: boolean;
}

export class DangerZone extends PureComponent<DangerZoneProps, DangerZoneState> {
  state: DangerZoneState = {
    modalOpen: false,
  };

  render() {
    const {modalTitle, modalMessage, text} = this.props;
    const {modalOpen} = this.state;

    return (
      <div className="danger-zone">
        <h2 className="danger-zone-title">Danger Zone</h2>

        <p>{text}</p>

        <Button
          className="btn-uppercase"
          color="danger"
          size="lg"
          onClick={this.toggleModal}
        >
          Delete
        </Button>

        <Modal isOpen={modalOpen} toggle={this.toggleModal}>
          <ModalHeader>{modalTitle}</ModalHeader>
          <ModalBody>{modalMessage}</ModalBody>
          <ModalFooter>
            <Button color="danger" size="lg" onClick={this.confirmRemove}>Delete</Button>
            <Button color="secondary" size="lg" onClick={this.toggleModal}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }

  toggleModal = () => this.setState({modalOpen: !this.state.modalOpen});

  confirmRemove = () => {
    this.toggleModal();
    this.props.onRemoveConfirmation();
  }
}