import {ListItem, ListItemText,ListItemGraphic,ListItemMeta } from '@rmwc/list';
import { Icon } from '@rmwc/icon';
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { deleteEntry } from "../../actions.js";
const EntryListItem = ({entry, todoListId,handleDelete}) => {

  const onDelete = (e) => {
    e.preventDefault();
    handleDelete(entry.entryId,todoListId);
  };

  return(
    <ListItem>
     {entry.done 
      ? <ListItemGraphic icon="done" />
      : <ListItemGraphic />
     }
      <ListItemText>
        {entry.title}
      </ListItemText>
      <ListItemMeta>
        <Link to={`/todolist/${todoListId}/entries/${entry.entryId}`} className="listIcon">
          <Icon  icon="edit" />
        </Link>
        <Link to={`/`} ClassName="listIcon">
          <Icon icon="delete" onClick={(e) => onDelete(e)} />
        </Link>
      </ListItemMeta>
    </ListItem>
  );
};
export default connect(
	(ownProps) => {
		return Object.assign({}, ownProps);
	},
	(dispatch) => {
		return {
			handleDelete: (id,todoListId) => dispatch(deleteEntry(id,todoListId))
		};
	}
)(EntryListItem);
