<template>
  <BmsBackButton :fallback="{ path: '/' }" />
  <br />
  <BmsButton @click="inputLabelValue = '1'">Set value to '1'</BmsButton>
  <br />
  Valeur: {{ inputLabelValue }}
  <BmsAutocomplete
    ref="autocompleteElement"
    label="Autocomplete avec label/value"
    :options="optionsLabelValue"
    v-model="inputLabelValue"
    :can-add-new-option="true"
    @add-new-option="onAddNewOption"
  />
  Valeur: {{ inputValueIcon }}
  <BmsAutocomplete
    label="Autocomplete avec icones"
    :options="optionsIcon"
    v-model="inputValueIcon"
    @select="(o) => console.log('select', o.value)"
  />

  Valeur: {{ inputText }}
  <BmsAutocomplete
    label="Autocomplete avec tableau de strings"
    :options="optionsText"
    v-model="inputText"
  />

  Valeur: {{ select }}
  <BmsSelect
    label="Select"
    @blur="console.log('blur')"
    v-model="select"
    :options="optionsLabelValue"
  />

  Valeur: {{ multiSelect }}
  <BmsMultiSelect
    label="Multi-select"
    v-model="multiSelect"
    :options="optionsLabelValue"
  />
  <br />
  Valeur: {{ multiSelectText }}
  <BmsMultiSelect
    label="Multi-select text"
    v-model="multiSelectText"
    :options="optionsText"
  />
  <br />
  Valeur: {{ autocompleteText }}
  <BmsServerAutocomplete
    label="Autocomplete avec un appel API"
    :request="autocompleteRequest"
    v-model="autocompleteText"
  />
</template>

<script setup lang="ts">
import { BmsAutocomplete, BmsBackButton } from '@/index';
import { Heart, Cat } from 'lucide-vue-next';
import { range } from 'lodash';
import { onMounted, ref, useTemplateRef } from 'vue';
import BmsButton from '@/components/button/BmsButton.vue';
import BmsSelect from '@/components/form/BmsSelect.vue';
import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
import BmsServerAutocomplete from '@/components/form/BmsServerAutocomplete.vue';

const select = ref('');
const multiSelect = ref(null);
const multiSelectText = ref(null);
const autocompleteElement = useTemplateRef('autocompleteElement');

onMounted(() => {
  (autocompleteElement.value as any)?.setFocus();
});

const optionsLabelValue = ref(
  range(0, 30).map((i) =>
    Math.random() > 0.5
      ? { value: i.toString(), label: `toto-${i}` }
      : { value: i.toString(), label: `titi-${i}` },
  ),
);
const inputLabelValue = ref('');

const optionsText = ref(
  range(0, 30).map((i) => (Math.random() > 0.5 ? `toto-${i}` : `titi-${i}`)),
);
const inputText = ref('');
const autocompleteText = ref('');

const optionsIcon = ref(
  range(0, 30).map((i) =>
    Math.random() > 0.5
      ? { value: i.toString(), label: `toto-${i}`, icon: Heart }
      : { value: i.toString(), label: `titi-${i}`, icon: Cat },
  ),
);
const inputValueIcon = ref('');

const onAddNewOption = (newOption: string) => {
  optionsLabelValue.value.push({ label: newOption, value: newOption });
};

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