export const Button = ({ children, handleClick})=> (
    <div
        className={`button-container ${children}`}
        onClick={() => handleClick(children)}>
        {children}
    </div>
)

export const Screen = props => (
   <div className="input">
   {props.screen}
   </div>
)

class App extends Component {
  //extend component class
  constructor(props) {
    super(props);

    this.state = {
      screen: [],
      sucess: 'SUCESS',
      error: 'ERRO',
      tries: 3,
      password: ''
    }
  }

  //I tried using an input on the screen component
  //but this worked
  //not sure if "the react way"
  addPassword = val => {
     return this.state.screen.length > 3 ? '' : this.setState({screen: this.state.screen + val});
  }

  /*
  pin = '1234';
  validadePassword = (addPassword, pin) => {
    //return addPassword === pin ? this.state.screen.type === 'password' : this.state.screen.type === 'number';
    console.log(pin);
  }*/

  render() {
    return (
      <div className="App">
        <h1>Pin pad</h1>
        <h2>Addcode!</h2>
        <div className="container">
          <Screen
            screen={this.state.screen}

            length = {5}>
          </Screen>
          <div className="row justify-content-md-center">
            <Button handleClick={this.addPassword}>7</Button>
            <Button handleClick={this.addPassword}>8</Button>
            <Button handleClick={this.addPassword}>9</Button>
          </div>
          <div className="row justify-content-md-center">
            <Button handleClick={this.addPassword}>4</Button>
            <Button handleClick={this.addPassword}>5</Button>
            <Button handleClick={this.addPassword}>6</Button>
          </div>
          <div className="row justify-content-md-center">
            <Button handleClick={this.addPassword}>1</Button>
            <Button handleClick={this.addPassword}>2</Button>
            <Button handleClick={this.addPassword}>3</Button>
          </div>
          <div className="row justify-content-md-center">
              <Button handleClick={this.addPassword} class="col align-self-center">0</Button>
            </div>
          </div>
        </div>
    );
  }
}

export default App;