import { useArgs } from 'storybook/preview-api';

import Select from '#ui/Common/Select';
import StatelessSelect from '#ui/Common/Select/StatelessSelect';
import * as OSIcons from '#ui/Icons/OperatingSystem';

import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';

type Story = StoryObj<typeof Select>;
type Meta = MetaObj<typeof Select>;

export const Default: Story = {
  args: {
    values: ['v20.8.0', 'v19.9.0', 'v18.18.0', 'v17.9.1', 'v16.20.2'],
    value: 'v16.20.2',
    label: 'Node.js version',
  },
};

export const WithoutLabel: Story = {
  args: {
    values: ['v20.8.0', 'v19.9.0', 'v18.18.0', 'v17.9.1', 'v16.20.2'],
    value: 'v16.20.2',
  },
};

export const WithScrollButtons: Story = {
  args: {
    values: Array.from({ length: 100 }, (_, i) => `Item ${i}`),
    value: 'Item 50',
  },
};

export const DropdownLabel: Story = {
  args: {
    values: [
      {
        label: 'Getting Started',
        items: [
          { value: 'section-1', label: 'Getting Started' },
          { value: 'section-2', label: 'How to install Node.js' },
          {
            value: 'section-3',
            label: 'How much JavaScript do you need to know to use Node.js?',
          },
          {
            value: 'section-4',
            label: 'Differences between Node.js and the Browser',
          },
          { value: 'section-5', label: 'The V8 JavaScript Engine' },
          {
            value: 'section-6',
            label: 'An introduction to the npm package manager',
          },
          { value: 'section-7', label: 'ECMAScript 2015 (ES6) and beyond' },
          {
            value: 'section-8',
            label: 'Node.js, the difference between development and production',
          },
        ],
      },
    ],
    placeholder: 'Select a guide',
    label: 'Getting Started',
  },
};

export const InlineSelect: Story = {
  args: {
    values: [
      {
        label: 'Platform',
        items: [
          {
            value: 'linux',
            label: 'Linux',
            iconImage: <OSIcons.Linux width={16} height={16} />,
          },
          {
            value: 'macos',
            label: 'macOS',
            iconImage: <OSIcons.Apple width={16} height={16} />,
          },
          {
            value: 'windows',
            label: 'Windows',
            iconImage: <OSIcons.Microsoft width={16} height={16} />,
          },
          {
            value: 'aix',
            label: 'AIX',
            iconImage: <OSIcons.AIX width={16} height={16} />,
          },
        ],
      },
    ],
    value: 'macos',
    inline: true,
  },
};

export const WithNoScriptSelect: Story = {
  render: () => (
    <StatelessSelect
      values={Array.from({ length: 100 }, (_, i) => `Item ${i}`)}
      defaultValue="Item 50"
    />
  ),
};

export default {
  component: Select,
  render: args => {
    // eslint-disable-next-line @eslint-react/rules-of-hooks
    const [, setArgs] = useArgs();

    const onChange = (value: string) => {
      args.onChange?.(value);
      setArgs({ value });
    };

    return <Select {...args} onChange={onChange} />;
  },
} as Meta;
