import { IFloatingUI } from "../floating-ui/types";
import { ITooltip, ITooltipProps } from "./types";
import { Base } from "../base";
import { IButton } from "../button/types";
import { Button, ButtonTypes } from "../button";
import { IDropdown } from "../dropdown/types";
import { Dropdown, DropdownTypes } from "../dropdown";
import { FloatingUI, FloatingUIPlacements } from "../floating-ui";

/**
 * Tooltip Types
 */
export enum TooltipTypes {
    Danger = 1,
    Dark = 2,
    Info = 3,
    Light = 4,
    LightBorder = 5,
    Material = 6,
    Primary = 7,
    Secondary = 8,
    Success = 9,
    Translucent = 10,
    Warning = 11
}

/**
 * Tooltip Placements
 */
export { FloatingUIPlacements as TooltipPlacements }

/**
 * Tooltip
 */
class _Tooltip extends Base<ITooltipProps> {
    private _btn: IButton = null;
    private _ddl: IDropdown = null;
    private _elContent: HTMLElement = null;
    private _floatingUI: IFloatingUI = null;

    // Constructor
    constructor(props: ITooltipProps, template: string = "") {
        super(template, props);

        // Configure the collapse
        this.configure();
    }

    // Configure the tooltip
    private configure() {
        // See if the target element was defined
        if (this.props.target) {
            // Update the element
            this.el = this.props.target

            // Configure the options
            this.configureOptions();
        }
        else {
            // See if the dropdown property exists
            if (this.props.ddlProps) {
                // Set the default properties
                let ddlProps = this.props.ddlProps;
                ddlProps.type = ddlProps.type || DropdownTypes.OutlinePrimary;

                // Create the dropdown
                this._ddl = Dropdown(ddlProps);

                // Update the element
                this.el = this._ddl.el.querySelector("button");
            } else {
                // Default the toggle property for the button
                let btnProps = this.props.btnProps || {};
                btnProps.type = btnProps.type || ButtonTypes.OutlinePrimary

                // See if the content is text
                if (typeof (this.props.content) === "string") {
                    // Set the label
                    btnProps.description = this.props.content;
                }

                // Create the button
                this._btn = Button(btnProps);

                // Update the element
                this.el = this._btn.el;
            }

            // Configure the options
            this.configureOptions();

            // Configure the parent
            this.configureParent();
        }
    }

    // Configure the options
    private configureOptions() {
        // Set the theme
        let theme = null;
        switch (this.props.type) {
            // Danger
            case TooltipTypes.Danger:
                theme = "danger";
                break;
            // Dark
            case TooltipTypes.Dark:
                theme = "dark";
                break;
            // Info
            case TooltipTypes.Info:
                theme = "info";
                break;
            // Light
            case TooltipTypes.Light:
                theme = "light";
                break;
            case TooltipTypes.LightBorder:
                theme = "light-border";
                break;
            // Material
            case TooltipTypes.Material:
                theme = "material";
                break;
            // Primary
            case TooltipTypes.Primary:
                theme = "primary";
                break;
            // Secondary
            case TooltipTypes.Secondary:
                theme = "secondary";
                break;
            // Success
            case TooltipTypes.Success:
                theme = "success";
                break;
            // Translucent
            case TooltipTypes.Translucent:
                theme = "translucent";
                break;
            // Warning
            case TooltipTypes.Warning:
                theme = "warning";
                break;
            // Default - Secondary
            default:
                // Set the default theme
                theme = "secondary";
                break;
        }

        // See if a button/dropdown exists
        let objType = this.props.btnProps && this.props.btnProps.type > 0 ? this.props.btnProps.type : null;
        objType = this.props.ddlProps && this.props.ddlProps.type > 0 ? this.props.ddlProps.type : objType;
        if (objType > 0) {
            // Match the theme to the button/dropdown type
            switch (objType) {
                // Danger
                case ButtonTypes.Danger:
                case ButtonTypes.OutlineDanger:
                    theme = "danger";
                    break;
                // Dark
                case ButtonTypes.Dark:
                case ButtonTypes.OutlineDark:
                    theme = "dark";
                    break;
                // Info
                case ButtonTypes.Info:
                case ButtonTypes.OutlineInfo:
                    theme = "info";
                    break;
                // Light
                case ButtonTypes.Light:
                case ButtonTypes.OutlineLight:
                    theme = "light";
                    break;
                // Link
                case ButtonTypes.Link:
                case ButtonTypes.OutlineLink:
                    theme = "light-border";
                    break;
                // Primary
                case ButtonTypes.Primary:
                case ButtonTypes.OutlinePrimary:
                    theme = "primary";
                    break;
                // Secondary
                case ButtonTypes.Secondary:
                case ButtonTypes.OutlineSecondary:
                    theme = "secondary";
                    break;
                // Success
                case ButtonTypes.Success:
                case ButtonTypes.OutlineSuccess:
                    theme = "success";
                    break;
                // Warning
                case ButtonTypes.Warning:
                case ButtonTypes.OutlineWarning:
                    theme = "warning";
                    break;
            }
        }

        // Set the tooltip content element
        if (typeof (this.props.content) === "string") {
            this._elContent = document.createElement("div") as HTMLElement;
            this._elContent.innerHTML = this.props.content;
        } else if (this.props.content) {
            this._elContent = this.props.content as any;
        } else {
            this._elContent = document.createElement("div");
        }

        // Set the padding
        this._elContent.classList.add("p-2");

        // Create the floating ui
        this._floatingUI = FloatingUI({
            className: "floating-tooltip",
            elContent: this._elContent,
            elTarget: this.el,
            options: {
                ...{ arrow: true, flip: true, shift: { padding: 5 }, trigger: "mouse" },
                ...this.props.options
            },
            show: this.props.show,
            placement: this.props.placement || FloatingUIPlacements.Top,
            theme: this.props.type
        });
    }

    /**
     * Public Interface
     */

    // Reference to the button
    get button(): IButton { return this._btn; }

    // Reference to the dropdown
    get ddl(): IDropdown { return this._ddl; }

    // Disbles the tooltip
    disable() {
        // Disable the button or dropdown
        this._btn ? this._btn.disable() : null;
        this._ddl ? this._ddl.disable() : null;
    }

    // Enables the tooltip
    enable() {
        // Enable the button or dropdown
        this._btn ? this._btn.enable() : null;
        this._ddl ? this._ddl.enable() : null;
    }

    // Hides the tooltip
    hide() {
        // See if it's visible
        if (this.isVisible) { this._floatingUI.hide(); }
    }

    // Determines if the tooltip is visible
    get isVisible(): boolean { return this._floatingUI.isVisible; }

    // The floating ui instance
    get floatingUI() { return this._floatingUI; }

    // Sets the tippy content
    setContent(content: string | Element) {
        // See if the content is a string
        if (typeof (content) === "string") {
            // Update the content
            this._elContent.innerHTML = content;
            this._btn ? this._btn.el.setAttribute("aria-description", content) : null;
            this._ddl ? this._ddl.el.setAttribute("aria-description", content) : null;
        } else {
            // Set the tippy content
            this._floatingUI.setContent(content);
        }
    }

    // Shows the tooltip
    show() {
        // See if it's hidden
        if (!this.isVisible) { this._floatingUI.show(); }
    }

    // Toggles the tooltip
    toggle() {
        // Toggle the element
        if (this.isVisible) {
            // Hide the element
            this.hide();
        } else {
            // Show the element
            this.show();
        }
    }
}
export const Tooltip = (props: ITooltipProps, template?: string): ITooltip => { return new _Tooltip(props, template); }