import React,{Component} from 'react'
import Footer from '../Footer/Footer'
import Header from '../Header'
import SubNav from '../SubNav'
import Details from './Details'
import {Link} from 'react-router-dom'
import {Configurations} from '../AppConfig'

class Project extends Component{

state = {
            projectInfo: null,
            reloadHandlerActive: false,
            projectID : this.props.match.params.id,
            projectName: "",
            topProjectInfo: [],
            images: []
}

createImages = (project) =>{
  let Images = Object.values(project.images),
      ImagesURI = Images.map((img, index)=>{
        if( img.includes('Desarrollos.jpg') || img.includes('Home.jpg') || img.includes('H.jpg') ){
          return null
        }
      return project.path+img
      })
  ImagesURI = ImagesURI.filter(function (e) { //Clear null values
    return e != null;
  })
  return ImagesURI
}

    reloadHandler = (id) =>{
      const {createImages} = this
      fetch(Configurations.API.projectInfo(id))
        .then((result)=>{return result.json() })
        .then((project)=>{
          if(project === "error"){
            alert("Error")
          }else{
              this.setState({
                projectInfo: project,
                images: createImages(project)
              },function(){
                document.getElementsByClassName("nav-button")[0].click()
              })
          }
        })
    }

    componentWillMount(){
      const {createImages} = this
      fetch(Configurations.API.projectInfo(this.state.projectID))
        .then((result)=>{return result.json() })
        .then((project)=>{
          if(project === "error"){
            alert("Error")
          }else{
            this.setState({
              projectInfo: project,
              images: createImages(project)
            },function(){
              window.initDogma()
            })
          }
        })
    }

    componentDidMount(){
      window.onload = window.initShit()
    }

    render(){
      const {projectInfo,images} = this.state
      console.log(projectInfo)

      if(!projectInfo){
        return(<h1>. . .</h1>)
      }
      return(
          <div >
              <Header />
              <SubNav reloadHandler={this.reloadHandler} />
              <div className="content full-height no-padding">

              <div className="fixed-info-container">
              <Link to="/portfolio"><button className="goBackBtn">Desarrollos</button></Link>
                <h3>{projectInfo.project.project}</h3>
                  <div className="separator" />
                  <div className="clearfix" />
                  <p>
                    {projectInfo.project.address}
                  </p>
                  <span className="project-status">{projectInfo.project.status}</span>
                  <h4>Características</h4>
                  <Details price={projectInfo.project.price} features={projectInfo.project.features} />
                  <Link className=" btn anim-button   trans-btn   transition  fl-l" to={"/contact/?project="+projectInfo.id}>
                    <span>Informes</span>
                    <i className="fa fa-eye" />
                  </Link>
                  </div>


              {/*  fixed-info-container end*/}
              {/*  resize-carousel-holder*/}
              <div className="resize-carousel-holder vis-info gallery-horizontal-holder">
                {/*  gallery_horizontal*/}
                <div
                  id="gallery_horizontal"
                  className="gallery_horizontal owl_carousel"
                >
                  {
                    images.map((img,index)=>{
                      return (
                      <div key={index}className="horizontal_item">
                        <div className="zoomimage">
                          <img src={img} className="intense" alt="" />
                          <i className="fa fa-expand" />
                        </div>
                        <img src={img} alt="" />
                        <div className="show-info">
                          <span>Info</span>
                          <div className="tooltip-info">
                            <h5>Imagen de muestra</h5>
                            <p>
                              Imagen del desarrollo
                            </p>
                          </div>
                        </div>
                      </div>
                      )
                    })
                  }
                </div>
                {/*  resize-carousel-holder*/}
                {/*  navigation */}
                <div className="customNavigation">
                  <a href="/" className="prev-slide transition">
                    <i className="fa fa-angle-left" />
                  </a>
                  <a href="/" className="next-slide transition">
                    <i className="fa fa-angle-right" />
                  </a>
                </div>
                {/*  navigation end*/}
              </div>
              {/*  gallery_horizontal end*/}
            </div>
            <Footer />
            </div>
        )
    }
}
export default Project