import { faker } from '@faker-js/faker';
import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import { createGroups } from '../../../helpers/storybook';
import { Select } from './Select';

const groups = createGroups({
  Behavior: ['autoFocus', 'disabled', 'inlineMode', 'name', 'id'],
  Content: ['label', 'options', 'error', 'tooltipContent', 'value'],
  Styling: ['className'],
  Events: ['onChange', 'onBlur', 'onFocus'],
});

const meta: Meta<typeof Select> = {
  title: 'Primary Components/Form Elements/Select',
  component: Select,
  argTypes: {
    ...groups,
  },
};

export default meta;

export const Main: StoryObj<typeof Select> = {
  args: {
    name: 'number',
    label: 'Number',
    options: [
      { value: '1', label: 'One' },
      { value: '2', label: 'Two' },
      { value: '3', label: 'Three' },
      { value: '4', label: 'Four' },
      { value: '5', label: 'Five' },
      { value: '6', label: 'Six' },
      { value: '7', label: 'Seven' },
      { value: '8', label: 'Eight' },
      { value: '9', label: 'Nine' },
      { value: '10', label: 'Ten' },
    ],
    tooltipContent: faker.lorem.paragraph(2),
  },
  render: (args) =>
    React.createElement(() => {
      const [value, setValue] = useState(args.value);
      return (
        <Select
          {...args}
          value={value}
          onChange={(e) => {
            action('onChange')(e);
            setValue(e.currentTarget.value);
          }}
        />
      );
    }),
};
