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

const countries: IComboBoxSearch[] = [
  {
    id: 1,
    name: 'Denmark',
  },
  {
    id: 2,
    name: 'Sweden',
  },
  {
    id: 3,
    name: 'Norway',
  },
  {
    id: 4,
    name: 'Finland',
  },
  {
    id: 5,
    name: 'Iceland',
  },
  {
    id: 6,
    name: 'Greenland',
  },
  {
    id: 7,
    name: 'Faroe Islands',
  },
  {
    id: 8,
    name: 'United Kingdom',
  },
  {
    id: 9,
    name: 'Germany',
  },
  {
    id: 10,
    name: 'France',
  },
  {
    id: 11,
    name: 'Spain',
  },
  {
    id: 12,
    name: 'Portugal',
  },
  {
    id: 13,
    name: 'Italy',
  },
  {
    id: 14,
    name: 'Greece',
  },
];

export default {
  title: 'Delphinus/ComboBox',
  component: AUComboBoxComponent,
  argTypes: {
    onItemSelect: {
      table: {
        disable: true,
      }
    },
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        <form action="get" method="/">
          {Story()}
        </form>
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUComboBoxComponent>;

type Story = StoryObj<typeof AUComboBoxComponent>;

export const ComboBox: Story = {
  args: {
    data: countries,
    label: 'Country',
    resultsText: {
      one: 'There is {{dataLength}} country available.',
      other: 'There are {{dataLength}} countries available.',
    },
    noResultsText: 'No countries found.',
    noResultsTextSecondary: 'Try searching for something else.',
    clearOnSelect: true,
  },
  render: (args) => <AUComboBoxComponent {...args} />,
};