import Breadcrumbs from './Breadcrumbs';
import Subheader from './Subheader';
import React, { Component } from "react";
import Axios from "axios";
import { Card,CardImg,  CardText, CardColumns, CardHeader, CardBody, Container,Col,Row, Spinner} from 'reactstrap';
import {Link} from "react-router-dom";

class Blog extends Component {
  constructor(props) {
    super(props);

    this.state = {
      item: [],
      isloading: true,
      error: null
    };
  }
  mediumURL =
    "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@visionftfblogs";

  componentDidMount() {
    
    Axios.get(this.mediumURL)

      .then((data) => {
        console.log(data.data)
        const res = data.data.items; 
        const posts = res.filter(item => item.categories.length > 0);

        this.setState(
          (pre) => ({
            item: posts,
            isloading: false
          }),
          () => {
            console.log(this.state);
          }
        );
        console.log(this.state.item);
      })
      .catch((e) => {
        this.setState({ error: e.toJSON() })
        console.log(e);
      });
  }
  render() {
   
    let post
        
    if (this.state.item) {
      post = this.state.item.map((post, index) => (
       
        <Col xs="12" md="4" className="mt-5">
        <Card className="text-center" key={index}>
        <Link
        to={"/blogs/"+post.title}>
        <CardHeader className="orange bg-orange text-white card-border p-3">{post.title}</CardHeader>
            <CardImg top width="100%" src={post.thumbnail} alt="Card image cap" /></Link>
            <CardBody className="card-border" style={{borderTop:"1.5px solid #f98404"}}>
            <CardText className="text-muted"><i className="fa fa-user p-1"></i>{post.author}<br></br><i class="fa fa-calendar p-1"></i>{post.pubDate}</CardText>
            </CardBody>
        </Card>
        </Col>    
        
      ))
    }
    if (this.state.isloading) {
      post = (
        <div className="text-center p-3">
      <Spinner color="primary" />
      <Spinner color="secondary" />
      <Spinner color="success" />
      <Spinner color="danger" />
      <Spinner color="warning" />
      <Spinner color="info" />
      <Spinner color="dark" />
    </div>
    );
    }
    if (this.state.error) {
      let error = this.state.error.code ? this.state.error.code : this.state.error.name;
      let errorMsg = this.state.error.message;
      post = (
        <>
          <h2 className="red text-center">{error}</h2>
          <p className="text-center">{errorMsg}</p>
        </>
      );
    }
    return (
        <div>
        <Breadcrumbs path="Blogs" />
        <Subheader path="Blogs" />
          <Container >
       <CardColumns>
       <div data-aos="fade-up" data-aos-duration="1000" >
        <Row>
        {post}
          </Row>
        </div>
          </CardColumns>
      </Container>
        

          
      </div>
    );
  }
}


export default Blog