import React, {Component} from 'react';
import {connect} from 'react-redux'
import DeleteIcon from '@material-ui/icons/Delete';
import IconButton from '@material-ui/core/IconButton';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
import {switchCompleted} from '../../../store/actions'

class ToDoList extends Component {

  constructor(props) {
    super(props);
  }

  _onChange = item => event => {
    const index = event.target.value;
    this.props.dispatch(switchCompleted(index, item));
  };

  render() {
    console.log("LIST: ", this.props.todoList)
    return (
      <List>
        {
          this.props.todoList.map((item, i) => (
            <ListItem key={i} button={true}>
              <Checkbox checked={item.completed} onChange={this._onChange(item)} value={i.toString()}/>
              <ListItemText primary={item.text}/>
            </ListItem>
          ))
        }
      </List>)
  }
}

const mapStateToProps = state => ({todoList: state.toDoReducer.todoList});

export default connect(mapStateToProps)(ToDoList);