import * as PIXI from "pixi.js"
import { configComponents, Sprite, Container, Rect, Text, Circle, AnimatedSprite, render, style } from '../lib/index'
import "./main.scss"

// @ts-ignore
import rect from './images/rect.jpg'
// @ts-ignore
import span from './images/09.png'
// @ts-ignore
import rabit1 from './images/rabit1.png'
// @ts-ignore
import rabit2 from './images/rabit2.png'
import json from './images/spriteSheet/successSheet.json'

const { innerWidth: width, innerHeight: height } = window
const game = new PIXI.Application({
    width,
    height,
    backgroundColor: 0xffffff,
})
document.body.appendChild(game.view)

style({
    "#parent": `
        width: 1000,
        height: 800;
        center-x: 0;
        center-y: 0;
        border-width: 2;
    `,
    ".font": {
        color: 'blue',
        textAlign: 'center',
        textJustify: 50,
        fontSize: 40,
    },
    ".sprite": {
       width: 200,
       height: 200,
       left: 100,
       top: 100,
    },
    ".rect": `
        backgroundColor: '#f9e090';
        borderWidth: 2;
        borderColor: '#dc5353';
        width: 200;
        height: 200;
        centerX: 0;
        top: 100;
    `,
    '.circle': `
        backgroundColor: #ecfcff;
        borderWidth: 5;
        borderColor: #5edfff;
        width: 200;
        height: 200;
        right: 100;
        top: 100;
    `,
    ".flash": {
        width: 200,
        left: 100, 
        bottom: 150,
        // animatedLoop: false,
        animationSpeed: .4,
    },
    '.rabbit': {
        width: 75,
        bottom: 200, 
        centerX: 0,
        // animatedLoop: false,
        animatedSpeed: .1,
    },
    ".text": {
        width: 200,
        right: 100,
        bottom: 150,
        fontSize: 30,
        color: '#a72461',
        lineHeight: 60,
    },
})
game.loader
.add('rect', rect)
.add('span', span)
.add('rabit1', rabit1)    
.add('rabit2', rabit2)
.add('json', './dist/spriteSheet/successSheet.json')
.load((loader, resources) => {

    const textArr = ['rabit1', 'rabit2'].map((name: string) => {
        return PIXI.Texture.from(name)
    })

    const scene = render(`
        <container id="">
            <sprite className="sprite font" src="rect">Sprite</sprite>
            <rect className="rect font">Rect</rect>
            <circle class="circle font">Circle</circle>
            <animatedsprite className="flash" src="data.frames" />
            <animatedsprite class="rabbit" src="data.textArr" />
            <text class="text">我是一排文字~我会根据宽度自动换行~~</text>
        </container>
    `, game.stage, {
        frames: resources.json.spritesheet.animations.success_frame,
        texture: resources.rect.texture,
        textArr,
    })

    // const parent = Container({
    //     width: 1000,
    //     height: 800,
    //     centerX: 0,
    //     centerY: 0,
    //     borderWidth: 2,
    // }) as any
    // parent.id = 'parent'
    // parent.appendTo(game.stage)

    // const sprite = Sprite(resources.rect.texture, {
    //     width: 200,
    //     height: 200,
    //     left: 100, 
    //     top: 100,
    //     color: 'blue',
    // }) as any

    // const spriteText = Text('Sprite', {
    //     fontSize: 30,
    //     centerX: 0,
    //     centerY: -20,
    // }) as any
    // spriteText.appendTo(sprite)
    // sprite.appendTo(parent)

    // const rect = Rect({
    //     backgroundColor: '#f9e090',
    //     borderWidth: 2,
    //     borderColor: '#dc5353',
    //     // borderRadius: 20,
    //     width: 200,
    //     height: 200,
    //     centerX: 0,
    //     top: 100,
    // }) as any

    // const rectText = Text('Rect', {
    //     color: '#a72461',
    //     fontSize: 30,
    //     centerX: 0,
    //     centerY: -20,
    // }) as any
    // rect.appendTo(scene)
    // rectText.appendTo(rect)
    
    // const circle = Circle({
        // backgroundColor: '#ecfcff',
        // borderWidth: 5,
        // borderColor: '#5edfff',
        // width: 200,
        // height: 200,
        // left: 700,
        // top: 100,
    // }) as any
    // const circleText = Text('Circle', {
    //     color: '#3e64ff',
    //     fontSize: 30,
    //     centerX: 0,
    //     centerY: -20,
    // }) as any
    // circleText.appendTo(circle)
    // circle.appendTo(parent)

    // const frames = resources.json.spritesheet.animations.success_frame
    // const animatedSprite = AnimatedSprite(frames, {
    //     width: 200,
    //     left: 100, 
    //     bottom: 150,
    //     // animatedLoop: false,
    //     animationSpeed: .4,
    // }) as any
    // animatedSprite.appendTo(parent)

    // const textArr = ['rabit1', 'rabit2'].map((name: string) => {
    //     return PIXI.Texture.from(name)
    // })

    // const rabitSprite = AnimatedSprite(textArr, {
    //     width: 75,
    //     bottom: 200, 
    //     centerX: 0,
    //     // animatedLoop: false,
    //     animatedSpeed: .1,
    // }) as any
    // rabitSprite.appendTo(parent)

    // const text = Text('我是一排文字~我会根据宽度自动换行~~', {
    //     width: 200,
    //     right: 100,
    //     bottom: 150,
    //     fontSize: 30,
    //     color: '#a72461',
    //     lineHeight: 60,
    // }) as any    
    // text.appendTo(parent)
})
