import React, { Component, Fragment } from "react";
import "./Todos.css";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { addTodo, removeTodo } from "./store";

class TodoList extends Component {
  state = {
    input: "",
  };

  handleclick = i => () =>
    this.props.removeTodo(i);

  handleChange = e =>
    this.setState({ input: e.currentTarget.value });

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.addTodo({ text: this.state.input });
    this.setState({ input: "" });
  };

  render() {
    return (
      <form className="todos--container" data-testid="addTodoForm" onSubmit={this.handleSubmit}>
        <h1 className="todos--h1">Todos</h1>
        <input type="text" name="todo" data-testid="todo"
          onChange={this.handleChange}
          value={this.state.input} />
        <ul>
          {this.props.todos.map(({ text }, i) => (
            <li onClick={this.handleclick(i)} key={i}>
              {text}
            </li>
          ))}
        </ul>
        <button className="todo--button" type="submit" data-testid="submitButton">Add todo</button>
      </form>
    );
  }
}

TodoList.propTypes = {
  addTodo: PropTypes.func,
  removeTodo: PropTypes.func,
  todos: PropTypes.array,
};

const mapStateToProps = ({ currentList: { todos } }) => ({ todos });

const bindActionsToDispatch = dispatch => ({
  addTodo: todo => dispatch(addTodo(todo)),
  removeTodo: id => dispatch(removeTodo(id)),
});

const TodoListContainer = connect(
  mapStateToProps,
  bindActionsToDispatch
)(TodoList);

export {
  TodoListContainer,
  TodoList
};