import React from 'react';
import './App.css';
import Person from './Person/Person';

// // ## Functional code generated by creat-react-app ##
// function App() {
//   return (
//     <div className="App">
//       <h1>Hi, I'm a React App, I'm cute.</h1>
//       <p>Created using Functional code</p>
//       <button>Switch Name</button>
//       <Person name="Yutsuo" ilvl="320"> Main Character </Person>
//       <Person name="Schwarzgeist" ilvl="200"/>
//       <Person name="Murom" ilvl="78"/>
//     </div>
//   );
//   // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
// }

// // ## Functional code created using ES6 (React Hooks) ##
// const App = props => {
//   const [charState, setCharState] = React.useState({
//     character: [
//       { name: 'Yutsuo', ilvl: 320 },
//       { name: 'Schwarz', ilvl: 110 },
//       { name: 'Murom', ilvl: 78 }
//     ]
//     // somethingElse: 'something something'
//   });

//   const [somethingElseState, setSomethingElseState] = React.useState('yadda yadda yadda');

//   console.log(charState, somethingElseState);

//   const switchNameHandler = () => {
//     // console.log('\"CLICK\"');
//     // DON'T DO THIS: this.state.character[1].name = 'Schwarzgeist';
//     // Do not mutate state directly. Use setState()  react/no-direct-mutation-state
//     setCharState({
//       character: [
//         { name: 'Yutsuo', ilvl: 320 },
//         { name: 'Schwarzgeist', ilvl: 110 },
//         { name: 'Murom', ilvl: 79 }
//       ],
//       somethingElse: charState.somethingElse
//     });
//   };

//   return (
//     <div className="App">
//       <h1>Hi, I'm a React App, I'm cute.</h1>
//       <p>Created using ES6 Functional code</p>
//       <button onClick={switchNameHandler}>Switch Char</button>
//       <Person name={charState.character[0].name} ilvl={charState.character[0].ilvl} />
//       <Person name={charState.character[1].name} ilvl={charState.character[1].ilvl} />
//       <Person name={charState.character[2].name} ilvl={charState.character[2].ilvl} />
//       <br />
//       <Person name="Yutsuo" ilvl="320"> Main Character </Person>
//       <Person name="Schwarzgeist" ilvl="200"/>
//       <Person name="Murom" ilvl="78"/>
//     </div>
//     );
// // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
// }


// ## OOP code ##
class App extends React.Component {
  state = {
    character: [
      { name: 'char1', ilvl: 320 },
      { name: 'char2', ilvl: 110 },
      { name: 'char3', ilvl: 78 }
    ],
    somethingElse: 'something something'
  }

  switchNameHandler = () => {
    // console.log('\"CLICK\"');
    // DON'T DO THIS: this.state.character[1].name = 'Schwarzgeist';
    // Do not mutate state directly. Use setState()  react/no-direct-mutation-state
    this.setState({
      character: [
        { name: 'Yutsuo', ilvl: 320 },
        { name: 'Schwarzgeist', ilvl: 110 },
        { name: 'Murom', ilvl: 79 }
      ]
    })
  }

  nameChangedHandler = (event) => {
    this.setState({
      character: [
        { name: 'Yutsuo', ilvl: 320 },
        { name: event.target.value, ilvl: 110 },
        { name: 'Murom', ilvl: 79 }
      ]
    })
  }

  render() {
    const style = {
      backgroundColor: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px'
    };

    return (
      <div className="App">
        <h1>Hi, I'm a React App, I'm cute.</h1>
        <p>Created using OOP code</p>
        <button 
          style={style}
          onClick={() => this.switchNameHandler()}>Switch Char</button>
        <Person
          name={this.state.character[0].name}
          ilvl={this.state.character[0].ilvl}
        />
        <Person
          name={this.state.character[1].name}
          ilvl={this.state.character[1].ilvl}
          click={this.switchNameHandler.bind(this, 'Schwarzgeist')}
          changed={this.nameChangedHandler}
        />
        <Person
          name={this.state.character[2].name}
          ilvl={this.state.character[2].ilvl}
        />
        {/* <br />
        <Person name="Yutsuo" ilvl="320">Main Character</Person>
        <Person name="Schwarzgeist" ilvl="200" />
        <Person name="Murom" ilvl="78" /> */}
      </div>
    );
    // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
  }
}

export default App;