import React from "react";
import "./App.css";

import Validation from "./Validation";
import Char from "./Char";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "" };
  }

  // handleChange = event => {
  //   let newMessage = event.target.value;
  //   this.setState({ message: newMessage });
  // };

  handleChange(event) {
    let newMessage = event.target.value;
    this.setState({ message: newMessage });
  };

  handleDelete(index) {
    let newMessage = [...this.state.message];
    let newSplited = newMessage.toString().split(",");
    newSplited.splice(index, 1);
    newMessage = newSplited.join("");
    this.setState({ message: newMessage });
  }

  render() {
    const input = (
      // <input onChange={this.handleChange.bind(this)} value={this.state.message} /> // --> this works
      <input type="text" onChange={event => this.handleChange(event)} value={this.state.message} /> // --> but this is better
    );

    let splited = this.state.message.split("");

    const charList = splited.map((item, index) => {
      return (
        <Char
          key={index}
          string={item}
          click={() => this.handleDelete(index)}
        />
      );
    });

    return (
      <div className="App">
        <h1>{this.state.message}</h1>
        {input}
        <Validation length={this.state.message.length} />
        {charList}
      </div>
    );
  }
}

export default App;