import { Card, CardActionIcons, CardActions, CardActionButtons,CardActionIcon,CardPrimaryAction } from "@rmwc/card";
import { Typography } from "@rmwc/typography";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { deleteTodo } from "../../actions.js";
import React from "react";

const TodoListEntry =({handleDelete, todo}) =>{

    const onDelete = () => {
        handleDelete(todo.listId);
	};



    return (
        <Card className="todoCard">
            <div className="todoCardAction">
                <CardPrimaryAction>
                    <Typography use="headline6" tag="h2">
                        {todo.name}
                    </Typography>
                    <Typography
                        use="subtitle2"
                        tag="h3"
                        theme="textSecondaryOnBackground"
                        style={{ marginTop: '-1rem' }}
                    >
                        erstellt am {todo.creationDate}
                    </Typography>
                </CardPrimaryAction>
                <CardActions>
                    <CardActionButtons>
                    <Link to={`/todolist/${todo.listId}/entries`}>
                        Liste Anzeigen
                    </Link>
                    </CardActionButtons>
                    <CardActionIcons>
                    <Link to={`/todolist/${todo.listId}`}>
                        <CardActionIcon icon="edit" />
                    </Link>
                    <CardActionIcon icon="delete" onClick={() => onDelete()}/>
                    </CardActionIcons>
                </CardActions>
            </div>
        </Card>
    );
};
export default connect(
	(ownProps) => {
		return Object.assign({}, ownProps);
	},
	(dispatch) => {
		return {
			handleDelete: id => dispatch(deleteTodo(id))
		};
	}
)(TodoListEntry);
