/** @odoo-module **/

import { Component, useState } from "@odoo/owl";
import { browser } from "@web/core/browser/browser";
import { cookie } from "@web/core/browser/cookie";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
import { user } from "@web/core/user";
import { useService } from "@web/core/utils/hooks";

const VALID_SCHEMES = ["light", "dark"];

function currentScheme() {
    const cookieScheme = cookie.get("color_scheme");
    if (VALID_SCHEMES.includes(cookieScheme)) {
        return cookieScheme;
    }
    const userScheme = user.settings?.color_scheme;
    return VALID_SCHEMES.includes(userScheme) ? userScheme : "light";
}

export class FusionThemeToggleSystray extends Component {
    static template = "fusion_theme_switcher.ThemeToggleSystray";
    static props = [];

    setup() {
        this.notification = useService("notification");
        this.state = useState({
            scheme: currentScheme(),
            loading: false,
        });
    }

    get isDark() {
        return this.state.scheme === "dark";
    }

    get nextScheme() {
        return this.isDark ? "light" : "dark";
    }

    get title() {
        return this.nextScheme === "dark" ? _t("Switch to dark mode") : _t("Switch to light mode");
    }

    get iconClass() {
        return this.isDark ? "fa fa-sun-o" : "fa fa-moon-o";
    }

    async onToggleTheme() {
        if (this.state.loading) {
            return;
        }

        const nextScheme = this.nextScheme;
        this.state.loading = true;

        try {
            await user.setUserSettings("color_scheme", nextScheme);
            user.updateUserSettings("color_scheme", nextScheme);
            cookie.set("color_scheme", nextScheme);
            this.state.scheme = nextScheme;
            browser.location.reload();
        } catch {
            this.state.loading = false;
            this.notification.add(_t("Theme switch failed. Please try again."), {
                type: "danger",
            });
        }
    }
}

export const fusionThemeToggleSystrayItem = {
    Component: FusionThemeToggleSystray,
    isDisplayed: () => Boolean(user.userId && user.isInternalUser && user.settings?.id),
};

registry.category("systray").add("fusion_theme_switcher.theme_toggle", fusionThemeToggleSystrayItem, {
    sequence: 100,
});