import React, {Component} from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class ModalConfirm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modal: false
        };
    }

    toggle = () => {
        this.setState({
            modal: !this.state.modal
        });
    };

    getComponent= (key) => {
        return this.props.children.filter( (comp) => {
            return comp.key === key;
        });
    };

    render() {
        return (
                <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className+" modal-dialog-centered"} >
                    <ModalHeader toggle={this.toggle}>{this.getComponent("title")}</ModalHeader>
                    <ModalBody>
                        {this.getComponent("body")}
                    </ModalBody>
                    <ModalFooter>
                        <Button color="primary-outline" className="text-primary border-primary" onClick={this.toggle}>{this.getComponent("cancel")}</Button>
                        <Button color="primary" onClick={this.toggle}>{this.getComponent("confirm")}</Button>
                    </ModalFooter>
                </Modal>
        );
    }
}

export default ModalConfirm;