import * as PIXI from "pixi.js"
import { configComponents, Sprite, View, Rect, Text, Circle, AnimatedSprite, Utils } 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'
// @ts-ignore
import body from './images/body.png'
// @ts-ignore
import title from './images/title.png'
import json from './images/spriteSheet/successSheet.json'

const { innerWidth: width, innerHeight: height } = window
const game = new PIXI.Application({
    width,
    height,
    backgroundColor: 0x00ffff,
    resolution: 2,
})
game.view.style.width = width + 'px'
game.view.style.height = height + 'px'
document.body.appendChild(game.view)

configComponents({
    // debug: true,
    uiDesignWidth: 750,
})

game.loader
.add('rect', rect)
.add('span', span)
.add('rabit1', rabit1)    
.add('rabit2', rabit2)
.add('body', body)
.add('title', title)
.add('json', './dist/spriteSheet/successSheet.json')
.load((loader, resources) => {

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

    // const parent = View({
    //     centerX: 0,
    //     centerY: 0,
    //     borderWidth: 2,
    // }) as any
    // parent.id = 'parent'
    // parent.appendTo(game.stage)

    // const sprite = Sprite(title, {
    //     width: '375',
    //     center: ['0', '100'],
    // })
    // sprite.appendTo(game.stage)

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

    const rect = Rect({
        backgroundColor: '#000000',
        borderWidth: 2,
        borderColor: '#dc5353',
        // borderRadius: 20,
        width: 200,
        height: 200,
        left: 200,
        top: 100,
    })
    rect.appendTo(game.stage)
    // const rectText = Text('Rect', {
    //     color: '#a72461',
    //     fontSize: 30,
    //     centerX: 0,
    //     centerY: -20,
    // }) as any
    // rect.appendTo(parent)
    // rectText.appendTo(rect)
    
    // const circle = Circle({
    //     backgroundColor: '#ecfcff',
    //     borderWidth: 5,
    //     borderColor: '#5edfff',
    //     width: 200,
    //     height: 200,
    //     right: 100,
    //     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)
    // console.log(resources)
    // const rabitSprite = AnimatedSprite(Object.keys(resources.json.textures), {
    //     width: 75,
    //     bottom: 200, 
    //     centerX: 0,
    //     animatedLoop: 'true',
    //     animatedSpeed: '30',
    //     zIndex: 2,
    // }) as any

    // rabitSprite.appendTo(game.stage)

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