// Copyright 2025 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import '//resources/cr_elements/cr_button/cr_button.js';
import '//resources/cr_elements/icons.html.js';
import '//resources/cr_elements/cr_tooltip/cr_tooltip.js';
import { loadTimeData } from '//resources/js/load_time_data.js';
import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js';
import { BrowserProxyImpl } from './contextual_tasks_browser_proxy.js';
import { getCss } from './onboarding_tooltip.css.js';
import { getHtml } from './onboarding_tooltip.html.js';
export class ContextualTasksOnboardingTooltipElement extends CrLitElement {
    static get is() {
        return 'contextual-tasks-onboarding-tooltip';
    }
    static get styles() {
        return getCss();
    }
    render() {
        return getHtml.bind(this)();
    }
    static get properties() {
        return {
            target: { type: Object },
            shouldShow: { type: Boolean },
            isCoinsEnabled: {
                type: Boolean,
                reflect: true,
            },
        };
    }
    #target_accessor_storage = null;
    // The element that the tooltip is anchored to.
    get target() { return this.#target_accessor_storage; }
    set target(value) { this.#target_accessor_storage = value; }
    #shouldShow_accessor_storage = false;
    get shouldShow() { return this.#shouldShow_accessor_storage; }
    set shouldShow(value) { this.#shouldShow_accessor_storage = value; }
    #isCoinsEnabled_accessor_storage = loadTimeData.getBoolean('tabFaviconChipsToCoinsEnabled');
    get isCoinsEnabled() { return this.#isCoinsEnabled_accessor_storage; }
    set isCoinsEnabled(value) { this.#isCoinsEnabled_accessor_storage = value; }
    onboardingTooltipIsVisible_ = false;
    numberOfTimesTooltipShown_ = 0;
    maximumTimesTooltipShown_ = loadTimeData.getInteger('composeboxShowOnboardingTooltipSessionImpressionCap');
    isOnboardingTooltipDismissCountBelowCap_ = loadTimeData.getBoolean('isOnboardingTooltipDismissCountBelowCap');
    userDismissedTooltip_ = false;
    tooltipResizeObserver_ = null;
    tooltipMutationObserver_ = null;
    tooltipImpressionTimer_ = null;
    tooltipImpressionDelay_ = loadTimeData.getInteger('composeboxShowOnboardingTooltipImpressionDelay');
    get tooltip_() {
        return this.shadowRoot.querySelector('cr-tooltip');
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.stopObservingTooltipResize_();
        this.clearTooltipImpressionTimer_();
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        if (changedProperties.has('target') && this.target) {
            this.tooltip_.target = this.target;
        }
    }
    show() {
        if (this.tooltip_) {
            this.tooltip_.show();
            this.updatePosition();
        }
    }
    hide() {
        if (this.tooltip_) {
            this.tooltip_.hide();
        }
    }
    updatePosition() {
        if (this.tooltip_ && this.target) {
            const targetRect = this.target.getBoundingClientRect();
            // Margin to the right of the window.
            const MARGIN_RIGHT = 24;
            const availableWidth = window.innerWidth - targetRect.left - MARGIN_RIGHT;
            this.tooltip_.style.setProperty('--onboarding-tooltip-width', `${availableWidth}px`);
            const parentRect = this.tooltip_.offsetParent?.getBoundingClientRect();
            const tooltipRect = this.tooltip_.getBoundingClientRect();
            if (parentRect) {
                const left = targetRect.left - parentRect.left;
                // Position top: targetTop - tooltipHeight.
                // We use offset=0 as configured in HTML.
                const top = (targetRect.top - parentRect.top) - tooltipRect.height;
                this.tooltip_.style.left = `${left}px`;
                this.tooltip_.style.top = `${top}px`;
                this.tooltip_.style.right = 'auto';
                this.tooltip_.style.bottom = 'auto';
            }
        }
    }
    updateTooltipVisibility(hasToken, target, container) {
        if (!loadTimeData.getBoolean('showOnboardingTooltip')) {
            return;
        }
        if (this.onboardingTooltipIsVisible_ && !hasToken) {
            this.hide();
            this.onboardingTooltipIsVisible_ = false;
            this.stopObservingTooltipResize_();
            this.clearTooltipImpressionTimer_();
        }
        else if (hasToken) {
            if (target) {
                this.target = target;
            }
            if (this.onboardingTooltipIsVisible_) {
                this.updatePosition();
            }
            else if (this.shouldShowOnboardingTooltip()) {
                this.show();
                this.startObservingTooltipResize_(target, container);
                this.onboardingTooltipIsVisible_ = true;
                this.tooltipImpressionTimer_ = setTimeout(() => {
                    this.numberOfTimesTooltipShown_++;
                    this.tooltipImpressionTimer_ = null;
                }, this.tooltipImpressionDelay_);
            }
        }
        this.shouldShow = this.onboardingTooltipIsVisible_;
    }
    shouldShowOnboardingTooltip() {
        return this.numberOfTimesTooltipShown_ < this.maximumTimesTooltipShown_ &&
            this.isOnboardingTooltipDismissCountBelowCap_ &&
            !this.userDismissedTooltip_ && this.target !== null;
    }
    clearTooltipImpressionTimer_() {
        if (this.tooltipImpressionTimer_) {
            clearTimeout(this.tooltipImpressionTimer_);
            this.tooltipImpressionTimer_ = null;
        }
    }
    startObservingTooltipResize_(target, container) {
        this.stopObservingTooltipResize_();
        // Observe the tooltip target for any size changes.
        this.tooltipResizeObserver_ = new ResizeObserver(() => {
            if (this.target) {
                this.updatePosition();
            }
        });
        if (target) {
            this.tooltipResizeObserver_.observe(target);
        }
        // Observe container and target for any style or class changes.
        this.tooltipMutationObserver_ = new MutationObserver(() => {
            if (this.target) {
                this.updatePosition();
            }
        });
        const mutationObserverOptions = {
            attributes: true,
            attributeFilter: ['style', 'class'],
        };
        if (container) {
            this.tooltipMutationObserver_.observe(container, mutationObserverOptions);
        }
        if (target) {
            this.tooltipMutationObserver_.observe(target, mutationObserverOptions);
        }
    }
    stopObservingTooltipResize_() {
        if (this.tooltipResizeObserver_) {
            this.tooltipResizeObserver_.disconnect();
            this.tooltipResizeObserver_ = null;
        }
        if (this.tooltipMutationObserver_) {
            this.tooltipMutationObserver_.disconnect();
            this.tooltipMutationObserver_ = null;
        }
    }
    onTooltipCloseClick_(e) {
        e.stopPropagation();
        BrowserProxyImpl.getInstance().handler.onboardingTooltipDismissed();
        this.userDismissedTooltip_ = true;
        this.onboardingTooltipIsVisible_ = false;
        this.stopObservingTooltipResize_();
        this.clearTooltipImpressionTimer_();
        this.hide();
        this.fire('onboarding-tooltip-dismissed');
    }
    get numberOfTimesTooltipShownForTesting() {
        return this.numberOfTimesTooltipShown_;
    }
    set numberOfTimesTooltipShownForTesting(n) {
        this.numberOfTimesTooltipShown_ = n;
    }
    set userDismissedTooltipForTesting(dismissed) {
        this.userDismissedTooltip_ = dismissed;
    }
    get tooltipResizeObserverForTesting() {
        return this.tooltipResizeObserver_;
    }
    onHelpLinkClick_(e) {
        e.preventDefault();
        BrowserProxyImpl.getInstance().handler.openOnboardingHelpUi();
    }
}
customElements.define(ContextualTasksOnboardingTooltipElement.is, ContextualTasksOnboardingTooltipElement);
