import { StoryObj, Meta } from '@storybook/react';

import { DROPDOWN_DATA, DROPDOWN_LINK } from './Dropdown.data';
import { Dropdown, TDropdownOption } from '@/components';

const meta: Meta<typeof Dropdown> = {
  component: Dropdown,
};

export default meta;

type TStory = StoryObj<typeof Dropdown>;

export const Primary: TStory = {
  args: {
    theme: 'light',
    menuPosition: 'top',
    toggler: <Dropdown.Button dotsSize={'sm'} />,
    children: (
      <>
        {DROPDOWN_DATA.map((option, key) => (
          <Dropdown.Item key={key} option={option} closeOnClick={true} />
        ))}
      </>
    ),
  },
  decorators: [
    // eslint-disable-next-line @typescript-eslint/naming-convention
    TStory => (
      <div className="h-[21vh] w-80 flex items-end justify-end">
        <TStory />
      </div>
    ),
  ],
};

export const DropdownWithLinks: TStory = {
  args: {
    theme: 'light',
    menuPosition: 'top',
    toggler: <Dropdown.Button dotsSize={'sm'} />,
    children: (
      <a href={DROPDOWN_LINK.href} target={DROPDOWN_LINK.target}>
        <Dropdown.Item option={{ ...(DROPDOWN_LINK.option as TDropdownOption) }} closeOnClick={true} />
      </a>
    ),
  },
  decorators: [
    // eslint-disable-next-line @typescript-eslint/naming-convention
    TStory => (
      <div className="h-[21vh] w-80 flex items-end justify-end">
        <TStory />
      </div>
    ),
  ],
};