// 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 './grouped_action_menu.js';
import { WebUiListenerMixinLit } from '//resources/cr_elements/web_ui_listener_mixin_lit.js';
import { loadTimeData } from '//resources/js/load_time_data.js';
import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js';
import { DEFAULT_SETTINGS, LineFocusMovement, LineFocusStyle, ToolbarEvent } from '../content/read_anything_types.js';
import { ReadAnythingSettingsChange } from '../shared/metrics_browser_proxy.js';
import { ReadAnythingLogger } from '../shared/read_anything_logger.js';
import { getHtml } from './line_focus_menu.html.js';
const LineFocusMenuElementBase = WebUiListenerMixinLit(CrLitElement);
// Stores and propagates the data for the color theme menu.
export class LineFocusMenuElement extends LineFocusMenuElementBase {
    static get is() {
        return 'line-focus-menu';
    }
    render() {
        return getHtml.bind(this)();
    }
    static get properties() {
        return {
            settingsPrefs: { type: Object },
            nonModal: { type: Boolean },
            lineFocusStyle: { type: Object },
            lineFocusMovement: { type: Number },
            groups_: { type: Array },
        };
    }
    #settingsPrefs_accessor_storage = DEFAULT_SETTINGS;
    get settingsPrefs() { return this.#settingsPrefs_accessor_storage; }
    set settingsPrefs(value) { this.#settingsPrefs_accessor_storage = value; }
    #nonModal_accessor_storage = false;
    get nonModal() { return this.#nonModal_accessor_storage; }
    set nonModal(value) { this.#nonModal_accessor_storage = value; }
    #lineFocusStyle_accessor_storage = null;
    get lineFocusStyle() { return this.#lineFocusStyle_accessor_storage; }
    set lineFocusStyle(value) { this.#lineFocusStyle_accessor_storage = value; }
    #lineFocusMovement_accessor_storage = null;
    get lineFocusMovement() { return this.#lineFocusMovement_accessor_storage; }
    set lineFocusMovement(value) { this.#lineFocusMovement_accessor_storage = value; }
    styleOptions_ = [
        {
            title: loadTimeData.getString('lineFocusOffTitle'),
            data: LineFocusStyle.OFF,
        },
        {
            title: loadTimeData.getString('lineFocusUnderlineTitle'),
            data: LineFocusStyle.UNDERLINE,
        },
        {
            title: loadTimeData.getString('lineFocusOneLineTitle'),
            data: LineFocusStyle.SMALL_WINDOW,
        },
        {
            title: loadTimeData.getString('lineFocusThreeLineTitle'),
            data: LineFocusStyle.MEDIUM_WINDOW,
        },
        {
            title: loadTimeData.getString('lineFocusFiveLineTitle'),
            data: LineFocusStyle.LARGE_WINDOW,
        },
    ];
    movementOptions_ = [
        {
            title: loadTimeData.getString('lineFocusStaticTitle'),
            data: LineFocusMovement.STATIC,
        },
        {
            title: loadTimeData.getString('lineFocusCursorLineTitle'),
            data: LineFocusMovement.CURSOR,
        },
    ];
    #groups__accessor_storage = [
        {
            header: {
                title: loadTimeData.getString('lineFocusStyleHeading'),
                separator: false,
            },
            items: this.styleOptions_,
            eventName: ToolbarEvent.LINE_FOCUS_STYLE,
        },
        {
            header: {
                title: loadTimeData.getString('lineFocusMovementHeading'),
                separator: true,
            },
            items: this.movementOptions_,
            eventName: ToolbarEvent.LINE_FOCUS_MOVEMENT,
        },
    ];
    get groups_() { return this.#groups__accessor_storage; }
    set groups_(value) { this.#groups__accessor_storage = value; }
    logger_ = ReadAnythingLogger.getInstance();
    willUpdate(changedProperties) {
        super.willUpdate(changedProperties);
        if (changedProperties.has('lineFocusStyle') &&
            this.lineFocusStyle !== null) {
            this.updateOptionsForStyle_(this.lineFocusStyle);
        }
        if (changedProperties.has('lineFocusMovement') &&
            this.lineFocusMovement !== null) {
            this.updateOptionsForMovement_(this.lineFocusMovement);
        }
        if (changedProperties.has('lineFocusStyle') ||
            changedProperties.has('lineFocusMovement')) {
            this.groups_ = [...this.groups_];
        }
    }
    open(anchor, showAtConfig) {
        this.$.menu.open(anchor, showAtConfig);
    }
    close() {
        this.$.menu.close();
    }
    onLineFocusStyleChange_() {
        this.logger_.logTextSettingsChange(ReadAnythingSettingsChange.LINE_FOCUS_STYLE_CHANGE);
    }
    onLineFocusMovementChange_() {
        this.logger_.logTextSettingsChange(ReadAnythingSettingsChange.LINE_FOCUS_MOVEMENT_CHANGE);
    }
    updateOptionsForStyle_(newStyle) {
        this.styleOptions_.forEach(option => {
            option.selected = option.data === newStyle;
        });
    }
    updateOptionsForMovement_(newMovement) {
        this.movementOptions_.forEach(option => {
            option.selected = option.data === newMovement;
        });
    }
}
customElements.define(LineFocusMenuElement.is, LineFocusMenuElement);
