import React, { Component } from "react";
import Subheader from './Subheader';
import Axios from "axios";
import { Spinner,Card, CardHeader,  CardBody,
   CardText, Container, Row} from 'reactstrap';
class SingleBlog extends Component {

  constructor(props) {
    super(props);
    this.state = {
      singlePost: {},
      titleid: window.location.pathname,
      error:null,
      isloading:true
    };
  }
  mediumURL =
    "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@visionftfblogs";
  componentDidMount() {
    Axios.get(this.mediumURL)

      .then((data) => {
        const res = data.data.items; 
        const posts = res.filter((item) => item.categories.length > 0);
        for (let i in posts) {
          const title = "/blogs/" + posts[i].title;
        
          if (title === decodeURI(this.state.titleid)) {
            let post = posts[i];
              this.setState((p) => ({
                singlePost: post,
                isloading:false
              }));
            
          }
        }
        
      })
      .catch((e) => {
        this.setState({error:e.toJSON()})
        console.log(e);
      });
  }

  render() {
    let post
    if(this.state.singlePost){
     post =( <>
              <div style={{marginTop:"100px"}}>
                <br></br>
               <Subheader path={this.state.singlePost.title} />
               <br></br><br></br>
               <div data-aos="fade-up" data-aos-duration="1000" >
               <Container>
                 <Row>
                 <Card>
        <CardHeader className="text-muted " style={{textAlign:"right"}}><i className="fa fa-user p-1"></i>{this.state.singlePost.author}<br></br><i class="fa fa-calendar p-1"></i>{this.state.singlePost.pubDate}</CardHeader>
        <CardBody>
          <br></br>
          <CardText><div  className="content" dangerouslySetInnerHTML={{ __html:this.state.singlePost.content}}></div></CardText>
        </CardBody>
      </Card>
                 </Row>
               </Container>
        </div>
  
      <div   >
          </div>
          </div>
      </>
     )
    }
    if(this.state.isloading){
      post = (<div className="text-center p-3" style={{marginTop:"100px"}}>
      <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>

       
       {post}
      </div>
    );
  }
}

export default SingleBlog;