import React from "react";
import FinalList from "./FinalList.js";
import "./App.css";
import Product from "./Product.js";
import { thisTypeAnnotation } from "@babel/types";

const items = [
  {
    id: 1,
    name: "banana",
    symbol: "d"
  },
  {
    id: 2,
    name: "orange",
    symbol: "d"
  },
  {
    id: 3,
    name: "bread",
    symbol: "d"
  },
  {
    id: 4,
    name: "water",
    symbol: "d"
  },
  {
    id: 5,
    name: "cheese",
    symbol: "d"
  },
  {
    id: 6,
    name: "butter",
    symbol: "d"
  }
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: [],
      toSelect: [],
      selectedList: []
    };

    this.nextHandleClick = this.nextHandleClick.bind(this);
    this.buttonSELOnClick = this.buttonSELOnClick.bind(this);
    this.buttonToSELOnClick = this.buttonToSELOnClick.bind(this);
  }

  componentDidMount() {
    this.setState({
      toSelect: items
    });
    console.log(this.state);
  }

  buttonSELOnClick(id) {
    const item = items.find(item => item.id == id);
    const newStateSelect = this.state.selected.filter(item => item.id != id);
    const newStateToSelect = this.state.toSelect.concat(item);

    this.setState({
      selected: newStateSelect,
      toSelect: newStateToSelect,
      selectedList: newStateSelect
    });
  }

  buttonToSELOnClick(id) {
    const item = items.find(item => item.id == id);
    const newStateSelect = this.state.selected.concat(item);
    const newStateToSelect = this.state.toSelect.filter(item => item.id != id);

    this.setState({
      selected: newStateSelect,
      toSelect: newStateToSelect,
      selectedList: newStateSelect
    });
  }

  nextHandleClick = () => {
    this.state.selectedList.map(product => {
      console.log(product.name);
      return <FinalList title={this.shoplistName} name={product.name} />;
    });
  };

  render() {
    console.log(this.state);
    return (
      <div className="App">
        <div className="wrap">
          <div className="selectedProducts">
            {this.state.selected.map(product => {
              return (
                <Product
                  className="minusButton"
                  name={product.name}
                  key={`selected-${product.id}`}
                  id={product.id}
                  symbol="-"
                  onClick={this.buttonSELOnClick}
                />
              );
            })}
          </div>
          <div className="toSelectProducts">
            {this.state.toSelect.map(product => {
              return (
                <Product
                  className="plusButton"
                  name={product.name}
                  key={`toSelect-${product.id}`}
                  id={product.id}
                  symbol="+"
                  onClick={this.buttonToSELOnClick}
                />
              );
            })}
          </div>
          <div>
            <input
              placeholder="Enter shoplist name"
              ref={c => (this.shoplistName = c)}
            />
            <button onClick={this.nextHandleClick()}>Next</button>
          </div>
        </div>
      </div>
    );
  }
}

export default App;