import { Component } from '@angular/core'
import { UiCard } from '@app/components/ui-card'
import { NgIcon } from '@ng-icons/core'
import { ChoiceSelectInputDirective } from '@core/directive/choices-select.directive'

@Component({
  selector: 'app-choicesjs',
  imports: [UiCard, NgIcon, ChoiceSelectInputDirective],
  template: `
    <app-ui-card title="Choices.Js" bodyClass="p-0">
      <div card-body>
        <div class="card-body rounded-bottom-0">
          <p class="text-muted mb-2">
            Choices.js is a lightweight, configurable select box/text input
            plugin. Similar to Select2 and Selectize but without the jQuery
            dependency.
          </p>

          <a
            class="btn btn-link shadow-none p-0 fw-medium"
            href="https://choices-js.github.io/Choices/"
            target="_blank"
          >
            View Official Website
            <ng-icon name="tablerChevronRight" class="ms-1"></ng-icon>
          </a>
        </div>

        <div class="card-body border-top-0 rounded-top-0">
          <div class="row g-4">
            <div class="col-lg-6">
              <h5>Single Select Input: Default</h5>
              <p class="text-muted mb-0">
                Set
                <code
                  >[options]=&quot;&lbrace;searchEnabled:false&rbrace;&quot;</code
                >
                attribute to set a default
              </p>
            </div>
            <div class="col-lg-6">
              <select
                choicesSelect
                class="form-control"
                [options]="{ searchEnabled: false }"
              >
                <option value="">This is a placeholder</option>
                <option value="Choice 1">Choice 1</option>
                <option value="Choice 2">Choice 2</option>
                <option value="Choice 3">Choice 3</option>
              </select>
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-4">
            <div class="col-lg-6">
              <h5>Single Select Input: Option Groups</h5>
              <p class="text-muted mb-0">
                Set
                <code
                  >[options]=&quot;&lbrace;searchEnabled:false&rbrace;&quot;</code
                >
                attribute to set a group
              </p>
            </div>
            <div class="col-lg-6">
              <select
                choicesSelect
                [options]="{ searchEnabled: false }"
                class="form-control"
                id="choices-single-groups"
                name="choices-single-groups"
              >
                <option value="">Choose a city</option>
                <optgroup label="UK">
                  <option value="London">London</option>
                  <option value="Manchester">Manchester</option>
                  <option value="Liverpool">Liverpool</option>
                </optgroup>
                <optgroup label="FR">
                  <option value="Paris">Paris</option>
                  <option value="Lyon">Lyon</option>
                  <option value="Marseille">Marseille</option>
                </optgroup>
                <optgroup label="DE" disabled>
                  <option value="Hamburg">Hamburg</option>
                  <option value="Munich">Munich</option>
                  <option value="Berlin">Berlin</option>
                </optgroup>
                <optgroup label="US">
                  <option value="New York">New York</option>
                  <option value="Washington" disabled>Washington</option>
                  <option value="Michigan">Michigan</option>
                </optgroup>
                <optgroup label="SP">
                  <option value="Madrid">Madrid</option>
                  <option value="Barcelona">Barcelona</option>
                  <option value="Malaga">Malaga</option>
                </optgroup>
                <optgroup label="CA">
                  <option value="Montreal">Montreal</option>
                  <option value="Toronto">Toronto</option>
                  <option value="Vancouver">Vancouver</option>
                </optgroup>
              </select>
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-4">
            <div class="col-lg-6">
              <h5>Single Select Input: No Search</h5>
              <p class="text-muted mb-0">
                Set
                <code
                  >[options]=&quot;&lbrace;searchEnabled:false,removeItemButton:true&rbrace;&quot;</code
                >
                attribute to set a no search
              </p>
            </div>
            <div class="col-lg-6">
              <select
                choicesSelect
                [options]="{ searchEnabled: false, removeItemButton: true }"
                class="form-control"
                id="choices-single-no-search"
                name="choices-single-no-search"
              >
                <option value="Zero">Zero</option>
                <option value="One">One</option>
                <option value="Two">Two</option>
                <option value="Three">Three</option>
                <option value="Four">Four</option>
                <option value="Five">Five</option>
                <option value="Six">Six</option>
              </select>
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-4">
            <div class="col-lg-6">
              <h5>Single Select Input: No Sorting</h5>
              <p class="text-muted mb-0">
                Set
                <code
                  >[options]=&quot;&lbrace;shouldSortItems:false&rbrace;&quot;</code
                >
                attribute to set a no Sorting
              </p>
            </div>
            <div class="col-lg-6">
              <select
                choicesSelect
                [options]="{ shouldSortItems: false, searchEnabled: false }"
                class="form-control"
                name="choices-single-no-sorting"
              >
                <option value="Madrid">Madrid</option>
                <option value="Toronto">Toronto</option>
                <option value="Vancouver">Vancouver</option>
                <option value="London">London</option>
                <option value="Manchester">Manchester</option>
                <option value="Liverpool">Liverpool</option>
                <option value="Paris">Paris</option>
                <option value="Malaga">Malaga</option>
                <option value="Washington" disabled>Washington</option>
                <option value="Lyon">Lyon</option>
                <option value="Marseille">Marseille</option>
                <option value="Hamburg">Hamburg</option>
                <option value="Munich">Munich</option>
                <option value="Barcelona">Barcelona</option>
                <option value="Berlin">Berlin</option>
                <option value="Montreal">Montreal</option>
                <option value="New York">New York</option>
                <option value="Michigan">Michigan</option>
              </select>
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-4">
            <div class="col-lg-6">
              <h5>Multiple Select Input: Default</h5>
              <p class="text-muted mb-0">
                Set
                <code>multiple</code>
                attribute
              </p>
            </div>
            <div class="col-lg-6">
              <select
                choicesSelect
                multiple
                class="form-control"
                id="choices-multiple-default"
                name="choices-multiple-default"
                [options]="{ searchEnabled: false }"
              >
                <option value="Choice 1" selected>Choice 1</option>
                <option value="Choice 2">Choice 2</option>
                <option value="Choice 3">Choice 3</option>
                <option value="Choice 4" disabled>Choice 4</option>
              </select>
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-4">
            <div class="col-lg-6">
              <h5>Multiple Select Input: With Remove Button</h5>
              <p class="text-muted mb-0">
                Set
                <code>
                  multiple
                  [options]=&quot;&lbrace;removeItemButton:true&rbrace;&quot;</code
                >
                <code>[multiple]=&quot;true&quot;</code>
                attribute
              </p>
            </div>
            <div class="col-lg-6">
              <select
                class="form-control"
                choicesSelect
                [options]="{ removeItemButton: true }"
                name="choices-multiple-remove-button"
                multiple
              >
                <option value="Choice 1" selected>Choice 1</option>
                <option value="Choice 2">Choice 2</option>
                <option value="Choice 3">Choice 3</option>
                <option value="Choice 4">Choice 4</option>
              </select>
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-4">
            <div class="col-lg-6">
              <h5>Multiple Select Input: Option Groups</h5>
              <p class="text-muted mb-0">
                Set
                <code>multiple</code>
                attribute
              </p>
            </div>
            <div class="col-lg-6">
              <select
                choicesSelect
                class="form-control"
                name="choices-multiple-groups"
                multiple
              >
                <option value="">Choose a city</option>
                <optgroup label="UK">
                  <option value="London">London</option>
                  <option value="Manchester">Manchester</option>
                  <option value="Liverpool">Liverpool</option>
                </optgroup>
                <optgroup label="FR">
                  <option value="Paris">Paris</option>
                  <option value="Lyon">Lyon</option>
                  <option value="Marseille">Marseille</option>
                </optgroup>
                <optgroup label="DE" disabled>
                  <option value="Hamburg">Hamburg</option>
                  <option value="Munich">Munich</option>
                  <option value="Berlin">Berlin</option>
                </optgroup>
                <optgroup label="US">
                  <option value="New York">New York</option>
                  <option value="Washington" disabled>Washington</option>
                  <option value="Michigan">Michigan</option>
                </optgroup>
                <optgroup label="SP">
                  <option value="Madrid">Madrid</option>
                  <option value="Barcelona">Barcelona</option>
                  <option value="Malaga">Malaga</option>
                </optgroup>
                <optgroup label="CA">
                  <option value="Montreal">Montreal</option>
                  <option value="Toronto">Toronto</option>
                  <option value="Vancouver">Vancouver</option>
                </optgroup>
              </select>
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-4">
            <div class="col-lg-6">
              <h5>Text Input: Limit Values with Remove Button</h5>
              <p class="text-muted mb-0">
                Set
                <code
                  >data-choices data-choices-limit="3"
                  data-choices-removeItem</code
                >
                attribute.
              </p>
            </div>
            <div class="col-lg-6">
              <input
                class="form-control"
                choicesSelect
                [options]="{ removeItemButton: true }"
                type="text"
                value="Task-1"
              />
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-4">
            <div class="col-lg-6">
              <h5>Text Input: Unique Values Only</h5>
              <p class="text-muted mb-0">
                Set
                <code
                  >[options]=&quot;&lbrace;uniqueItemText:&apos;
                  &apos;t;&quo&rbrace;</code
                >
                attribute
              </p>
            </div>
            <div class="col-lg-6">
              <input
                class="form-control"
                choicesSelect
                [options]="{ duplicateItemsAllowed: false }"
                type="text"
                value="Project-A, Project-B"
              />
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-4">
            <div class="col-lg-6">
              <h5>Text Input: Disabled</h5>
              <p class="text-muted mb-0">
                Set <code>disabled</code> attribute.
              </p>
            </div>
            <div class="col-lg-6">
              <input
                class="form-control"
                choicesSelect
                id="choices-text-disabled"
                disabled
                type="text"
                value="josh@joshuajohnson.co.uk, joe@bloggs.co.uk"
              />
            </div>
          </div>
        </div>
      </div>
    </app-ui-card>
  `,
  styles: ``,
})
export class Choicesjs {}
