import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
import {FormControlController, validValidityState} from "../../internal/form";
import {property} from 'lit/decorators.js';
import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
import ZnInput from "../input";
import ZnTooltip from "../tooltip";
import type ZnDataSelect from "../data-select";
import type ZnQueryBuilder from "../query-builder";
import type ZnSelect from "../select";

import styles from './data-table-search.scss';

type AllowedInputElement =
  HTMLInputElement
  | HTMLSelectElement
  | HTMLTextAreaElement
  | ZnInput
  | ZnSelect
  | ZnDataSelect
  | ZnQueryBuilder

/**
 * @summary A search component for data tables.
 * @documentation https://zinc.style/components/data-table-search
 * @status experimental
 * @since 1.0
 *
 * @dependency zn-input
 * @dependency zn-tooltip
 *
 * @event zn-search-change - Emitted when the search value changes (debounced).
 *
 * @slot - The default slot for additional form inputs.
 *
 * @csspart base - The component's base wrapper.
 *
 * @property {string} name - The name of the search input field (default: "search").
 * @property {string} value - The current search value.
 * @property {string} placeholder - The placeholder text for the search input (default: "Search...").
 * @property {string} helpText - Help text, shown from an information icon inside the search input.
 * @property {string} searchUri - Optional URI to use for search operations.
 * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 350).
 */
export default class ZnDataTableSearch extends ZincElement implements ZincFormControl {
  static styles: CSSResultGroup = unsafeCSS(styles);
  static dependencies = {
    'zn-input': ZnInput,
    'zn-tooltip': ZnTooltip,
  };

  private _formController: FormControlController = new FormControlController(this, {});
  private _searchTimeout?: number;

  @property() name: string = "search";

  @property() value: string = "";

  @property() placeholder: string = "Search...";

  @property({attribute: 'help-text'}) helpText: string = "";

  @property({attribute: 'search-uri'}) searchUri: string | undefined;

  @property({type: Number, attribute: 'debounce-delay'}) debounceDelay: number = 350;

  get validationMessage(): string {
    return '';
  }

  get validity(): ValidityState {
    return validValidityState;
  }

  checkValidity(): boolean {
    return true;
  }

  getForm(): HTMLFormElement | null {
    return this._formController.getForm();
  }

  reportValidity(): boolean {
    return true;
  }

  setCustomValidity(): void {
    this._formController.updateValidity();
  }

  protected firstUpdated(_changedProperties: PropertyValues) {
    super.firstUpdated(_changedProperties);
    this._formController.updateValidity();
  }

  /**
   * Collects form data from slotted input elements
   */
  getFormData(): Record<string, any> {
    const params: Record<string, any> = {};
    const allowedInputs = [
      'zn-input',
      'zn-select',
      'zn-query-builder',
      'zn-multiselect',
      'zn-params-select',
      'zn-datepicker',
      'input',
      'select',
      'textarea',
      'zn-cols',
      'zn-input-group',
    ];

    const collect = (element: Element): void => {
      if (!allowedInputs.includes(element.tagName.toLowerCase())) return;
      const input = element as AllowedInputElement;
      const value: unknown = typeof input.value === 'string' ? input.value.trim() : input.value;
      const name = input.name || element.getAttribute('name');
      if (name) {
        params[name] = value;
      }
    };

    const slots = this.shadowRoot?.querySelectorAll('slot');
    slots?.forEach((slot) => {
      slot.assignedElements({flatten: true}).forEach((element) => {
        collect(element);
        element.querySelectorAll(allowedInputs.join(',')).forEach((descendant) => collect(descendant));
      });
    });

    return params;
  }

  handleInput = (e: Event) => {
    const input = e.target as ZnInput;
    this.value = input.value as string;
    this._formController.updateValidity();

    if (this._searchTimeout) {
      window.clearTimeout(this._searchTimeout);
    }

    this._searchTimeout = window.setTimeout(() => {
      this.emitSearchChange();
    }, this.debounceDelay);
  }

  handleClear = () => {
    if (this._searchTimeout) {
      window.clearTimeout(this._searchTimeout);
    }

    this.value = "";
    const input = this.shadowRoot?.querySelector('zn-input');
    if (input) {
      input.value = "";
    }
    this._formController.updateValidity();
    this.emitSearchChange();
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    if (this._searchTimeout) {
      window.clearTimeout(this._searchTimeout);
    }
  }

  /**
   * Emit the search change event with form data
   */
  private emitSearchChange() {
    const formData = this.getFormData();
    this.emit('zn-search-change', {
      detail: {
        value: this.value.trim(),
        formData: formData,
        searchUri: this.searchUri
      }
    });
  }

  render() {
    return html`
      <div class="data-table-search">
        <zn-input
          type="search"
          name="${this.name}"
          placeholder="${this.placeholder}"
          help-text="${this.helpText}"
          value="${this.value}"
          clearable
          @zn-input="${this.handleInput}"
          @zn-clear="${this.handleClear}">
          ${this.helpText ? html`
            <zn-tooltip slot="suffix" class="data-table-search__tooltip" content="${this.helpText}">
              <zn-icon src="info@lu" size="20"></zn-icon>
            </zn-tooltip>` : nothing}
          <zn-icon slot="suffix" src="search@lu" size="20"></zn-icon>
        </zn-input>
        <slot style="display: none"></slot>
      </div>
    `;
  }
}