import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import type { DropdownButtonProps } from './DropdownButton';
import { DropdownButton } from './DropdownButton';
import { DropdownButtonContext } from './DropdownButtonContext';

const meta: Meta<typeof DropdownButton> = {
  title: 'UI kit/DropdownButton',
  component: DropdownButton,
  tags: ['autodocs'],
  argTypes: {
    children: { control: false },
  },
};

export default meta;

type Story = StoryObj<typeof DropdownButton>;

export const Default: Story = {
  args: {
    label: 'DropdownButton',
    children: (
      <>
        <DropdownButton.Item icon='shp-add-user' label='Item 1' onAction={() => console.log('Item 1')} />
        <DropdownButton.Item description='Description 1' label='Item 2' onAction={() => console.log('Item 2')} />
        <DropdownButton.Item
          icon='shp-alert'
          description='Important'
          label='Item 3'
          onAction={() => console.log('Item 3')}
        />
      </>
    ),
  },
};

export const SubMenu: Story = {
  args: {
    label: 'DropdownButton',
    children: (
      <>
        <DropdownButton.Item label='Item 1' onAction={() => console.log('Item 1')} />
        <DropdownButton.Item label='Item 2' onAction={() => console.log('Item 2')} />
        <DropdownButton.Item label='Item 3' onAction={() => console.log('Item 3')} />
        <DropdownButton label='Submenu'>
          <DropdownButton.Item label='Item 1' onAction={() => console.log('Item 1')} />
          <DropdownButton.Item label='Item 2' onAction={() => console.log('Item 2')} />
          <DropdownButton.Item label='Item 3' onAction={() => console.log('Item 3')} />
        </DropdownButton>
      </>
    ),
  },
};

export const OnClick: Story = {
  args: {
    label: 'DropdownButton',
    children: (
      <>
        <DropdownButton.Item label='Item 1' onAction={() => console.log('Item 1')} />
        <DropdownButton.Item label='Item 2' onAction={() => console.log('Item 2')} />
        <DropdownButton.Item label='Item 3' onAction={() => console.log('Item 3')} />
        <DropdownButton label='Submenu'>
          <DropdownButton.Item label='Item 1' onAction={() => console.log('Item 1')} />
          <DropdownButton.Item label='Item 2' onAction={() => console.log('Item 2')} />
          <DropdownButton.Item label='Item 3' onAction={() => console.log('Item 3')} />
          <DropdownButton label='Submenu 2'>
            <DropdownButton.Item label='Item 2.1' onAction={() => console.log('Item 2.1')} />
            <DropdownButton.Item label='Item 2.2' onAction={() => console.log('Item 2.2')} />
            <DropdownButton.Item label='Item 2.3' onAction={() => console.log('Item 2.3')} />
            <DropdownButton.Item label='Item 2.4' onAction={() => console.log('Item 2.4')} />
            <DropdownButton.Item label='Item 2.5' onAction={() => console.log('Item 2.5')} />
          </DropdownButton>
        </DropdownButton>
      </>
    ),
    trigger: 'click',
  },
};

const ExternalContainerExample: React.FC<DropdownButtonProps> = props => (
  <DropdownButtonContext.Provider value={{ mobileView: true }}>
    <DropdownButton {...props} />
  </DropdownButtonContext.Provider>
);

export const MobileView: Story = {
  render: args => <ExternalContainerExample {...args} />,
  args: {
    label: 'DropdownButton',
    trigger: 'click',
    children: (
      <>
        <DropdownButton.Item label='Item 1' onAction={() => console.log('Item 1')} />
        <DropdownButton.Item label='Item 2' onAction={() => console.log('Item 2')} />
        <DropdownButton.Item label='Item 3' onAction={() => console.log('Item 3')} />
        <DropdownButton label='Submenu'>
          <DropdownButton.Item label='Item 1.1' onAction={() => console.log('Item 1.1')} />
          <DropdownButton.Item label='Item 1.2' onAction={() => console.log('Item 1.2')} />
          <DropdownButton.Item label='Item 1.3' onAction={() => console.log('Item 1.3')} />
          <DropdownButton label='Submenu 2'>
            <DropdownButton.Item label='Item 2.1' onAction={() => console.log('Item 2.1')} />
            <DropdownButton.Item label='Item 2.2' onAction={() => console.log('Item 2.2')} />
            <DropdownButton.Item label='Item 2.3' onAction={() => console.log('Item 2.3')} />
            <DropdownButton.Item label='Item 2.4' onAction={() => console.log('Item 2.4')} />
            <DropdownButton.Item label='Item 2.5' onAction={() => console.log('Item 2.5')} />
          </DropdownButton>
        </DropdownButton>
      </>
    ),
  },
};