// Copyright 2026 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'chrome://resources/cr_elements/cr_lottie/cr_lottie.js';
import '/strings.m.js';
import { I18nMixinLit } from 'chrome://resources/cr_elements/i18n_mixin_lit.js';
import { assert } from 'chrome://resources/js/assert.js';
import { loadTimeData } from 'chrome://resources/js/load_time_data.js';
import { CrLitElement } from 'chrome://resources/lit/v3_0/lit.rollup.js';
import { getCss } from './app.css.js';
import { getHtml } from './app.html.js';
import { SignInCelebrationBrowserProxyImpl } from './sign_in_celebration_browser_proxy.js';
const SignInCelebrationAppElementBase = I18nMixinLit(CrLitElement);
export class SignInCelebrationAppElement extends SignInCelebrationAppElementBase {
    static get is() {
        return 'sign-in-celebration-app';
    }
    static get styles() {
        return getCss();
    }
    render() {
        return getHtml.bind(this)();
    }
    static get properties() {
        return {
            isDarkMode_: { type: Boolean },
            disableAnimations_: { type: Boolean },
            userInfo_: { type: Object },
        };
    }
    #isDarkMode__accessor_storage = false;
    get isDarkMode_() { return this.#isDarkMode__accessor_storage; }
    set isDarkMode_(value) { this.#isDarkMode__accessor_storage = value; }
    #disableAnimations__accessor_storage = loadTimeData.getBoolean('disableAnimations');
    get disableAnimations_() { return this.#disableAnimations__accessor_storage; }
    set disableAnimations_(value) { this.#disableAnimations__accessor_storage = value; }
    #userInfo__accessor_storage = {
        avatarUrl: loadTimeData.getString('accountPicturePlaceholderUrl'),
        title: '',
    };
    get userInfo_() { return this.#userInfo__accessor_storage; }
    set userInfo_(value) { this.#userInfo__accessor_storage = value; }
    browserProxy_ = SignInCelebrationBrowserProxyImpl.getInstance();
    darkModeListener_;
    matchMedia_;
    listenerIds_ = [];
    isAnimationFinished_ = false;
    constructor() {
        super();
        this.matchMedia_ =
            this.browserProxy_.matchMedia('(prefers-color-scheme: dark)');
        this.isDarkMode_ = this.matchMedia_.matches;
        this.darkModeListener_ = (e) => {
            this.isDarkMode_ = e.matches;
        };
    }
    connectedCallback() {
        super.connectedCallback();
        this.matchMedia_.addEventListener('change', this.darkModeListener_);
        this.listenerIds_.push(this.browserProxy_.callbackRouter.onSignInCelebrationUserInfoUpdated
            .addListener(userInfo => this.updateUserInfo_(userInfo)));
        this.browserProxy_.handler.getSignInCelebrationUserInfo().then(res => this.updateUserInfo_(res.userInfo));
        if (this.disableAnimations_) {
            this.onAvatarAnimationCrLottieCompleted_();
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.matchMedia_.removeEventListener('change', this.darkModeListener_);
        this.listenerIds_.forEach(id => assert(this.browserProxy_.callbackRouter.removeListener(id)));
        this.listenerIds_ = [];
    }
    getAnimationUrl_() {
        return this.isDarkMode_ ?
            'animations/avatar_sign_in_celebration_dark.json' :
            'animations/avatar_sign_in_celebration.json';
    }
    onAvatarAnimationCrLottieCompleted_() {
        if (this.isAnimationFinished_) {
            return;
        }
        this.isAnimationFinished_ = true;
        this.browserProxy_.handler.signInCelebrationFinished();
    }
    updateUserInfo_(userInfo) {
        this.userInfo_ = userInfo;
    }
}
customElements.define(SignInCelebrationAppElement.is, SignInCelebrationAppElement);
