import {LitElement, html, css} from 'lit';
// @ts-ignore: TS2307
// import styles from './spw-lit-select.scss';
import {customElement, property, state} from 'lit/decorators.js';

interface OptionItem {
  id: string;
  label: string;
  selected?: boolean;
}

@customElement('spw-lit-select')
export class SpwLitSelect extends LitElement {
  static styles = css`
    :host {
      box-sizing: border-box;
      line-height: 1.3;
      -webkit-text-size-adjust: 100%;
      font-size: 100%;

      *,
      *::before,
      *::after {
        box-sizing: inherit;
        font-family: 'Nunito Sans';
      }
      display: block;
    }
    .spw-select {
      position: relative;
    }
    .spw-select__container {
      position: relative;
    }
    .spw-select__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 12px;
      pointer-events: none;
      color: var(--spw-color-themes-grey-grey-600);
      font-size: 12px;
    }
    .spw-select__trigger {
      width: 100%;
      height: 40px;
      border-radius: 4px;
      border: 1px solid var(--spw-color-themes-grey-grey-800);
      background-color: #fff;
      font-size: 16px;
      color: var(--spw-color-themes-grey-grey-800);
      position: relative;
      padding: 0;
      margin: 0;
      appearance: none;
      padding: 0 12px;
      padding-right: 40px;
      /* Add the chevron */
    }
    .spw-select__trigger:hover {
      outline: 4px solid var(--spw-color-themes-grey-grey-300);
    }
    .spw-select__trigger:focus-visible {
      outline: 3px solid var(--spw-ds-focus);
      outline-offset: 2px;
    }
    .spw-select__trigger::after {
      content: '\f078';
      /* Font Awesome chevron-down unicode */
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      font-size: 14px;
      color: var(--spw-color-themes-grey-grey-800);
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      /* Ensure the chevron does not block clicks */
    }
    .spw-select--is-error .spw-select__trigger {
      border-color: var(--spw-colors-states-error-error-300);
    }
    .spw-select--large .spw-select__trigger {
      height: 60px;
      padding: 0 24px;
      font-size: 18px;
    }
    .spw-select--disabled .spw-select__trigger {
      border-color: var(--spw-color-themes-grey-grey-400);
      background: var(--spw-color-themes-grey-grey-100);
      color: var(--spw-color-themes-grey-grey-500);
      cursor: not-allowed;
    }
    .spw-select--disabled .spw-select__trigger::placeholder {
      color: var(--spw-color-themes-grey-grey-500);
    }
    .spw-select--disabled .spw-select__trigger:hover,
    .spw-select--disabled .spw-select__trigger:focus,
    .spw-select--disabled .spw-select__trigger:focus-visible {
      outline: none;
    }
  `;

  @property({type: Array}) value: OptionItem[] = [];
  @property({type: String}) label = '';
  @property({type: String}) placeholder = 'Sélectionner une option';
  @property({type: Boolean}) disabled = false;
  @property({type: String}) name = '';
  @property({type: Boolean}) required = false;
  @property({type: String}) size = 'medium';
  @property({type: String}) assistiveText = '';
  @property({type: String}) error = '';
  @property({type: String}) hint = '';
  @property({type: String}) success = '';
  @property({type: Boolean}) showErrorIcon = true;
  @property({type: Boolean}) showHintIcon = true;
  @property({type: Boolean}) showSuccessIcon = true;

  @state() internalValue: string | null = '';

  firstUpdated() {
    this.internalValue = this.getInitialSelectedValue();
  }

  updated(changedProperties: any) {
    if (changedProperties.has('value')) {
      this.internalValue = this.getInitialSelectedValue();
    }
  }

  getInitialSelectedValue(): string | null {
    const selectedOption = this.value.find((item: OptionItem) => item.selected);
    return selectedOption ? selectedOption.id : null;
  }

  handleSelectChange(event: any) {
    const select = event.target;
    const selectedIndex = select.selectedIndex;
    if (selectedIndex > 0) {
      this.internalValue = this.value[selectedIndex - 1].id;
      this.dispatchEvent(
        new CustomEvent('spwSelectValueChanged', {
          detail: {selectedValue: this.internalValue},
          bubbles: true,
          composed: true,
        })
      );
    }
  }

  render() {
    return html`
      <div
        class=${`spw-select spw-select--${this.size} ${
          this.disabled ? 'spw-select--disabled' : ''
        } ${this.error ? 'spw-select--is-error' : ''}`}
      >
        ${this.label
          ? html`
              <spw-field-label
                .label=${this.label}
                .name=${this.name}
                .required=${this.required}
              ></spw-field-label>
            `
          : null}
        ${this.assistiveText
          ? html`
              <spw-field-message
                class="spw-tw-mb-2 -spw-tw-mt-1"
                variant="hint"
                .showIcon=${false}
              >
                ${this.assistiveText}
              </spw-field-message>
            `
          : null}
        <div class="spw-select__container">
          <select
            id=${this.name}
            class="spw-select__trigger"
            @change=${this.handleSelectChange}
            ?disabled=${this.disabled}
          >
            <option value="" disabled ?selected=${!this.internalValue}>
              ${this.placeholder}
            </option>
            ${this.value.map(
              (item: OptionItem) =>
                html`<option
                  value=${item.id}
                  ?selected=${item.id === this.internalValue}
                >
                  ${item.label}
                </option>`
            )}
            <slot></slot>
          </select>
          <spw-lit-icon
            class="spw-select__arrow"
            icon="fa-chevron-down"
          ></spw-lit-icon>
        </div>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'spw-lit-select': SpwLitSelect;
  }
}