import * as PIXI from "pixi.js"
import { configComponents, Sprite, View, 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'
// @ts-ignore
import body from './images/body.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,
// })

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

    const rect1 = Rect({
        backgroundColor: 'red',
        borderWidth: 2,
        borderColor: '#dc5353',
        // borderRadius: 20,
        width: 200,
        height: 200,
        left: 100,
        top: 100,
    })

    rect1.interactive = true
    rect1.on('touchstart', () => {
        console.log('rect1')
    })

    const rect = Rect({
        borderWidth: 2,
        borderColor: '#dc5353',
        // borderRadius: 20,
        width: 200,
        height: 200,
        left: 200,
        top: 100,
    })

    rect1.appendTo(game.stage)
    rect.appendTo(game.stage)
    rect.interactive = true
    rect.on('touchstart', () => {
        console.log('rect')
    })
    
    // 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(resources.rect.texture, {
    //     width: 200,
    //     height: 200,
    //     left: 100, 
    //     top: 100,
    //     color: 'blue',
    // }) as any
    // sprite.appendTo(game.stage)

    // 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,
    //     left: 200,
    //     top: 100,
    // }) as any
    // 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)

    // 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)
})
