import React from 'react';
import { UnControlled as CodeMirror } from 'react-codemirror2';
const jsBeautify = require("js-beautify").html;

interface Props {
    code:string
}

const CodePanel =(args:Props) => {
    return(
        <div className = "code">
            <CodeMirror value={args.code}
            options = {{
                mode:"javascript",
                theme:"dracula",
                lineNumbers: true,
                lineWrapping: false,
                indentWithTabs: true,
                smartIndent: true,
            }}
            />
        </div>
    )
}
export const CodeCom = ()=>{
    let useCode = getUseCodeStr();
    let sourceCode = getSourceCode();
    return (
        <div className = "codeContainer">
            <label className="title">组件使用代码：</label>
            <CodePanel code ={useCode}/>
            <label className="title">组件源码代码：</label>
            <CodePanel code ={sourceCode}/>
        </div>
    )
}
//使用代码
const getUseCodeStr = ()=>{
    return `
var list =[];
for(let i= 0;i<20;i++){
    list.push({
        avatar: "//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg",
        nickName: "温**暖",
        text: "免费权益融e购卡券"
    })
}
var danmuara = new Danmu({ datalist: list, danmuwidth: props.danmuwidth, danmuheight: props.danmuheight, lines: props.lines, speed: props.speed, needAvatar: props.needAvatar })
danmuara.x = 100;
danmuara.y = 100;
window.stage.addChild(danmuara)
danmuara.showDame()
    `
}
//源码
const getSourceCode = ()=>{
    return`
export class Danmu extends FYGE.Container{
    danmudata;
    danmuwidth;
    danmuheight;
    // danmuList:FYGE.Container;
    constructor(data?){
        super()
        this.danmudata = data;
        for(let i = 0;i<this.danmudata.lines;i++ ){
            this["danmuList"+i] = new FYGE.Container();
            this["danmuList"+i].height = this.danmudata.danmuheight;
            this["danmuList"+i].width = this.danmudata.danmuwidth;
            this["danmuList"+i].x = 0;
            this["danmuList"+i].y = (this.danmudata.danmuheight-this.danmudata.lines*30)/2*i
            this.addChild(this["danmuList"+i])

        }
        let num = this.danmudata.datalist.length%this.danmudata.lines
        let num2 = Math.floor(this.danmudata.datalist.length/this.danmudata.lines)
        let index = 0;
        for(let i = 0;i<this.danmudata.lines;i++ ){
            
            if(i<num){
                for(let n = 0;n<num2+1;n++ ){
                    
                    this.creatItem(i,n,this.danmudata.datalist[index].text,this.danmudata.needAvatar,this.danmudata.datalist[i].avatar,this.danmudata.datalist[index].nickName)
                    index++
                }
            }else{
                for(let n = 0;n<num2;n++ ){
                    this.creatItem(i,n,this.danmudata.datalist[index].text,this.danmudata.needAvatar,this.danmudata.datalist[i].avatar,this.danmudata.datalist[index].nickName)
                    index++
                }
            }
        }

    }

    showDame(){
        for(let i = 0;i<this.danmudata.lines;i++ ){
            for(let n =0;n<this["danmuList"+i].children.length;n++){
                FYGE.Tween.get(this["danmuList"+i].children[n],{loop:true})
                .set({x:750})
                .wait(480/this.danmudata.speed[i]*n*15)
                .to({x:-500},750/this.danmudata.speed[i]*15)
                .wait(480/this.danmudata.speed[i]*(this["danmuList"+i].children.length-n-1)*15)
            }
        }
    }
    
    creatItem(index,numindex,textlab,needAvatar,avatar?,nickName?){
        var danmuCon:FYGE.Container = new FYGE.Container();
        danmuCon.width = 200;
        danmuCon.height = 30;
        danmuCon.x = 500*numindex
        this["danmuList"+index].addChild(danmuCon)

        var danmuBg:FYGE.Graphics = new FYGE.Graphics();
       
        danmuBg.beginFill(0xb27149,0.8)
        danmuBg.drawRoundedRect(0,0,327, 50,70);
        danmuBg.alpha = 0.7;
        danmuCon.addChild(danmuBg);

        if(needAvatar){
            var danmuAvatarBg:FYGE.Graphics = new FYGE.Graphics();
            danmuAvatarBg.beginFill(0xffce5a);
            danmuAvatarBg.drawCircle(0,0,22);
            danmuAvatarBg.x = 28;
            danmuAvatarBg.y = 25;
            danmuCon.addChild(danmuAvatarBg);

            var mask = new FYGE.Graphics();
            mask.beginFill(0xffffff);
            mask.drawCircle(0,0,22);
            mask.x = 28;
            mask.y = 25;
            danmuCon.addChild(mask);

            var danmuAvatar:FYGE.Sprite = new FYGE.Sprite();
            danmuAvatar = FYGE.Sprite.fromUrl(avatar);
            danmuAvatar.x = 6;
            danmuAvatar.y = 3;
            danmuAvatar.width = 44;
            danmuAvatar.height = 44;
            danmuCon.addChild(danmuAvatar)
            danmuAvatar.mask = mask;
        }
        var nickNameLab:FYGE.TextField = new FYGE.TextField();
        nickNameLab.position.set(68, 15);
        nickNameLab.fillColor = "#ffd800";
        nickNameLab.size = 20;
        nickNameLab.text = nickName
        danmuCon.addChild(nickNameLab)

        var danmuLab:FYGE.TextField = new FYGE.TextField();
        danmuLab.position.set(nickNameLab.textWidth+75, 15);
        danmuLab.fillColor = "#ffffff";
        danmuLab.size = 20;
        danmuLab.text = textlab
        danmuCon.addChild(danmuLab)
    }


}
    `
}