import '@digital-realty/ix-button/ix-button.js';
import '@digital-realty/ix-date/ix-date.js';
import '@digital-realty/ix-date-next/ix-date-next.js';
import '@digital-realty/ix-icon-button/ix-icon-button.js';
import '@digital-realty/ix-icon/ix-icon.js';
import '@digital-realty/ix-select/ix-select.js';
import { format, formatDate } from 'date-fns/format.js';
import { LitElement, html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import type { Column, DataType, FilterOperator } from '../IxGrid.js';
import { IxGridViewStyles } from '../grid-view-styles.js';
import { copy } from '../ix-grid-copy.js';
import { IxGridRowFilterStyles } from './grid-row-filter-styles.js';

export interface Filter {
  columnField: string;
  operatorValue: string;
  dataType?: DataType;
  value: string;
}

@customElement('ix-grid-row-filter')
export class IxGridRowFilter extends LitElement {
  static readonly styles = [IxGridViewStyles, IxGridRowFilterStyles];

  @property({ type: Array }) columns: Column[] = [];

  @property({ type: Number }) filterValueChangeDebounceTime: number = 300;

  @property({ type: Boolean }) readParamsFromURL = false;

  @property({ type: Boolean }) useNewDatePicker = false;

  @property({ type: String }) maxDate: string = formatDate(
    new Date(),
    'yyyy-MM-dd'
  );

  @state() private isDropdownVisible: boolean = false;

  @state() private filters: Filter[] = [];

  @state() private filterableColumns: Column[] = [];

  @state() private filterColumns: string[] = [];

  @state() private activeFilters: Filter[] = [];

  @state() private mapSelect: boolean = false;

  @state() private fromDateErrorText? = '';

  @state() private oldValueLength: number = 0;

  private debounceEvent: ReturnType<typeof setTimeout> | undefined;

  private debouncedOnFilterValueChange: (
    index: number,
    target: EventTarget
  ) => void = () => {};

  updateActiveFilters() {
    this.activeFilters = this.filters.filter(filter => filter.value.length > 0);
  }

  connectedCallback() {
    super.connectedCallback();
    document.addEventListener('click', this.closeOnOuterClick);
    window.addEventListener('popstate', this.handlePopState);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    document.removeEventListener('click', this.closeOnOuterClick);
    window.removeEventListener('popstate', this.handlePopState);
  }

  firstUpdated() {
    this.filterableColumns = this.columns.filter(column => column.filterable);
    this.filterColumns = this.filterableColumns.map(column => column.name);

    if (this.readParamsFromURL) {
      this.filters = this.parseFilterQueryString();
    }

    if (!this.filters.length) {
      this.addFilter();
    }

    this.updateActiveFilters();
    this.dispatchUpdate(false);
    this.debouncedOnFilterValueChange = (index, target) => {
      clearTimeout(this.debounceEvent);
      this.debounceEvent = setTimeout(
        () => this.onfilterValueChange.bind(this)(index, target),
        this.filterValueChangeDebounceTime
      );
    };
  }

  get filterNames() {
    return this.filters.map(filter => filter.columnField);
  }

  get unselectedFilters() {
    return this.filterColumns.filter(f => !this.filterNames.includes(f));
  }

  closeOnOuterClick = (e: Event) => {
    if (!e.composedPath().includes(this)) {
      this.isDropdownVisible = false;
    }
  };

  parseFilterQueryString(): Filter[] {
    const params = new URLSearchParams(window.location.search);
    const filters: Filter[] = [];

    this.filterableColumns.forEach(fc => {
      fc.filterOperators?.forEach(operator => {
        const key = `${fc.name}_${operator}`;

        if (params.has(key)) {
          filters.push({
            columnField: fc.name,
            operatorValue: operator,
            dataType: fc.dataType,
            value: params.get(key) ?? '',
          });
        }
      });
    });

    return filters;
  }

  dispatchUpdate(resetPage = true) {
    this.dispatchEvent(
      new CustomEvent('rowFilter', {
        detail: {
          filters: this.filters.filter(filter => filter.value.length),
          resetPage,
        },
        bubbles: true,
        composed: true,
      })
    );
  }

  addFilter() {
    const nextFilter =
      this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||
      '';
    const filterOperators = this.filterableColumns.find(
      c => c.name === nextFilter
    )?.filterOperators || ['contains'];

    const filterDataType =
      this.filterableColumns.find(c => c.name === nextFilter)?.dataType ||
      'string';

    this.filters = [
      ...this.filters,
      {
        columnField: nextFilter,
        operatorValue: filterOperators[0],
        dataType: filterDataType,
        value: '',
      },
    ];
    this.updateActiveFilters();
  }

  clearFilters() {
    this.filters = [];
    this.addFilter();
    this.dispatchUpdate();
  }

  removeFilter(index: number) {
    this.filters = this.filters.filter((_, i) => i !== index);
    this.dispatchUpdate();
    if (this.filters.length === 0) {
      this.isDropdownVisible = false;
      this.addFilter();
    }

    this.updateActiveFilters();
  }

  private handlePopState = () => {
    this.filters = this.parseFilterQueryString();
    if (this.filters.length === 0) {
      this.isDropdownVisible = false;
      this.addFilter();
    }
    this.updateActiveFilters();
  };

  private onfilterColumnChange(index: number, e: Event) {
    const selectedValue = (e.target as HTMLSelectElement).value;
    const selectedColumn = this.filterableColumns.find(
      column => column.name === selectedValue
    );
    this.filters[index].columnField = selectedValue;
    this.filters[index].dataType = selectedColumn?.dataType;
    this.filters[index].operatorValue =
      selectedColumn?.filterOperators?.[0] || 'contains';

    this.filters = [...this.filters];

    this.dispatchUpdate();
  }

  private onfilterOperatorChange(index: number, e: Event) {
    const selectedValue = (e.target as HTMLSelectElement).value;
    this.filters[index].operatorValue = selectedValue;

    this.filters = [...this.filters];

    this.dispatchUpdate();
  }

  private onDatefilterValueChange(index: number, value: string) {
    this.filters[index].value = value;
    this.dispatchUpdate();
    this.updateActiveFilters();
  }

  private onfilterValueChange(index: number, target: EventTarget) {
    const { value } = target as HTMLInputElement;
    this.filters[index].value = value;

    const newValueLength = this.filters[index].value.length;
    if (
      this.filters[index].columnField.length > 0 &&
      (newValueLength >= 3 || newValueLength < this.oldValueLength)
    ) {
      this.dispatchUpdate();
    }
    this.updateActiveFilters();
    this.oldValueLength = newValueLength;
  }

  formatCamelCaseToEnglish(text: string) {
    const spaced = text.replace(/([A-Z])/g, ' $1').toLowerCase();
    const english = spaced.charAt(0).toUpperCase() + spaced.slice(1);
    return english;
  }

  renderToolTip() {
    if (this.isDropdownVisible) {
      return copy.hideFilters;
    }
    if (!this.activeFilters.length) {
      return copy.showFilters;
    }
    return html` <p>${this.activeFilters.length} ${copy.activeFilter}</p>
      <ul>
        ${this.activeFilters.map(filter => {
          let displayValue = filter.value;

          if (filter.dataType === 'dateTime' && this.useNewDatePicker) {
            const date = this.shadowRoot?.querySelector(`ix-date-next`) as any;
            displayValue = format(displayValue, date.format);
          }

          const column = this.filterableColumns.find(
            c => c.name === filter.columnField
          );
          const columnHeader =
            column?.header ?? this.formatCamelCaseToEnglish(filter.columnField);

          return html`<li>
            ${columnHeader} ${filter.operatorValue} ${displayValue}
          </li>`;
        })}
      </ul>`;
  }

  private renderStringInput(value: any, index: number) {
    return html`<label class="form-group-operator-label">
      <span>Value</span>
      <input
        data-testid=${`filterValueInput-${index}`}
        placeholder="Filter value"
        @input=${(e: Event) =>
          this.debouncedOnFilterValueChange(index, e.target!)}
        .value=${value.value}
      />
    </label>`;
  }

  private renderDateInput(value: any, index: number) {
    return this.useNewDatePicker
      ? html`<ix-date-next
          data-testid=${`filterValueInput-${index}`}
          .value=${value.value}
          max=${this.maxDate}
          name="${value.columnField}-valueDate"
          showCalendarOnMouseDown="true"
          .errorText=${this.fromDateErrorText}
          .onChanged=${e => this.onDatefilterValueChange(index, e)}
        >
        </ix-date-next>`
      : html`<ix-date
          data-testid=${`filterValueInput-${index}`}
          .value=${value.value}
          max=${this.maxDate}
          name="${value.columnField}-valueDate"
          .errorText=${this.fromDateErrorText}
          .onChanged=${e => this.onDatefilterValueChange(index, e)}
        >
        </ix-date>`;
  }

  private renderFilterInputControl(value: any, index: number) {
    switch (value.dataType) {
      case 'string':
      case undefined:
        return this.renderStringInput(value, index);
      case 'dateTime':
        return this.renderDateInput(value, index);
      default:
        return nothing;
    }
  }

  renderFilterInput(value: Filter, index: number) {
    const options = [value.columnField, ...this.unselectedFilters];
    const filterOptions = this.filterableColumns.filter(column =>
      options.includes(column.name)
    );
    return html`
      <div class="filter-form">
        <div class="filter-remove filter-form-column">
          <div class="form-group">
            <ix-icon-button
              icon="close"
              data-testid="clearFilterButton"
              @click=${() => this.removeFilter(index)}
              @keyDown=${(e: KeyboardEvent) => {
                if (e.key === ' ' || e.key === 'Enter') {
                  this.removeFilter(index);
                }
              }}
            ></ix-icon-button>
          </div>
        </div>
        ${this.mapSelect
          ? html`<div
              class="filter-form-column filter-form-column-border filterColumnField"
            >
              <div class="form-group">
                <label
                  class="form-group-column-label"
                  title="select: ${value.columnField}, options: ${filterOptions.map(
                    column => `value=${column.name}, selected=${
                      column.name === value.columnField
                    }, ${column.header}
                `
                  )}"
                  >Columns</label
                >

                <select
                  @change=${(e: Event) => this.onfilterColumnChange(index, e)}
                  .value=${value.columnField}
                  data-v=${value.columnField}
                >
                  ${filterOptions.map(
                    column => html`
                      <option
                        value=${column.name}
                        ?selected=${column.name === value.columnField}
                      >
                        ${column.header}
                      </option>
                    `
                  )}
                </select>
              </div>
            </div>`
          : nothing}

        <div
          class="filter-form-column filter-form-column-border filterColumnField"
        >
          <div class="filter-form-group">
            <label class="form-group-column-label"
              ><span>Columns</span>
              <select
                data-testid=${`filterColumnInput-${index}`}
                @change=${(e: Event) => this.onfilterColumnChange(index, e)}
                .value=${value.columnField}
                data-v=${value.columnField}
              >
                ${repeat(
                  filterOptions,
                  (column: Column) => column.name,
                  (column: Column) => html`
                    <option
                      value=${column.name}
                      ?selected=${column.name === value.columnField}
                    >
                      ${column.header}
                    </option>
                  `
                )}
              </select>
            </label>
          </div>
        </div>

        <div
          class="filter-form-column filter-form-column-border filterOperatorField"
        >
          <div class="filter-form-group">
            <label class="form-group-operator-label"
              ><span>Operator</span>
              <select
                data-testid=${`filterOperatorInput-${index}`}
                class="filterOperatorInput"
                @change=${(e: Event) => this.onfilterOperatorChange(index, e)}
                .value=${value.operatorValue}
                data-v=${value.operatorValue}
              >
                ${repeat(
                  filterOptions.find(
                    column => column.name === value.columnField
                  )?.filterOperators ?? ['contains'],
                  (filter: FilterOperator) => html`
                    <option
                      value=${filter}
                      ?selected=${filter === value.operatorValue}
                    >
                      ${filter}
                    </option>
                  `
                )}
              </select>
            </label>
          </div>
        </div>
        <div
          class="filter-form-column filter-form-column-border filterValueField"
        >
          <div class="filter-form-group">
            ${this.renderFilterInputControl(value, index)}
          </div>
        </div>
      </div>
    `;
  }

  renderDropdown() {
    const disableAddButton =
      this.filters.length >= this.filterColumns.length ||
      this.activeFilters.length < this.filters.length;
    return html` <div class="filter-dropdown-content">
      <div class="filter-body">
        ${this.filters.map((filter, index) =>
          this.renderFilterInput(filter, index)
        )}
      </div>
      <div class="filter-footer">
        <ix-button
          data-testid="addFilterButton"
          class="add-filter-button"
          @click="${() => this.addFilter()}"
          ?disabled=${disableAddButton}
          appearance="text"
        >
          <ix-icon slot="icon">add</ix-icon>
          Add filter
        </ix-button>
        <ix-button
          data-testid="clearAllFiltersButton"
          @click="${() => this.clearFilters()}"
          ?disabled=${this.activeFilters.length === 0}
          appearance="text"
        >
          Clear all
        </ix-button>
      </div>
    </div>`;
  }

  render() {
    return html` <div class="grid-menu">
      <div class="filter-container tooltip-container">
        ${this.activeFilters.length > 0
          ? html`<span class="filter-superscript"
              >${this.activeFilters.length}</span
            >`
          : nothing}
        <ix-button
          data-testid="showFiltersButton"
          appearance="text"
          class="filter_list filter-button"
          @click=${() => {
            this.isDropdownVisible = !this.isDropdownVisible;
          }}
          @keyDown=${() => {
            this.isDropdownVisible = !this.isDropdownVisible;
          }}
        >
          <div class="slot-wrap">
            <ix-icon appearance="default" class="filter-icon"
              >filter_list</ix-icon
            >
            <span class="filter">${copy.filters}</span>
          </div>
        </ix-button>
        <div class="tool-tip">${this.renderToolTip()}</div>
        ${this.isDropdownVisible ? this.renderDropdown() : nothing}
      </div>
    </div>`;
  }
}