import React from "react";
import axios from "axios";

import moment from "moment";

import {
  Container,
  Row,
  Col,
  Card,
  CardText,
  CardBody,
  CardLink,
  CardTitle,
  CardSubtitle,
  Button
} from "reactstrap";

import "./Article.css";

this.handleDelete = this.handleDelete.bind(this);

handleDelete(_id) {
  axios
    .delete(`http://localhost:3000/${_id}`)
    .then( function(response) {
      toast.success("Successfully deleted article.");
      this.setState({ artcles: res.data.articles });
    })
    .catch( () => toast.error("Failed to delete article.") );
}

const Article = props => {
  const { title, author, date, url, votes } = props;
  return (
    <Container>
      <Row>
        <Col>
          <Card>
            <CardBody>
              <a href={url}>
                <CardTitle className="naslov">{title}</CardTitle>
              </a>
              <CardSubtitle className="autor">Author: {author}</CardSubtitle>
            </CardBody>
            <CardBody>
              <CardText className="glas">Votes: {votes}</CardText>
              <CardText>
                {moment(date).format("dddd, MMMM Do YYYY, h:mm:ss a")}
              </CardText>
              <Button color="danger" onClick={this.handleDelete}>
                Delete
              </Button>
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Container>
  );
};

export default Article;