import React,{Component,createRef} from 'react';
import ReactDOM from 'react-dom';
import './sass/movie.scss';
import 'dplayer/dist/DPlayer.min.css';
import DPlayer from './lib/dplayer/DPlayer.min.js';
import pic from './picture.js';
import {video as copyright} from './copyright.js';

class Player extends React.Component {
    constructor(props){
        super(props);
        this.dom = React.createRef()
        this.state = {
            props,
        }
    }
    init(){
        const dom = this.dom.current;
        const props = this.props;
        // $(dom).css('width','60%').css('height','auto').css('margin-top','30px');
        const dp = new DPlayer({
            container: dom,
            screenshot: true,
            video: {
                url: props.url,
                thumbnails: props.thumb,
                pic: props.pic!=""?props.pic:props.cover,
            },
        });
        this.dp = dp;
    }
    componentDidMount(){
        this.init();
        copyright();
    }
    componentDidUpdate(){
        let dp = this.dp;
        let props = this.props;
        dp.switchVideo({
            url: props.url,
            thumbnails: props.thumb,
            pic: props.pic
        });
        dp.play();
    }
    render(){
        const divStyle = {
            width: '60%',
            height: 'auto',
            // marginTop: '20px'
        }
        return (
            <div ref={this.dom} style={divStyle}></div>
        );
    }
}

class Play extends React.Component {
    constructor(props){
        super(props);
        let array = new Array();
        this.array = array;
        this.dom = React.createRef()
        $.ajaxSettings.async = false;
        $.getJSON(this.props.url,(data)=>{
            this.list = data;
            data.forEach(element => {
                this.array.push(element.url);
            });
        });
        this.state = {
            playNow: {
                url: this.list[0].url,
                thumb: this.list[0].thumb,
                pic: this.list[0].pic
            },
        }
    }
    renderList(){
        let array = this.array;
        let content = array.map((value,index)=>{
            return (
                <li key={`play-li-${index}`} value={array[index]} onClick={()=>{this.changePlay(index)}}>
                    <span key={`li-1st-${index}`} className="video-list-index">{index}</span>
                    <span key={`li-2nd-${index}`} className="video-list-value">{value}</span>
                </li>);
        });
        return (
            <ol>
                {content}
            </ol>
        );
    }
    componentDidMount(){
        let lis = $(this.dom.current).find('li');
        let current = lis.eq(0);
        current.addClass("play-now");
    }
    changePlay(i){
        $('li.play-now').removeClass('play-now');
        let lis = $(this.dom.current).find('li');
        let current = lis.eq(i);
        current.addClass("play-now");
        let list = this.list;
        this.setState({
            playNow: list[i]
        });
    }
    render(){
        let playNow = this.state.playNow;
        let base = this.props.base;
        return (
            <div ref={this.dom} id='play'>
                <Player cover={this.props.cover} url={base+playNow.url} thumb={base+playNow.thumb} pic={playNow.pic}/>
                {this.renderList()}
            </div>
        );
    }
}

class Bookshelf extends React.Component {
    render(){
        const props = this.props;
        let data = props.data;
        let base = props.base;
        let suffix = props.support?'.webp':'.jpg'
        let recom = props.recom + suffix;
        let videoBase = props.videoBase;
        let playlist = props.list;
        let cover = props.cover;
        let shelf = [];
        for(let i=0;i<=4;i++) shelf.push(data[i]);
        shelf[0].style = "list-big";
        let books = shelf.map(function(item){
            let book = <Book dataStyle={item.style} link={item.href} id={item.id} key={`book-${item.id}`} src={base + item.id + suffix} />;
            return book;
        });

        // 下面的movie列表
        let movies = data.map((item)=>{
            return (
                <Movie key={`video-${item.id}`} base={base} name={item.name} id={item.id} href={item.href} rating={item.rating}
                    comment={item.comment} intro={item.intro} tags={item.tags} date={item.date} support={this.props.support} />
            );
        });

        return (
            <div className="book-movies">
                <div className="book-box">
                    <h3 className="title">小姐姐的家🏠</h3>
                    <section className="book-list">
                        {books}
                    </section>
                    <section className="book-outline"></section>
                </div>
                <div className="book-recom">
                    <img src={recom}/>
                </div>
                <Play base={videoBase} cover={cover}
                    url={playlist}/>
                <div className="book-all-movies">
                    <nav></nav>
                    {movies}
                </div>
            </div>
        );
    }
}

class Book extends Component {
    constructor(props){
        super(props);
    }
    render(){
        const props = this.props;
        return (
            <div data-style={props.dataStyle} key={props.id} data-id={props.id} className="list-item">
                <img key={props.link} data-link={props.link} src={props.src} />
            </div>
        );
    }
}

class Movie extends Component {
    constructor(props){
        super(props);
    }

    render(){
        const props = this.props;
        const base = props.base;
        let suffix = props.support?'.webp':'.jpg';
        return (
            <div className="movie-item">
                <img src={base + props.id + suffix}/>
                <div className="movie-item-info">
                    <ul>
                        <li className="name"><a href={props.href}>{props.name}</a></li>
                        <li className="intro">{props.intro}</li>
                        <li>
                            <span>{props.date}</span>
                            <span className={"rating " + props.rating}></span>
                            <span>{props.tags}</span>
                        </li>
                        <li>{props.comment}</li>
                        </ul>
                </div>
            </div>
        );
    }
}

class BookMovie extends Component{
    constructor(props){
        super(props);
        let conf = props.conf;
        this.base = conf.base;
        this.recom = conf.recom;
        this.videoBase = conf.videoBase;
        this.playlist = conf.playlist;
        this.watchlist = conf.watchlist;
        this.cover = conf.cover;
        this.state = {
            bookshelf: createRef()
        };
    }

    componentDidMount(){
        let dom = this.state.bookshelf.current;
        let watchlist = this.watchlist;
        let base = this.base;
        $.get(watchlist,result=>{
            let data = result;
            pic.check_webp_feature('lossy',(feature,ok)=>{
                ReactDOM.render(
                    <Bookshelf base={base} data={data} recom={this.recom} cover={this.cover}
                        videoBase={this.videoBase} list={this.playlist} support={ok}/>,
                        dom
                );
            });
            
        },'json'); 
    }

    render(){
        return <div ref={this.state.bookshelf} id='bookshelf' />
    }
    
}


let conf={
    base:"https://file.ourfor.top/source/blog/media/video/",
    watchlist: "https://api.ourfor.top/blog/video/watchlist",
    recom:"https://file.ourfor.top/source/blog/media/video/recom",
    videoBase:"https://file.ourfor.top/youtube/",
    playlist:"https://file.ourfor.top/youtube/.video/playlist.json",
    cover: "https://file.ourfor.top/youtube/.video/kiki.jpg",
}

export default BookMovie;