import { html, noChange, nothing } from 'lit';
import { guard } from 'lit/directives/guard.js';
import type NileElement from '../internal/nile-element';

/**
 * Helper class to manage virtual scroll functionality for nile-select component
 */
export class VirtualScrollHelper {
  private component: NileElement;

  constructor(component: NileElement) {
    this.component = component;
  }

  renderVirtualizedContent(): any {
    const component = this.component as any;
    const tooltipPath = !!component.showTooltip;

    return html`
      <div class="virtual-select">
        <nile-virtual-select
          .name=${component.name}
          .value=${component.value}
          .maxOptionsVisible=${tooltipPath || !component.maxOptionsVisibleExplicit ? noChange : component.maxOptionsVisible}
          .autoResize=${component.autoResize}
          .showTooltip=${component.showTooltip}
          .chipMinWidth=${component.chipMinWidth}
          .chipMaxWidth=${component.chipMaxWidth}
          .placeholder=${component.placeholder}
          .size=${component.size}
          .searchEnabled=${component.searchEnabled}
          .internalSearchPlaceHolder=${component.internalSearchPlaceHolder}
          .disableLocalSearch=${component.disableLocalSearch}
          .optionsLoading=${component.optionsLoading}
          .multiple=${component.multiple}
          .helpText=${component.helpText}
          .errorMessage=${component.errorMessage}
          .warning=${component.warning}
          .enableVisibilityEffect=${component.enableVisibilityEffect}
          .error=${component.error}
          .success=${component.success}
          .disabled=${component.disabled}
          .clearable=${component.clearable}
          .hoist=${component.hoist}
          .filled=${component.filled}
          .pill=${component.pill}
          .label=${component.label}
          .placement=${component.placement}
          .form=${component.form}
          .required=${component.required}
          .showNoResults=${component.showNoResults}
          .noResultsMessage=${component.noResultsMessage}
          .renderItemConfig=${component.renderItemConfig}
          .blockValueChange=${component.blockValueChange}
          .noWidthSync=${component.noWidthSync}
          .enableTabClose=${component.enableTabClose}
          .data=${tooltipPath ? guard([component.data], () => component.data) : component.data}
          .open=${component.open}
          .loading=${component.loading}
          .portal=${component.portal}
          .descriptionSearchEnabled=${component.descriptionSearchEnabled}
          .allowHtmlLabel=${component.allowHtmlLabel}
          .enableDescription=${component.enableDescription}
          .tickOnSelect=${component.tickOnSelect}
          .legacy=${component.legacy}
          @nile-input=${tooltipPath ? (e: CustomEvent) => component.syncValueFromVirtualSelect(e) : nothing}
          @nile-change=${tooltipPath ? (e: CustomEvent) => component.syncValueFromVirtualSelect(e) : nothing}
          exportparts="
            select-options,
            select-no-results,
            virtualized,
            form-control,
            form-control-label,
            form-control-input,
            combobox,
            prefix,
            display-input,
            tags,
            tag,
            clear-button,
            suffix,
            expand-icon,
            listbox,
            search,
            loader,
            footer,
            tag__content,
            option__base,
            option__label,
            option__prefix,
            option__suffix,
            option__checked-icon,
            option__checkbox,
            option__label_container,
            option__description
          "
        >
          <slot name="prefix" slot="prefix"></slot>
        </nile-virtual-select>
      </div>
    `;
  }
}