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

class MduiFloatActionButtonElement extends HTMLElement {
    private _hide: boolean | undefined
    private _color: string | undefined
    private _fixed: boolean | undefined
    private _mini: boolean | undefined

    constructor() {
        super();
        this.classList.add("mdui-fab")
        this.classList.add("mdui-ripple")
        // 如果标签不是空标签，就会尝试将标签内文字转换成图标
        const iconText = this.innerText
        if (iconText != "") {
            const icon = document.createElement("i")
            icon.innerText = String(iconText).toLowerCase()
            this.innerText = ""
            icon.classList.add("mdui-icon")
            icon.classList.add("material-icons")
            this.appendChild(icon)
        }

        const timerListener = () => {
            if (this.hide != this._hide) {
                this._hide = this.hide
                if (this.hide) {
                    this.classList.add("mdui-fab-hide")
                } else {
                    this.classList.remove("mdui-fab-hide")
                }
            }

            if (this.fixed != this._fixed) {
                this._fixed = this.fixed
                if (this.fixed) {
                    this.classList.add("mdui-fab-fixed")
                } else {
                    this.classList.remove("mdui-fab-fixed")
                }
            }

            if (this.color != this._color) {
                this._color = this.color
                if (this.color) {
                    ClassUtil.changeColor(this.color, this)
                    if (this.color == "white") {
                        this.classList.add("mdui-ripple-black")
                    } else {
                        this.classList.remove("mdui-ripple-black")
                    }
                }
            }

            if (this.mini != this._mini) {
                this._mini = this.mini
                if (this.mini) {
                    this.classList.add("mdui-fab-mini")
                } else {
                    this.classList.remove("mdui-fab-mini")
                }
            }
        }

        setInterval(timerListener, 50)
    }

    /**
     * 在浮动操作按钮上设置fixed属性可以使浮动操作按钮固定在容器右下方
     * 示例：
     * <mdui-fab fixed>add</mdui-fab>
     */
    get fixed() {
        const fixedAttr = this.getAttributeNode("fixed")
        if (fixedAttr == null) {
            return false
        }
        return fixedAttr.value != "false"
    }

    set fixed(isFixed: boolean) {
        this._fixed = isFixed
        this.setAttribute("fixed", String(isFixed))
        if (isFixed) {
            this.classList.add("mdui-fab-fixed")
        } else {
            this.classList.remove("mdui-fab-fixed")
        }
    }

    /**
     * 在浮动操作按钮上设置color属性可更改按钮颜色，默认白色
     * 示例：靛青色浮动操作按钮
     * <mdui-fab color="indigo">add</mdui-fab>
     */
    get color() {
        const colorAttr = this.getAttributeNode("color")
        if (colorAttr == null) {
            return "white"
        }
        return colorAttr.value
    }

    set color(color: string) {
        this._color = color
        this.setAttribute("color", color)
        ClassUtil.changeColor(color, this)
        if (color == "white") {
            this.classList.add("mdui-ripple-black")
        } else {
            this.classList.remove("mdui-ripple-black")
        }
    }

    /**
     * 在浮动操作按钮上设置hide属性可以使按钮以动画的形式隐藏
     * 示例：哈？这个没法演示诶
     */
    get hide() {
        const hideAttr = this.getAttributeNode("hide")
        if (hideAttr == null) {
            return false
        }
        return hideAttr.value != "false"
    }

    set hide(isHide: boolean) {
        this._hide = isHide
        this.setAttribute("hide", String(isHide))
        if (isHide) {
            this.classList.add("mdui-fab-hide")
        } else {
            this.classList.remove("mdui-fab-hide")
        }
    }

    /**
     * 在浮动操作按钮上设置mini属性可以让按钮变成迷你型浮动操作按钮
     * 示例：
     * <mdui-fab mini>add</mdui-fab>
     */
    get mini() {
        const miniAttr = this.getAttributeNode("mini")
        if (miniAttr == null) {
            return false
        }
        return miniAttr.value != "false"
    }

    set mini(isMini: boolean) {
        this._mini = isMini
        this.setAttribute("mini", String(isMini))
        if (isMini) {
            this.classList.add("mdui-fab-mini")
        } else {
            this.classList.remove("mdui-fab-mini")
        }
    }
}

class MduiFabWrapperElement extends HTMLElement {
    constructor() {
        super();
        this.classList.add("mdui-fab-wrapper")
        this.setAttribute("mdui-fab", "{trigger: 'hover'}")
    }
}

class MduiFabDialElement extends HTMLElement {
    constructor() {
        super();
        this.classList.add("mdui-fab-dial")
    }
}

export {MduiFloatActionButtonElement, MduiFabWrapperElement, MduiFabDialElement}