<script setup>
import { ref } from 'vue';
const options = ref(['United States', 'United Kingdom', 'Canada', 'Australia', 'Germany']);
</script>
<template>
  <anchor-autocomplete :options="options" label="Search Countries" disabled></anchor-autocomplete>
</template>

<script setup>
import { ref } from 'vue';
const options = ref(['United States', 'United Kingdom', 'Canada', 'Australia', 'Germany']);
</script>
<template>
  <anchor-autocomplete :options="options" label="Search Countries" readonly></anchor-autocomplete>
</template>

<script setup>
import { ref } from 'vue';
const options = ref(['United States', 'United Kingdom', 'Canada', 'Australia', 'Germany']);
</script>
<template>
  <anchor-autocomplete :options="options" label="Search Countries" required></anchor-autocomplete>
</template>

<script setup>
import { ref } from 'vue';
const options = ref(['United States', 'United Kingdom', 'Canada', 'Australia', 'Germany']);
</script>
<template>
  <anchor-autocomplete :options="options" label="Search Countries" help-text="Enter a country name to see suggestions"></anchor-autocomplete>
</template>

<script setup>
import { ref } from 'vue';
const options = ref(['United States', 'United Kingdom', 'Canada', 'Australia', 'Germany']);
</script>
<template>
  <anchor-autocomplete :options="options" label="Search Countries" error-text="Please select a valid country"></anchor-autocomplete>
</template>

<script setup>
import { ref } from 'vue';
const options = ref(['United States', 'United Kingdom', 'Canada', 'Australia', 'Germany']);

const customFilter = (opts, input, condition) => {
  const trimmed = input?.toLowerCase().trim();
  if (!trimmed) return opts;
  return opts.filter(opt =>
    (opt.label || opt.value).toLowerCase().startsWith(trimmed)
  );
};
</script>
<template>
  <anchor-autocomplete :options="options" :custom-filter="customFilter" label="Search Countries"></anchor-autocomplete>
</template>

<script setup>
import { ref } from 'vue';

const options = ref([]);
const loading = ref(false);
const autocomplete = ref(null);
let abortController = null;

async function handleInputChange(e) {
  const searchTerm = e.detail.value;

  // Abort previous in-flight request to avoid stale results
  if (abortController) abortController.abort();
  abortController = new AbortController();

  // Show loading indicator
  loading.value = true;

  try {
    const response = await fetch(`/api/countries?q=${encodeURIComponent(searchTerm)}`, {
      signal: abortController.signal
    });
    const data = await response.json();

    // Feed server-filtered results back into options
    loading.value = false;
    options.value = data.map(c => ({ value: c.id, label: c.name }));
  } catch (err) {
    if (err.name !== 'AbortError') {
      loading.value = false;
    }
  }
}
</script>
<template>
  <anchor-autocomplete
    ref="autocomplete"
    :options="options"
    :loading="loading"
    label="Search Countries"
    placeholder="Search..."
    load-text="Searching countries..."
    @inputchange="handleInputChange"
  ></anchor-autocomplete>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const options = ref(['United States', 'United Kingdom', 'Canada', 'Australia', 'Germany']);
const autocomplete = ref(null);

const handlers = {
  selectevent: (e) => console.log('Selected:', e.detail),
  inputchange: (e) => console.log('Input changed:', e.detail),
  expand: (e) => console.log('Dropdown expanded:', e.detail),
  collapse: (e) => console.log('Dropdown collapsed:', e.detail),
  highlight: (e) => console.log('Option highlighted:', e.detail),
  focusevent: (e) => console.log('Input focused:', e.detail),
  blurevent: (e) => console.log('Input blurred:', e.detail),
};

onMounted(() => {
  const el = autocomplete.value.$el;
  Object.entries(handlers).forEach(([event, handler]) =>
    el.addEventListener(event, handler)
  );
});

onUnmounted(() => {
  const el = autocomplete.value.$el;
  Object.entries(handlers).forEach(([event, handler]) =>
    el.removeEventListener(event, handler)
  );
});
</script>
<template>
  <anchor-autocomplete
    ref="autocomplete"
    :options="options"
    label="Search Countries"
    placeholder="Interact to see events in console"
  ></anchor-autocomplete>
</template>

<anchor-typeahead options='["foo","bar","foobar"]' language="NO" texts='{"noResult":"The search yeilded no results"}'></anchor-typeahead>

graph TD;
  anchor-autocomplete --> anchor-input
  anchor-autocomplete --> anchor-option
  anchor-input --> anchor-form-field
  anchor-input --> anchor-icon
  anchor-input --> anchor-tooltip
  anchor-form-field --> anchor-icon
  anchor-option --> anchor-icon
  style anchor-autocomplete fill:#f9f,stroke:#333,stroke-width:4px