import React from 'react';

class ProjectsDisplay extends React.Component {
    
    constructor(props)
    {
        super(props);
        const options = { threshold: 0.5};
        this.observerCallback = this.observerCallback.bind(this);

        this.observer = new IntersectionObserver(this.observerCallback, options);
        this.selfRef = React.createRef();
    }
    
    observerCallback(entry)
    {
        console.log(entry[0]);
        if (!this.props.proj.intersect ||
            entry[0].intersectionRatio > 0.5
            )
        {
            console.log("pris")
            this.props.proj.intersect = entry[0].intersectionRatio
            this.props.parentComponent.elementVisible(this.props.proj);
        }
    }

    componentDidMount() {
        //console.log(this.props)
        this.observer.observe(this.selfRef.current);  
    }

    render() {
        var descDisplay = <div></div>;
        var nameDisplay = <div>coucou</div>;
        var pictureDisplay = <div></div>;
        if(this.props.proj.tech)
        {
            descDisplay = <div dangerouslySetInnerHTML={{__html: this.props.proj.tech.fr}}/>
        }
        if(this.props.proj.fr)
        {
            nameDisplay = <div dangerouslySetInnerHTML={{__html: this.props.proj.fr}}/>
        }
        if(this.props.proj.pict && this.props.proj.pict.length > 0)
        {
            pictureDisplay = [];
            var pictureCount = this.props.proj.pict.length;
            var pictClass = "pict ";
            switch(pictureCount)
            {
                case 1:
                    pictClass += "pict_one";
                    break;
                case 2:
                    pictClass += "pict_two";
                    break;
                case 3:
                    pictClass += "pict_three";
                    break;
                case 4:
                    pictClass += "pict_four";
                    break;
            }
            this.props.proj.pict.forEach(element => {
                if(element.split('.').pop() == "webm")
                {
                    pictureDisplay.push(
                        <video key={element} class={pictClass} autoPlay loop >
                            <source src={element} type="video/webm"/>
                            Sorry, your browser doesn't support embedded videos.
                        </video>
                    );
                }
                else
                {
                    pictureDisplay.push(
                        <img key={element} src={element} class={pictClass}/>
                    );
                }
            });
        }
        return (
        <div class="card" id={this.props.proj.name} ref={this.selfRef}>
            <div class="card_picture">
                    {pictureDisplay}
            </div>
            <div class="card_label">
                <div class="card_title">{nameDisplay}</div>
                <div class="card_description">{descDisplay}</div>
            </div>
        </div>
        );
    }
  }

export default ProjectsDisplay