import React from "react"
import axios from "axios"
import ReactHtmlParser from "react-html-parser"
// import { Link } from "react-router-dom"

class Page extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      slug: {},
      data: [],
      loading: true
    }
  }

  componentDidMount() {
    const url = "api link"

    axios
      .get(url)
      .then(response => {
        this.setState({
          slug: this.props.match.params.page_slug,
          data: response.data,
          loading: false
        })
      })
      .catch(error => {
        console.log(error)
      })
  }

  render() {
    let content
    let title

    if (this.state.loading) {
      content = (
        <div>
          <div className="modal is-active">
            <div className="modal-background has-background-primary" />
            <div className="modal-content has-text-centered">
              <p classname="image is-48x48">
                <img src={process.env.PUBLIC_URL + "/img/loader.gif"} alt="" />
              </p>
            </div>
          </div>
        </div>
      );
    } else {
      content = this.state.data.map((response, index) => {
        if (response.slug === this.state.slug) {
          title = response.title.rendered
          return (
            <div key={index}>{ReactHtmlParser(response.content.rendered)}</div>
          )
        }

      })
    }

    return (
      <div>
        <div>
          <section
            className="hero is-small is-bold has-background-black has-text-centered"
            style={{ paddingTop: "4rem", paddingBottom: "4rem" }}
          >
            <div className="hero-body">
              <div className="container">
                <h1 className="title is-1" style={{ color: "#FFD581" }}>
                  {title}
                </h1>
              </div>
            </div>
          </section>
          <div className="section" style={{ margin: "-1.5rem 0 0 0" }}>
            <div className="columns">
              <div className="column">
                <div
                  className="card has-background-dark has-text-white"
                  style={{ height: "100%" }}
                >
                  <div className="card-content">
                    <div className="content blackpages">{content}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Page