let React = require('react');

function App(props) {
    return (
        <div id="app">
            <Notification {...props.notification}/>
        </div>
    )
}

let map = {
    success: 'success',
    message: 'info',
    caution: 'warning',
    error: 'danger'
}

class Notification extends React.Component {
    render() {
//       console.log(this.props);
        let props = this.props;
        let type = map[props.type] || 'info';
        let className = ['alert', `alert-${type}`].join(' ');
        if(props.message) {
            return (
                <div className={className}>{props.message}</div>
            )
        }
        return null;
    }
}

// TODO: Create a Confirmation Component
class Confirmation extends React.Component {
//   state = { clicked: false };
  constructor(props) {
    super(props);
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(type) {
    return () => {
      const { accept, decline} = this.props;
      this.setState({ clicked: true });
      if (type === 'accept') {
        accept();
      } else {
        decline();
      }
    }
  };

    render() {
      console.log(this.props);
      const { type, message } = this.props;
      const messageComp = (
        <React.Fragment>
         <p>{message}</p>
         <div className="btn btn-primary" onClick={this.handleClick('accept')}>Sure</div>
         <div className="btn btn-danger" onClick={this.handleClick('decline')}>No Thanks</div>
        </React.Fragment>
      );
        if(!this.state.clicked) {
            return (
              <Notification message={messageComp} type={type} />
            )
        }
        return null;
    }
}