import React,{Component,lazy,Suspense, createRef} from 'react';
import './lib/vditor/index.classic.css';
import './sass/page.scss';
import {CopyRight} from './custom.jsx';
import comment from './comment';

class Page extends Component {
    constructor(props){
        super(props);
        this.state = {
            data: {},
            dom: createRef(),
            comment: createRef(),
        };
    }
    componentWillMount(){
        fetch(`https://api.ourfor.top/blog/writes/${this.props.title}`)
        .then(res=>res.json())
        .then(res=>this.setState({data: res}))
        .catch(err=>console.log(err))
    }
    componentDidUpdate(){
        let $img = $('.main-content img:not([class=emoji])');
        if($img.length!==0){
            import(/* webpackChunkName: "fancybox-sytle" */'@fancyapps/fancybox/dist/jquery.fancybox.min.css')
            import(/* webpackChunkName: "fancybox" */'@fancyapps/fancybox')
            .then(module=>{
               $img.wrap("<a class='img-box' data-fancybox='images' data-caption=''></a>"); 
               $img.each((i,e)=>{
                  let $img = $(e);
                  let $box = $(e).parent();
                  $box.wrap($("<div style='text-align:center'></div>"));
                  $box.attr('href',$img.attr('src'));
                  $box.attr('data-caption',$img.attr('alt')) 
               });
            });
        }
        
        // 绘制图表
        let $canvas = $('canvas:not([class=fireworks])');
        if($canvas.length!==0){
            import(/* webpackChunkName: "echart" */'echarts').then(module=>{
                let echarts = module.default;
                $canvas.each((index,e)=>{
                    let $code = $(e).parent().parent();
                    let option = $code.attr('data-echarts-option');
                    $code.removeAttr('data-echarts-option');
                    $code.children().remove();
                    echarts.init($code[0]).setOption(JSON.parse(option));
                });
            });
        };

        // 代码高亮
        let $code = $('pre code');
        if($code.length!==0){
            import(/* webpackChunkName: "code-theme" */'highlight.js/styles/atom-one-light.css');
        }

        // 添加视频播放
        let $video = $('.nost-video')
        if($video.length!==0){
            import(/* webpackChunkName: "video-player" */'./lib/dplayer/DPlayer.min.js').then(module=>{
                let Player = module.default;
                let promise = import(/* webpackChunkName: "video-palyer-style-basic"*/'dplayer/dist/DPlayer.min.css');
                promise.then(()=>{
                    import(/* webpackChunkName: "video-player-style"*/'./sass/video_player.scss');
                    $video.each(function(i){
                        let $dom = $(this)
                        let video = {
                            url: $dom.attr('url'),
                            pic: $dom.attr('pic'),
                            thumbnails: $dom.attr('thumbnails')
                        };
                        $dom.removeAttr('url').removeAttr('pic').removeAttr('thumbnails');
                        let dp = new Player({
                            container: $dom[0],
                            screenshot: true,
                            video
                        });
                    }); 
                });

            });
        }

        // 添加音乐播放
        let $music = $('.nost-music');
        if($music.length!==0){
            import(/* webpackChunkName: "audio-player" */'./lib/cplayer/cplayer.js').then(module=>{
                let Player = module.default;
                $music.each(function(i){
                    let $dom = $(this);
                    if($dom.attr('type')==='playlist'){
                        let data = $dom.data('playlist');
                        let playlist = JSON.parse(data);
                        let ap = new Player({
                            element: $dom[0],
                            playlist,
                            size: '20px'
                        });
                    } else {
                        let ap = new Player({
                            element: $dom[0],
                            playlist: [{
                                name: $dom.attr('name'),
                                artist: $dom.attr('artist'),
                                src: $dom.attr('url'),
                                poster: $dom.attr('pic')
                            }],
                            size: '20px'
                        });    
                    }
                        
                    $dom.removeAttr('url').removeAttr('pic').removeAttr('data-playlist')
                    .css('margin','auto')
                    .css('max-width','550px')
                    .css('margin-bottom','20px');
                });
            });
        }

        comment(this.state.comment.current,this.state.data.articleId);
    }
    render(){
        return (
            <>
            <header>
                <h3>{this.props.title}</h3>
            </header>
            <section ref={this.state.dom} dangerouslySetInnerHTML={{__html: this.state.data.html}}
                className="vditor-preview vditor-reset main-content">
            </section>
            <div id="comment-data">
            <CopyRight />
            <div ref={this.state.comment} className="comment-count">
                <i className="icon ion-ios-chatbubbles" id="comment-count-view"></i>
            </div>
            </div>
            </>
        );
    }
}

export default Page;

// ReactDOM.render(<Page title='那种陌生又熟悉的感觉' />,document.getElementById('main'));