import React from 'react';
import { StoryObj, Meta } from '@storybook/react';
import AUAutoSuggestComponent from '../src/components/AUAutoSuggestComponent';
import { ThemeWrapper } from './lib/helpers';

export default {
  title: 'Delphinus/AutoSuggest',
  component: AUAutoSuggestComponent,
  argTypes: {
    label: {
      table: {
        disable: true,
      }
    },
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUAutoSuggestComponent>;

type Story = StoryObj<typeof AUAutoSuggestComponent>;

export const AutoComplete: Story = {
  args: {
    collection: [],
    getSuggestions: (value, _, callback) => {
      const inputValue = value.trim().toLowerCase();
      const inputLength = inputValue.length;

      const results = inputLength === 0
        ? []
        : [
          { id: 1, name: 'Copenhagen' },
          { id: 2, name: 'Aarhus' },
          { id: 3, name: 'Odense' },
          { id: 4, name: 'Aalborg' },
          { id: 5, name: 'Esbjerg' },
          { id: 6, name: 'Randers' },
          { id: 7, name: 'Kolding' },
          { id: 8, name: 'Horsens' },
          { id: 9, name: 'Vejle' },
          { id: 10, name: 'Herning' },
          { id: 11, name: 'Frederiksberg' },
          { id: 12, name: 'Fredericia' },
          { id: 13, name: 'Roskilde' },
          { id: 14, name: 'Silkeborg' },
          { id: 15, name: 'Næstved' },
          { id: 16, name: 'Helsingør' },
          { id: 17, name: 'Hvidovre' },
          { id: 18, name: 'Holstebro' },
          { id: 19, name: 'Hjørring' },
          { id: 20, name: 'Glostrup' },
          { id: 21, name: 'Hillerød' },
          { id: 22, name: 'Slagelse' },
          { id: 23, name: 'Viborg' },
          { id: 24, name: 'Ikast-Brande' },
          { id: 25, name: 'Frederikshavn' },
          { id: 26, name: 'Ringsted' },
          { id: 27, name: 'Taastrup' },
          { id: 28, name: 'Køge' },
          { id: 29, name: 'Nørresundby' },
          { id: 30, name: 'Haderslev' },
          { id: 31, name: 'Varde' },
          { id: 32, name: 'Hedensted' },
          { id: 33, name: 'Sønderborg' },
          { id: 34, name: 'Greve' },
          { id: 35, name: 'Albertslund' },
          { id: 36, name: 'Skive' },
          { id: 37, name: 'Hørsholm' },
          { id: 38, name: 'Horsens' },
          { id: 39, name: 'Herning' },
          { id: 40, name: 'Frederiksberg' },
          { id: 41, name: 'Fredericia' },
          { id: 42, name: 'Roskilde' },
          { id: 43, name: 'Silkeborg' },
          { id: 44, name: 'Næstved' },
          { id: 45, name: 'Helsingør' },
          { id: 46, name: 'Hvidovre' },
          { id: 47, name: 'Holstebro' },

        ].filter((lang) => lang.name.toLowerCase().slice(0, inputLength) === inputValue);

      callback(results);
    },
    getSuggestionValue: (suggestion) => suggestion.name,
    setResults: () => { },
    setQuery: () => { },
    renderSuggestion: (suggestion) => <span>{suggestion.name}</span>,
    placeholder: 'Search',
  },
  render: (args) => <AUAutoSuggestComponent {...args} />,
};