import React from 'react'
import { Container,Row,Col} from 'reactstrap';
import Breadcrumbs from './Breadcrumbs';
import Subheader from './Subheader'; 

class Videos extends React.Component{
    constructor(){
        super();
        this.state={
          data:'',
         
          result:[]
        }
      }

    componentDidMount(){
      const env=process.env.NODE_ENV;
        const url = env === 'production'? 'http://35.188.161.64/server/videos':'http://localhost:5000/videos'
        fetch(url,{
          method:'get',
        })
        .then((response) => {
          return response.json();
        }).then((response_json) => {
    
          this.setState({data:response_json});
    
          if(this.state.data.code === true)
          {
            this.setState({result:this.state.data.result})
            // console.log(this.state.result)
          }
          else{
            this.setState({message:"No videos available or error in server"})
          }
          
        })
      }

    render(){
    return (
        <>
        <Breadcrumbs path="Videos" />
        <Subheader path="Videos" />
        <div data-aos="fade-up" data-aos-duration="1000" >
        <Container>
        {this.state.result.map((content)=> 
        (       
        <div key={content.id}>
        { content.id %2 !==0 && 
        <div data-aos="fade-up" data-aos-duration="1000" >
        <Row className="justify-content-center align-items-center" style={{margin:"0px auto",paddingTop:"50px",minHeight:"200px"}}>
        <Col  xs="12" lg="4" >
        <iframe className=" round-border"  src={content.link} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
        </Col>
        
        <Col xs="12" lg="8" style={{padding:"15px"}}>
            <div className=" text-left ">
            <h4 className="orange">{content.title}</h4>
            <p>{content.description}</p>
            <hr className="d-none d-md-block mb-1 ms-0"></hr>
            <p className="text-muted" style={{fontSize:"0.7em"}}>{content.join_date}</p>
            </div>
        </Col>
        </Row></div>}
        { content.id %2 ===0 && 
        <div data-aos="fade-up" data-aos-duration="1000" >
        <Row className="justify-content-center align-items-center" style={{margin:"0px auto",paddingTop:"50px",minHeight:"200px"}}>
        <Col  xs="12" lg="4" className="order-lg-last">
        <iframe className=" round-border"  src={content.link} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
        </Col>
        
        <Col xs="12" lg="8" style={{padding:"15px", overflowX:"auto"}} >
            <h4 className="orange text-wrap">{content.title}</h4>
            <p>{content.description}</p>
            <hr className="d-none d-md-block mb-1 ms-0"></hr>
            <p className="text-muted" style={{fontSize:"0.7em"}}>{content.join_date}</p>
        </Col>
        </Row>
        </div>}
            </div>
                ))}
    </Container>
    </div>
    </>
    )
}}

export default Videos