import { LightningElement, api } from "lwc";
import cx from "classnames";
import { normalizeBoolean } from "dxUtils/normalizers";

export default class ButtonToggle extends LightningElement {
    @api label!: string;

    @api
    get value() {
        return this._value;
    }
    set value(value: boolean) {
        this._value = normalizeBoolean(value);
    }

    @api
    get disabled() {
        return this._disabled;
    }
    set disabled(value: boolean) {
        this._disabled = normalizeBoolean(value);
    }

    private _value = false;
    private _disabled = false;
    private mouseHovering = false;
    private hasFocus = false;

    private get className(): string {
        return cx(this.value && "pressed");
    }

    private get symbol() {
        if (
            (this.value && this.mouseHovering && !this.hasFocus) ||
            (this.value && this.hasFocus)
        ) {
            return "close";
        } else if (this.value) {
            return "check";
        }

        return "add";
    }

    private handleMouseEvent(e: MouseEvent) {
        switch (e.type) {
            case "click":
                this._value = !this._value;
                this.dispatchEvent(
                    new CustomEvent("toggle", {
                        detail: {
                            label: this.label,
                            value: this.value
                        }
                    })
                );
                break;
            case "mouseenter":
                this.mouseHovering = true;
                break;
            case "mouseleave":
                this.mouseHovering = false;
                break;
            case "focus":
                this.hasFocus = true;
                break;
            case "blur":
                this.hasFocus = false;
                break;
            default:
                break;
        }
    }
}