<template>
  <div class="combobox-conf">
    <BmsInputToggle
      label="Autocomplete"
      name="autocomplete"
      v-model="autocomplete"
    />
    <BmsInputToggle
      label="Can add new option"
      name="can-add-new-option"
      v-model="canAddNewOption"
    />
    <BmsInputToggle label="Small" name="small" v-model="small" />
  </div>

  value: {{ modelValueSingleText }} <br />
  searching: {{ modelValueSearching }} <br />
  <BmsCombobox
    label="Single & string options w/ slots"
    v-model="modelValueMultiple"
    v-model:searching="modelValueSearching"
    multiple
    :options="optionsText"
    :autocomplete="autocomplete"
    :small="small"
    :canAddNewOption="canAddNewOption"
    @add-new-option="onAddNewOption"
  >
    <template #option="{ option }">
      <BmsChip>{{ option.label }}</BmsChip>
    </template>
    <template #new-option="{ newOption }">
      custom add new option : {{ newOption }}
    </template>
    <template #selected-items="{ selectedItems, dismiss }">
      <span v-for="item in selectedItems">
        custom : {{ item.value }}
        <button @click="() => dismiss(item.value)">X</button>
      </span>
    </template>
    <template #selected-item="{ selectedItem }">
      <BmsChip v-if="selectedItem">{{ selectedItem.label }}</BmsChip>
    </template>
    <template #input-element>
      <input v-if="autocomplete" v-model="modelValueSearching" />
    </template>
  </BmsCombobox>

  value: {{ modelValueSingleText }} <br />
  searching: {{ modelValueSearching }} <br />
  <BmsCombobox
    label="Single & string options"
    v-model="modelValueSingleText"
    v-model:searching="modelValueSearching"
    :options="optionsText"
    :autocomplete="autocomplete"
    :small="small"
    :canAddNewOption="canAddNewOption"
    @add-new-option="onAddNewOption"
  />

  value: {{ modelValueMultipleText }} <br />
  <BmsCombobox
    label="Multiple & string options (with select ALL)"
    v-model="modelValueMultipleText"
    multiple
    selectAll
    :options="optionsText"
    :autocomplete="autocomplete"
    :small="small"
    :canAddNewOption="canAddNewOption"
    @add-new-option="onAddNewOption"
  />

  value: {{ modelValueSingle }} <br />
  <BmsCombobox
    label="Single & object options"
    v-model="modelValueSingle"
    :options="optionsLabelValue"
    :autocomplete="autocomplete"
    :small="small"
    :canAddNewOption="canAddNewOption"
    @add-new-option="onAddNewOption"
  />

  value: {{ modelValueMultiple }} <br />
  <BmsCombobox
    label="Multiple & object options"
    v-model="modelValueMultiple"
    multiple
    :options="optionsLabelValue"
    :autocomplete="autocomplete"
    :small="small"
    :canAddNewOption="canAddNewOption"
    @add-new-option="onAddNewOption"
  />

  value: {{ modelValueServer }} <br />
  <BmsCombobox
    label="Server select"
    v-model="modelValueServer"
    server
    :request="selectRequest"
    :autocomplete="autocomplete"
    :small="small"
    :canAddNewOption="canAddNewOption"
    @add-new-option="onAddNewOption"
  />

  value: {{ modelValueServerMultiple }} <br />
  <BmsCombobox
    label="Server select multiple"
    v-model="modelValueServerMultiple"
    multiple
    :request="selectRequestWithEmptySearch"
    :autocomplete="autocomplete"
    :small="small"
    :canAddNewOption="canAddNewOption"
    @add-new-option="onAddNewOption"
    ><template #search-hint>🐉 Rechercher un pokemon 🐉</template></BmsCombobox
  >
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import BmsCombobox from '@/components/form/BmsCombobox.vue';
import BmsInputToggle from '@/components/form/BmsInputToggle.vue';
import { Bird, Cat, Dog } from 'lucide-vue-next';
import { useNotifications } from '@/plugins/notifications/index';
import BmsChip from '@/components/form/BmsChip.vue';
import { InputOption } from '@/models';

const { success, error } = useNotifications();

const modelValueSingle = ref('0');
const modelValueSingleText = ref('titi-0');
const modelValueMultiple = ref(['0', '1']);
const modelValueMultipleText = ref(['toto-1', 'titi-3']);
const modelValueServer = ref('Grass');
const modelValueServerMultiple = ref([]);
const autocomplete = ref(false);
const canAddNewOption = ref(false);
const small = ref(false);
const modelValueSearching = ref('');

const onAddNewOption = () => {
  console.log('add new option');
  success('Implement mechanism to add new option');
};

const optionsLabelValue = ref([
  {
    value: '0',
    label: 'titi-0',
  },
  {
    value: '1',
    label: 'toto-1',
  },
  {
    value: '2',
    label: 'titi-2',
  },
  {
    value: '3',
    label: 'toto-3',
  },
  {
    value: '4',
    label: 'toto-4',
  },
  {
    value: '5',
    label: 'toto-5',
  },
  {
    value: '6',
    label: 'titi-6',
  },
  {
    value: '7',
    label: 'toto-7',
  },
  {
    value: '8',
    label: 'titi-8',
  },
  {
    value: '9',
    label: 'titi-9',
  },
  {
    value: '10',
    label: 'titi-10',
  },
]);

const optionsVeryLong = ref<string[]>([]);

const optionsEmoji = [
  { label: 'France', value: 'fr', icon: '🇫🇷' },
  { label: 'Germany', value: 'de', icon: '🇩🇪' },
  { label: 'Spain', value: 'es', icon: '🇪🇸' },
];

const optionsIcon = [
  { label: 'Dog', value: 'Dog', icon: Dog },
  { label: 'Cat', value: 'Cat', icon: Cat },
  { label: 'Bird', value: 'Bird', icon: Bird },
];
const optionsText = ref<string[]>([]);

onMounted(() => {
  setTimeout(() => {
    optionsText.value = [
      'titi-0',
      'toto-1',
      'titi-2',
      'toto-3',
      'toto-4',
      'toto-5',
      'titi-6',
      'toto-7',
      'titi-8',
      'titi-9',
      'titi-10',
    ];
  }, 1000);

  for (let i = 0; i < 500; i++) {
    optionsVeryLong.value.push(
      `Ea ut sint excepteur aliqua.Veniamproidenteaametinmollitcupidatateu exercitation sit.Culpa aliqua nostrud adipisicing occaecat tempor sit exercitation tempor est ea esse elit.-${i}`,
    );
  }
});

const selectRequest = (
  _abortController: AbortController,
  searchString?: string,
) =>
  fetch(`http://localhost:3000/pokemon-types?search=${searchString}`).then(
    (res) => res.json().then((res) => ({ data: res })),
  );

const selectRequestWithEmptySearch = (
  _abortController: AbortController,
  searchString?: string,
): Promise<{ data: InputOption[] }> => {
  return !searchString
    ? Promise.resolve({ data: [] as InputOption[] })
    : fetch(`http://localhost:3000/pokemon-types?search=${searchString}`).then(
        (res) => res.json().then((res) => ({ data: res as InputOption[] })),
      );
};
</script>

<style scoped lang="scss">
.combobox-conf {
  display: flex;
  gap: 1em;
}
</style>
