import * as PIXI from 'pixi.js'
import { extend } from '../utils'
import Component from './component'

/*
* 标签系统
* 用于创建不同类型的元素
*/

// 默认配置
const _config = {
    uiDesignWidth: window.innerWidth,
    debug: false,
}
let singleton: Component = new Component(_config)

/**
 * @param { Component.config } config - 配置标签系统
 */
export const configComponents = (config: Partial<Component.config>) => {
    if (config) {
        singleton = new Component(extend(_config, config))
    }
}

/**
 * 帧动画精灵
 * @param { PIXI.Texture[] } animatedFrames  - 帧数据，为一组 texture 合集
 * @param { Layout.style } style  - 元素样式
 */
export const AnimatedSprite = (animatedFrames: string | PIXI.Texture[] | string[], style: Layout.style = {}) => {
    return singleton.createElement('AnimatedSprite', extend(style, {
        animatedFrames,
    })) as componentAnimateSprite
}

/**
 * 常规精灵
 * @param { Component.spriteImage } image  - 纹理资源
 * @param { Layout.style } style  - 元素样式
 */
export const Sprite = (image: Component.spriteImage, style: Layout.style = {}) => {
    return singleton.createElement('Sprite', extend(style, {
        backgroundImage: image,
    })) as componentSprite
}
/**
 * 容器
 * @param { Layout.style } style - 元素样式
 */
export const View = (style: Layout.style = {}) => {
    return singleton.createElement('View', style) as componentSprite
}

/**
 * 矩形元素
 * @param { Layout.style } style - 元素样式
 */
export const Rect = (style: Layout.style = {}) => {
    return singleton.createElement('Rect', style) as componentRect
}

/**
 * 文本
 * @param { Layout.style } style - 元素样式
 */
export const Circle = (style: Layout.style = {}) => {
    return singleton.createElement('Circle', style) as componentCircle
}

/**
 * 文本
 * @param { string } content - 文本内容
 * @param { Layout.style } style - 文本样式
 */
export const Text = (content: string, style: Layout.style = {}) => {
    return singleton.createElement('Text', extend(style, {
        content,
    })) as componentText
}