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 '../../../common/filter/filter-group.js';
import { baseTheme } from '@toeverything/theme';
import { css, html, unsafeCSS } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js';
import { DatabaseSearchClose, DatabaseSearchIcon, } from '../../../../_common/icons/index.js';
import { stopPropagation } from '../../../../_common/utils/event.js';
import { BaseTool } from './base-tool.js';
const styles = css `
  .affine-database-search-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 24px;
    height: 32px;
    border-radius: 8px;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  .affine-database-search-container svg {
    width: 20px;
    height: 20px;
    fill: var(--affine-icon-color);
  }

  .search-container-expand {
    overflow: visible;
    width: 138px;
    background-color: var(--affine-hover-color);
  }

  .search-input-container {
    display: flex;
    align-items: center;
  }

  .close-icon {
    display: flex;
    align-items: center;
    padding-right: 8px;
    height: 100%;
    cursor: pointer;
  }

  .affine-database-search-input-icon {
    position: absolute;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    height: max-content;
  }
  .affine-database-search-input-icon:hover {
    background: var(--affine-hover-color);
  }

  .search-container-expand .affine-database-search-input-icon {
    left: 4px;
    pointer-events: none;
  }

  .affine-database-search-input {
    flex: 1;
    width: 100%;
    padding: 0 2px 0 30px;
    border: none;
    font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
    font-size: var(--affine-font-sm);
    box-sizing: border-box;
    color: inherit;
    background: transparent;
    outline: none;
  }

  .affine-database-search-input::placeholder {
    color: var(--affine-placeholder-color);
    font-size: var(--affine-font-sm);
  }
`;
let DataViewHeaderToolsSearch = class DataViewHeaderToolsSearch extends BaseTool {
    constructor() {
        super(...arguments);
        this._showSearch = false;
        this._onSearch = (event) => {
            const el = event.target;
            const inputValue = el.value.trim();
            this.view.setSearch(inputValue);
        };
        this.preventBlur = false;
        this._onSearchBlur = () => {
            if (this._searchInput.value || this.preventBlur) {
                return;
            }
            this.showSearch = false;
        };
        this._onSearchKeydown = (event) => {
            if (event.key === 'Escape') {
                if (this._searchInput.value) {
                    this._searchInput.value = '';
                    this.view.setSearch('');
                }
                else {
                    this.showSearch = false;
                }
            }
        };
        this._clearSearch = () => {
            this._searchInput.value = '';
            this.view.setSearch('');
            this.preventBlur = true;
            setTimeout(() => {
                this.preventBlur = false;
            });
        };
        this._clickSearch = (e) => {
            e.stopPropagation();
            this.showSearch = true;
        };
    }
    get showSearch() {
        return this._showSearch;
    }
    set showSearch(value) {
        this._showSearch = value;
        const tools = this.closest('data-view-header-tools');
        if (tools) {
            tools.showToolBar = value;
        }
    }
    render() {
        const searchToolClassMap = classMap({
            'affine-database-search-container': true,
            'search-container-expand': this.showSearch,
        });
        return html `
      <label class="${searchToolClassMap}" @click="${this._clickSearch}">
        <div class="affine-database-search-input-icon dv-icon-20">
          ${DatabaseSearchIcon}
        </div>
        <input
          placeholder="Search..."
          class="affine-database-search-input"
          @input="${this._onSearch}"
          @click="${(event) => event.stopPropagation()}"
          @keydown="${this._onSearchKeydown}"
          @pointerdown="${stopPropagation}"
          @blur="${this._onSearchBlur}"
        />
        <div class="close-icon" @mousedown="${this._clearSearch}">
          ${DatabaseSearchClose}
          <affine-tooltip>
            <span
              style=${styleMap({
            display: 'flex',
            alignItems: 'center',
            boxSizing: 'border-box',
            padding: '2px 6px',
            borderRadius: '4px',
            background: 'var(--affine-white-10)',
        })}
              >Esc</span
            >
            to clear all
          </affine-tooltip>
        </div>
      </label>
    `;
    }
};
DataViewHeaderToolsSearch.styles = styles;
__decorate([
    query('.affine-database-search-input')
], DataViewHeaderToolsSearch.prototype, "_searchInput", void 0);
__decorate([
    state()
], DataViewHeaderToolsSearch.prototype, "_showSearch", void 0);
DataViewHeaderToolsSearch = __decorate([
    customElement('data-view-header-tools-search')
], DataViewHeaderToolsSearch);
export { DataViewHeaderToolsSearch };
//# sourceMappingURL=search.js.map