
import { __decorate, __param } from '../../../../../../../../../../external/tslib/tslib.es6.js';
import '../../../../../../../base/browser/dom.js';
import { ActionBar } from '../../../../../../../base/browser/ui/actionbar/actionbar.js';
import { renderIcon } from '../../../../../../../base/browser/ui/iconLabel/iconLabels.js';
import { KeybindingLabel, unthemedKeybindingLabelOptions } from '../../../../../../../base/browser/ui/keybindingLabel/keybindingLabel.js';
import { Codicon } from '../../../../../../../base/common/codicons.js';
import '../../../../../../../base/common/observableInternal/index.js';
import { OS } from '../../../../../../../base/common/platform.js';
import { ThemeIcon } from '../../../../../../../base/common/themables.js';
import { localize } from '../../../../../../../nls.js';
import { ICommandService } from '../../../../../../../platform/commands/common/commands.service.js';
import { IContextKeyService } from '../../../../../../../platform/contextkey/common/contextkey.service.js';
import { nativeHoverDelegate } from '../../../../../../../platform/hover/browser/hover.js';
import { IKeybindingService } from '../../../../../../../platform/keybinding/common/keybinding.service.js';
import { asCssVariable } from '../../../../../../../platform/theme/common/colorUtils.js';
import { descriptionForeground } from '../../../../../../../platform/theme/common/colors/baseColors.js';
import '../../../../../../../platform/theme/common/colors/chartsColors.js';
import { editorHoverBorder } from '../../../../../../../platform/theme/common/colors/editorColors.js';
import '../../../../../../../platform/theme/common/colors/inputColors.js';
import { editorActionListForeground } from '../../../../../../../platform/theme/common/colors/listColors.js';
import '../../../../../../../platform/theme/common/colors/menuColors.js';
import '../../../../../../../platform/theme/common/colors/minimapColors.js';
import '../../../../../../../platform/theme/common/colors/miscColors.js';
import '../../../../../../../platform/theme/common/colors/quickpickColors.js';
import '../../../../../../../platform/theme/common/colors/searchColors.js';
import { EditorOption } from '../../../../../../common/config/editorOptions.js';
import { inlineSuggestCommitId, jumpToNextInlineEditId, hideInlineCompletionId, toggleShowCollapsedId } from '../../../controller/commandIds.js';
import { InlineEditTabAction } from '../utils/utils.js';
import { observableValue } from '../../../../../../../base/common/observableInternal/base.js';
import { constObservable, observableFromEvent } from '../../../../../../../base/common/observableInternal/utils.js';
import { derived, derivedWithStore } from '../../../../../../../base/common/observableInternal/derived.js';
import { n } from '../../../../../../../base/browser/domImpl/n.js';
import { autorun } from '../../../../../../../base/common/observableInternal/autorun.js';

let GutterIndicatorMenuContent = class GutterIndicatorMenuContent {
    constructor(_host, _close, _editorObs, _contextKeyService, _keybindingService, _commandService) {
        this._host = _host;
        this._close = _close;
        this._editorObs = _editorObs;
        this._contextKeyService = _contextKeyService;
        this._keybindingService = _keybindingService;
        this._commandService = _commandService;
        this._inlineEditsShowCollapsed = ( this._editorObs.getOption(EditorOption.inlineSuggest).map(s => s.edits.showCollapsed));
    }
    toDisposableLiveElement() {
        return this._createHoverContent().toDisposableLiveElement();
    }
    _createHoverContent() {
        const activeElement = observableValue('active', undefined);
        const createOptionArgs = (options) => {
            return {
                title: options.title,
                icon: options.icon,
                keybinding: typeof options.commandId === 'string' ? this._getKeybinding(options.commandArgs ? undefined : options.commandId) : derived(reader => typeof options.commandId === 'string' ? undefined : this._getKeybinding(options.commandArgs ? undefined : options.commandId.read(reader)).read(reader)),
                isActive: ( activeElement.map(v => v === options.id)),
                onHoverChange: v => activeElement.set(v ? options.id : undefined, undefined),
                onAction: () => {
                    this._close(true);
                    return this._commandService.executeCommand(typeof options.commandId === 'string' ? options.commandId : options.commandId.get(), ...(options.commandArgs ?? []));
                },
            };
        };
        return hoverContent([
            header(this._host.displayName),
            option(createOptionArgs({
                id: 'gotoAndAccept', title: `${( localize(1240, "Go To"))} / ${( localize(1241, "Accept"))}`,
                icon: ( this._host.tabAction.map(
                    action => action === InlineEditTabAction.Accept ? Codicon.check : Codicon.arrowRight
                )),
                commandId: ( this._host.tabAction.map(
                    action => action === InlineEditTabAction.Accept ? inlineSuggestCommitId : jumpToNextInlineEditId
                ))
            })),
            option(createOptionArgs({ id: 'reject', title: ( localize(1242, "Reject")), icon: Codicon.close, commandId: hideInlineCompletionId })),
            separator(),
            this._host.extensionCommands?.map(c => c && c.length > 0 ? [
                ...( c.map(
                    (c, idx) => option(createOptionArgs({ id: c.id + '_' + idx, title: c.title, icon: Codicon.symbolEvent, commandId: c.id, commandArgs: c.arguments }))
                )),
                separator()
            ] : []),
            ( this._inlineEditsShowCollapsed.map(showCollapsed => showCollapsed ?
                option(createOptionArgs({ id: 'showExpanded', title: ( localize(1243, "Show Expanded")), icon: Codicon.expandAll, commandId: toggleShowCollapsedId })) :
                option(createOptionArgs({ id: 'showCollapsed', title: ( localize(1244, "Show Collapsed")), icon: Codicon.collapseAll, commandId: toggleShowCollapsedId })))),
            option(createOptionArgs({ id: 'settings', title: ( localize(1245, "Settings")), icon: Codicon.gear, commandId: 'workbench.action.openSettings', commandArgs: ['@tag:nextEditSuggestions'] })),
            ( this._host.action.map(action => action ? [
                separator(),
                actionBar([{
                        id: action.id,
                        label: action.title,
                        enabled: true,
                        run: () => this._commandService.executeCommand(action.id, ...(action.arguments ?? [])),
                        class: undefined,
                        tooltip: action.tooltip ?? action.title
                    }], { hoverDelegate: nativeHoverDelegate  })
            ] : []))
        ]);
    }
    _getKeybinding(commandId) {
        if (!commandId) {
            return constObservable(undefined);
        }
        return observableFromEvent(this._contextKeyService.onDidChangeContext, () => this._keybindingService.lookupKeybinding(commandId));
    }
};
GutterIndicatorMenuContent = ( __decorate([
    ( __param(3, IContextKeyService)),
    ( __param(4, IKeybindingService)),
    ( __param(5, ICommandService))
], GutterIndicatorMenuContent));
function hoverContent(content) {
    return n.div({
        class: 'content',
        style: {
            margin: 4,
            minWidth: 150,
        }
    }, content);
}
function header(title) {
    return n.div({
        class: 'header',
        style: {
            color: asCssVariable(descriptionForeground),
            fontSize: '12px',
            fontWeight: '600',
            padding: '0 10px',
            lineHeight: 26,
        }
    }, [title]);
}
function option(props) {
    return derivedWithStore((_reader, store) => n.div({
        class: ['monaco-menu-option', props.isActive?.map(v => v && 'active')],
        onmouseenter: () => props.onHoverChange?.(true),
        onmouseleave: () => props.onHoverChange?.(false),
        onclick: props.onAction,
        onkeydown: e => {
            if (e.key === 'Enter') {
                props.onAction?.();
            }
        },
        tabIndex: 0,
        style: {
            borderRadius: 3,
        }
    }, [
        n.elem('span', {
            style: {
                fontSize: 16,
                display: 'flex',
            }
        }, [ThemeIcon.isThemeIcon(props.icon) ? renderIcon(props.icon) : ( props.icon.map(icon => renderIcon(icon)))]),
        n.elem('span', {}, [props.title]),
        n.div({
            style: { marginLeft: 'auto', opacity: '0.6' },
            ref: elem => {
                const keybindingLabel = store.add(( new KeybindingLabel(elem, OS, { disableTitle: true, ...unthemedKeybindingLabelOptions })));
                store.add(autorun(reader => {
                    keybindingLabel.set(props.keybinding.read(reader));
                }));
            }
        })
    ]));
}
function actionBar(actions, options) {
    return derivedWithStore((_reader, store) => n.div({
        class: ['action-widget-action-bar'],
        style: {
            padding: '0 10px',
        }
    }, [
        n.div({
            ref: elem => {
                const actionBar = store.add(( new ActionBar(elem, options)));
                actionBar.push(actions, { icon: false, label: true });
            }
        })
    ]));
}
function separator() {
    return n.div({
        class: 'menu-separator',
        style: {
            color: asCssVariable(editorActionListForeground),
            padding: '4px 0',
        }
    }, n.div({
        style: {
            borderBottom: `1px solid ${asCssVariable(editorHoverBorder)}`,
        }
    }));
}

export { GutterIndicatorMenuContent };
