@use 'sprucecss/scss/spruce' as *;

.combobox {
  @include generate-variables($form-control, $include: ('border-width', 'border-radius'));
  display: flex;
  flex-direction: column;
  gap: spacer('xs');

  &__inner {
    position: relative;
  }

  &__selected-items {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs');
  }

  &__toggle {
    inset: 0 0 0 auto;
    pointer-events: none;
    position: absolute;
  }

  &__reset {
    align-self: start;
  }

  &__no-results {
    padding-inline: spacer('xs');
  }

  &__control {
    @include field-icon(config('select', $form-icon, false), color('select-foreground', 'form', true));
    background-position: center right config('icon-right-offset', $form-select, false);
    background-repeat: no-repeat;
    background-size: config('icon-inline-size', $form-select, false) auto;
    padding-inline-end: config('padding-inline-end', $form-select, false);
  }

  &__dropdown {
    background-color: color('background', 'form');
    border: config('border-width', $form-control) solid color('border', 'form');
    border-radius: config('border-radius', $form-control);
    inset: calc(100% + #{spacer('xs')}) 0 auto 0;
    padding: spacer('xs');
    position: absolute;
    z-index: 5;
  }

  [role='listbox'] {
    @include clear-list;
    @include scrollbar;
    display: flex;
    flex-direction: column;
    gap: spacer('xs');
    max-block-size: 10rem;
    overflow-y: auto;
    padding-inline-end: spacer('xs');

    > * {
      margin-block-start: 0;
    }
  }

  [role='option'] {
    align-items: center;
    border-radius: config('border-radius', $form-control);
    display: flex;
    justify-content: space-between;
    padding-block: spacer('xxs');
    padding-inline: spacer('xs');
    user-select: none;

    &[aria-selected='true'] {
      background-color: color('light-background', 'btn');
      color: color('light-foreground', 'btn');
    }

    &:hover,
    &:focus,
    &.highlighted {
      background-color: color('primary-background', 'btn');
      color: color('primary-foreground', 'btn');
    }

    svg {
      --size: 0.85em;
      block-size: var(--size);
      inline-size: var(--size);
    }
  }
}

.combobox-item {
  align-items: center;
  background-color: color('item-background', 'combobox');
  border-radius: 1em;
  color: color('item-foreground', 'combobox');
  display: flex;
  font-size: config('font-size-sm', $typography);
  gap: spacer('xxs');
  line-height: 1;
  padding-block: spacer('xxs');
  padding-inline: spacer('xs') spacer('xxs');

  .btn--sm {
    @include set-css-variable((
      --icon-padding: 0.25em,
      --border-radius: 1em,
    ));
  }
}

<div class="form-group">
    <label class="form-label" for="colors">Choose colors</label>
    <div
        class="combobox"
        x-cloak
        x-data="combobox"
        x-id="['dropdown', 'list-item']"
        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
        x-on:keydown.escape.prevent.stop="close($refs.input)"
    >
        <div
            class="combobox__selected-items"
            x-show="selectedItems().length > 0"
        >
            <template x-for="(item, index) in selectedItems" :key="item.id">
                <span
                    class="combobox-item"
                    x-show="item.selected"
                >
                    <span x-text="item.label"></span>
                    <button
                    :aria-label="`Remove ${item.label}`"
                        @click="unselectItemById(item.id)"
                        class="btn btn--primary btn--sm btn--icon"
                    >
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </span>
            </template>
        </div>
        <div
            class="combobox__inner"
            @click.outside="close($refs.input)"
            x-ref="panel"
        >
            <input
                :aria-activedescendant="highlightedItemId()"
                :aria-controls="$id('dropdown')"
                :aria-expanded="open"
                @click="toggle()"
                aria-autocomplete="list"
                class="form-control combobox__control"
                id="colors"
                placeholder="Search for a color"
                role="combobox"
                type="text"
                x-model="search"
                x-on:keyup.down.prevent="highlightNextItem"
                x-on:keyup.enter.prevent="toggleFromKeyboard"
                x-on:keyup.up.prevent="highlightPreviousItem"
                x-on:keyup="if ($event.key !== 'Escape' && $event.key !== 'Tab' && $event.key !== 'Shift') { open = true }"
                x-ref="input"
            >
            <div
                class="combobox__dropdown"
                x-show="open || search.length > 0"
            >
                <ul
                    :id="$id('dropdown')"
                    aria-label="Colors"
                    aria-multiselectable="true"
                    role="listbox"
                    tabindex="-1"
                    x-ref="listbox"
                >
                    <template x-for="(item, index) in filteredItems" :key="item.id">
                        <li
                            :aria-selected="item.selected"
                            :class="{'highlighted': index === highlightedItemIndex}"
                            :id="$id('list-item', item.id)"
                            @click.prevent="item.selected = ! item.selected; highlightedItemIndex = null;"
                            role="option"
                        >
                            <span x-text="item.label"></span>
                            <span x-show="item.selected">
                                <svg aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            </span>
                        </li>
                    </template>
                    <li
                        class="combobox__no-results"
                        x-show="search !== '' && filteredItems().length === 0"
                    >
                        No results found.
                    </li>
                </ul>
            </div>
        </div>
        <button
            @click="deselectAllItems"
            class="btn btn--outline-primary btn--sm combobox__reset"
            x-show="selectedItems().length > 0"
        >
            Deselect all colors
        </button>
    </div>
</div>

document.addEventListener('alpine:init', () => {
  window.Alpine.data('combobox', () => ({
    items: [{
      id: 'red',
      label: 'Red',
      selected: false,
    },
    {
      id: 'orange',
      label: 'Orange',
      selected: false,
    },
    {
      id: 'yellow',
      label: 'Yellow',
      selected: false,
    },
    {
      id: 'green',
      label: 'Green',
      selected: false,
    },
    {
      id: 'blue',
      label: 'Blue',
      selected: false,
    },
    {
      id: 'purple',
      label: 'Purple',
      selected: false,
    },
    {
      id: 'hot-pink',
      label: 'Hot pink',
      selected: false,
    },
    {
      id: 'light-pink',
      label: 'Light pink',
      selected: false,
    },
    {
      id: 'white',
      label: 'White',
      selected: false,
    },
    {
      id: 'black',
      label: 'Black',
      selected: false,
    },
    {
      id: 'brown',
      label: 'Brown',
      selected: false,
    },
    ],
    open: false,
    search: '',
    highlightedItemIndex: null,
    selectedItems() {
      return this.items.filter((item) => item.selected);
    },
    unselectItemById(id) {
      this.items.find((item) => item.id === id).selected = false;
    },
    filteredItems() {
      return this.items.filter((item) => item.label.toLowerCase().includes(this.search.toLowerCase()));
    },
    toggle() {
      if (this.open) {
        return this.close();
      }

      this.$refs.input.focus();
      this.open = true;
      this.highlightedItemIndex = null;
    },
    close(focusAfter) {
      if (!this.open) return;

      this.open = false;
      this.search = '';
      this.highlightedItemIndex = null;

      focusAfter && focusAfter.focus();
    },
    highlightNextItem() {
      this.open = true;

      if (this.highlightedItemIndex === null) {
        this.highlightedItemIndex = 0;
        return;
      }

      this.highlightedItemIndex++;

      if (this.highlightedItemIndex >= this.filteredItems().length) {
        this.highlightedItemIndex = 0;
      }

      this.$refs.listbox.children[this.highlightedItemIndex + 1].scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
      });
    },
    highlightPreviousItem() {
      this.open = true;
      this.highlightedItemIndex--;

      if (this.highlightedItemIndex < 0) {
        this.highlightedItemIndex = this.filteredItems().length - 1;
      }

      this.$refs.listbox.children[this.highlightedItemIndex + 1].scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
      });
    },
    highlightedItemId() {
      const highlightedItem = this.filteredItems()[this.highlightedItemIndex];
      return highlightedItem ? this.$id('list-item', highlightedItem.id) : null;
    },
    toggleFromKeyboard() {
      if (this.highlightedItemIndex === null) {
        return;
      }

      this.filteredItems()[this.highlightedItemIndex].selected = !this.filteredItems()[this.highlightedItemIndex].selected;
    },
    deselectAllItems() {
      this.items.forEach((item) => item.selected = false);
    },
  }));
});