var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { baseTheme } from '@toeverything/theme';
import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { BUNDLED_LANGUAGES, } from 'shiki';
import { scrollbarStyle } from '../../_common/components/utils.js';
import { DoneIcon, SearchIcon } from '../../_common/icons/index.js';
import { getLanguagePriority } from '../utils/code-languages.js';
import { PLAIN_TEXT_REGISTRATION } from '../utils/consts.js';
// TODO extract to a common list component
let LangList = class LangList extends LitElement {
    constructor() {
        super(...arguments);
        this._filterText = '';
        this._currentSelectedIndex = 0;
    }
    static get styles() {
        return css `
      :host {
        max-height: 100%;
        width: 230px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: var(--affine-background-overlay-panel-color);
        color: var(--affine-text-primary-color);
        border-radius: 12px;
        z-index: var(--affine-z-index-popover);
        pointer-events: auto;
      }

      .lang-list-container {
        box-sizing: border-box;
        display: flex;
        height: 100%;
        overflow: hidden;
        flex-direction: column;
        box-shadow: var(--affine-menu-shadow);
        border-radius: 8px;
        padding: 8px;
      }

      .lang-list-button-container {
        flex: 1;
        overflow-y: scroll;
        padding-top: 5px;
        padding-left: 4px;
        padding-right: 4px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      ${scrollbarStyle('.lang-list-button-container')}

      .lang-item {
        display: flex;
        justify-content: space-between;
        padding: 12px;
      }
      .lang-item svg {
        width: 20px;
        height: 20px;
      }
      .lang-item-active {
        color: var(--affine-blue-600);
        background: var(--affine-hover-color-filled);
      }

      .divider {
        height: 1px;
        background-color: var(--affine-divider-color);
        margin: 8px 0;
        flex-shrink: 0;
      }

      .input-wrapper {
        display: flex;
        margin-left: 4px;
        border-radius: 4px;
        padding: 4px 10px;
        gap: 4px;
        border: 1px solid transparent;
      }

      .input-wrapper:focus-within {
        border: 1px solid var(--affine-blue-600);
        box-shadow: var(--affine-active-shadow);
      }

      #filter-input {
        flex: 1;
        align-items: center;
        height: 20px;
        width: 140px;
        border-radius: 8px;
        padding-top: 2px;
        border: none;
        font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
        font-size: var(--affine-font-sm);
        box-sizing: border-box;
        color: inherit;
        background: var(--affine-background-overlay-panel-color);
      }

      #filter-input:focus {
        outline: none;
      }

      #filter-input::placeholder {
        color: var(--affine-placeholder-color);
        font-size: var(--affine-font-sm);
      }

      .search-icon {
        display: flex;
        align-items: center;
        color: var(--affine-icon-color);
      }
    `;
    }
    async connectedCallback() {
        super.connectedCallback();
        setTimeout(() => {
            this.filterInput?.focus();
        }, 0);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.onClose?.();
    }
    _onLanguageClicked(language) {
        this.onSelectLanguage?.(language);
    }
    render() {
        const isFlip = this.placement?.startsWith('top');
        const filteredLanguages = [PLAIN_TEXT_REGISTRATION, ...BUNDLED_LANGUAGES]
            .filter(language => {
            if (!this._filterText) {
                return true;
            }
            return (language.id.startsWith(this._filterText.toLowerCase()) ||
                language.aliases?.some(alias => alias.startsWith(this._filterText.toLowerCase())));
        })
            .sort((a, b) => getLanguagePriority(a.id, this.currentLanguageId === a.id) -
            getLanguagePriority(b.id, this.currentLanguageId === b.id));
        const onLanguageSelect = (e) => {
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                this._currentSelectedIndex =
                    (this._currentSelectedIndex + 1) % filteredLanguages.length;
                // TODO scroll to item
            }
            else if (e.key === 'ArrowUp') {
                e.preventDefault();
                this._currentSelectedIndex =
                    (this._currentSelectedIndex + filteredLanguages.length - 1) %
                        filteredLanguages.length;
                // TODO scroll to item
            }
            else if (e.key === 'Enter' && !e.isComposing) {
                e.preventDefault();
                if (this._currentSelectedIndex === -1 ||
                    this._currentSelectedIndex >= filteredLanguages.length)
                    return;
                this._onLanguageClicked(filteredLanguages[this._currentSelectedIndex]);
            }
        };
        return html `
      <div
        class="lang-list-container"
        style="${isFlip ? 'flex-direction: column-reverse;' : ''}"
      >
        <div class="input-wrapper">
          <div class="search-icon">${SearchIcon}</div>
          <input
            id="filter-input"
            type="text"
            placeholder="Search for a language"
            @input="${() => {
            this._filterText = this.filterInput?.value;
            this._currentSelectedIndex = 0;
        }}"
            @keydown="${onLanguageSelect}"
          />
        </div>
        <div class="divider"></div>
        <div class="lang-list-button-container">
          ${filteredLanguages.map((language, index) => {
            const isActive = index === this._currentSelectedIndex;
            return html `
              <icon-button
                width="100%"
                height="32px"
                @click="${() => this._onLanguageClicked(language)}"
                class=${[
                'lang-item',
                isActive ? 'lang-item-active' : null,
            ].join(' ')}
              >
                ${language.displayName ?? language.id}
                <slot name="suffix"
                  >${this.currentLanguageId === language.id
                ? DoneIcon
                : nothing}</slot
                >
              </icon-button>
            `;
        })}
        </div>
      </div>
    `;
    }
};
__decorate([
    property({ attribute: false })
], LangList.prototype, "currentLanguageId", void 0);
__decorate([
    property({ attribute: false })
], LangList.prototype, "onClose", void 0);
__decorate([
    property({ attribute: false })
], LangList.prototype, "onSelectLanguage", void 0);
__decorate([
    property({ attribute: false })
], LangList.prototype, "placement", void 0);
__decorate([
    state()
], LangList.prototype, "_filterText", void 0);
__decorate([
    state()
], LangList.prototype, "_currentSelectedIndex", void 0);
__decorate([
    query('#filter-input')
], LangList.prototype, "filterInput", void 0);
LangList = __decorate([
    customElement('lang-list')
], LangList);
export { LangList };
//# sourceMappingURL=lang-list.js.map