import * as PIXI from "pixi.js"
import { configComponents, Sprite, Container, Rect, Text, Circle, AnimatedSprite } 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)

game.loader
.add('rect', rect)
.add('span', span)
.add('rabit1', rabit1)    
.add('rabit2', rabit2)
.add('json', './dist/spriteSheet/successSheet.json')
.load((loader, resources) => {
    // console.log(resources.json.spritesheet.animations.success_frame)
    // const frames = resources.json.spritesheet.animations.success_frame
    // const sprite = AnimatedSprite(frames, {
    //     width: 200,
    //     centerX: 0, 
    //     centerY: 0,
    //     borderWidth: 1,
    //     // animatedLoop: false,
    //     animationSpeed: .5,
    // }) as any
    // sprite.appendTo(game.stage)

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

    // let animatedSprite = new PIXI.AnimatedSprite(resources.json.spritesheet.animations.success_frame, true)
    // animatedSprite.animationSpeed = .11
    // game.stage.addChild(animatedSprite)
    // // animatedSprite.loop = false
    // animatedSprite.play()
// })
    const parent = Container({
        width: 600,
        height: 600,
        centerX: 0,
        centerY: 0,
        borderWidth: 2,
    }) as any
    const containerText = Text('Container', {
        color: 'red',
        fontSize: 30,
        centerX: 0,
        centerY: 0,
    }) as any
    containerText.appendTo(parent)
    parent.appendTo(game.stage)

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

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

    const rect = Rect({
        backgroundColor: '#f9e090',
        borderWidth: 5,
        borderColor: '#dc5353',
        // borderRadius: 20,
        width: 200,
        height: 200,
        right: 50,
        top: 50,
    }) as any

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

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