import {ClassUtil} from "../utils/ClassUtil";

class MduiIconElement extends HTMLElement {
    private _color: string | undefined
    private _noMaterial: boolean | undefined
    private _left: boolean | undefined
    private _right: boolean | undefined

    constructor() {
        super();
        this.classList.add("mdui-icon")

        const timer = () => {
            if (this._noMaterial != this.notMaterial) {
                this._noMaterial = this.notMaterial
                if (!this.notMaterial) {
                    this.classList.add("material-icons")
                }
            }

            if (this._color != this.color) {
                this._color = this.color
                if (this.color && this.color != "") {
                    ClassUtil.changeTextColor(this.color, this)
                }
            }

            if (this.isParentButton()) {
                if (this.left && this.right) {
                    console.warn("请勿同时设置left和right属性")
                } else {
                    if (this._left != this.left) {
                        this._left = this.left
                        if (this.left) {
                            this.classList.add("mdui-icon-left")
                        }
                    }
                    if (this._right != this.right) {
                        this._right = this.right
                        if (this.right) {
                            this.classList.add("mdui-icon-right")
                        }
                    }
                }
            }
        }

        setInterval(timer, 50)
    }

    /**
     * 设置color属性即可更改图标颜色
     * 示例：将图标颜色设置成蓝色
     * <mdui-icon color="blue">add</mdui-icon>
     */
    get color() {
        const colorAttr = this.getAttributeNode("color")
        if (colorAttr == null) {
            return ""
        }
        return colorAttr.value
    }

    set color(color: string) {
        this.setAttribute("color", color)
        ClassUtil.changeTextColor(color, this)
    }

    /**
     * 设置not-material属性以表示此图标属于第三方图标库
     * 示例：使用ionicons图标
     * <link rel="stylesheet" href="ionicons.css"/>
     * <mdui-icon not-material class="ion-plus-circled"></mdui-icon>
     */
    get notMaterial() {
        const notMaterialAttr = this.getAttributeNode("not-material")
        if (notMaterialAttr == null) {
            return false
        }
        return notMaterialAttr.value != "false"
    }

    set notMaterial(isNotMaterial: boolean) {
        this.setAttribute("not-material", String(isNotMaterial))
        if (isNotMaterial) {
            this.classList.remove("material-icons")
        }
    }

    /**
     * 如果图标在按钮内，设置left属性可以让图标位于按钮左侧
     * 示例：
     * <mdui-btn>
     *     <mdui-icon left>add</mdui-icon>
     * </mdui-btn>
     */
    get left() {
        const leftAttr = this.getAttributeNode("left")
        if (leftAttr == null) {
            return false
        }
        return leftAttr.value != "false"
    }

    set left(isFloatToLeft: boolean) {
        if (!this.isParentButton()) {
            return
        }
        if (isFloatToLeft) {
            this.setAttribute("left", "true")
            this.classList.add("mdui-icon-left")
        }
    }

    private isParentButton(): boolean {
        const parent = this.parentElement
        if (parent == null) {
            return false
        }
        return !(parent.tagName != "MDUI-BTN" || !parent.classList.contains("mdui-btn"));
    }

    /**
     * 如果图标在按钮内，设置left属性可以让图标位于按钮右侧
     * 示例：
     * <mdui-btn>
     *     <mdui-icon right>add</mdui-icon>
     * </mdui-btn>
     */
    get right() {
        const rightAttr = this.getAttributeNode("right")
        if (rightAttr == null) {
            return false
        }
        return rightAttr.value != "false"
    }

    set right(isFloatToRight: boolean) {
        if (!this.isParentButton()) {
            return
        }
        if (isFloatToRight) {
            this.setAttribute("right", "true")
            this.classList.add("mdui-icon-right")
        }
    }
}

export {MduiIconElement}