/* eslint react/prop-types: 0 */
import React, { Component } from "react";
import ModalConfirm from "./ModalConfirm";

class ButtonWithConfirm extends Component {
  constructor(props) {
    super(props);
    this._modalConfirm = React.createRef();
    this.state = {
      focused: false
    };
  }

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

  render() {
    const classNames = this.props.className.split(" ");

    let classNameForDiv = "";
    let classNameForButton = "";
    classNames.forEach(function(className) {
      if (
        className === "input-group-prepend" ||
        className === "input-group-append"
      ) {
        classNameForDiv += " " + className;
      } else {
        classNameForButton += " " + className;
      }
    });

    return (
      <div className={classNameForDiv}>
        <button
          type="button"
          className={classNameForButton}
          onClick={() => {
            this._modalConfirm.current.toggle();
          }}
          tabIndex={this.props.tabIndex}
        >
          {this.getComponent("button")}
        </button>
        <ModalConfirm
          className={this.props.modalClassName}
          ref={this._modalConfirm}
        >
          <div key="title">{this.getComponent("modal-title")}</div>
          <div key="body">{this.getComponent("modal-body")}</div>
          <div key="confirm">{this.getComponent("modal-confirm")}</div>
          <div key="cancel">{this.getComponent("modal-cancel")}</div>
        </ModalConfirm>
      </div>
    );
  }
}

export default ButtonWithConfirm;