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

import { Button } from '../Button/Button';
import { Icon } from '../Icon/Icon';
import { IconButton } from '../IconButton/IconButton';
import { Text } from '../Typography/Text/Text';

import { Menu } from './Menu';

const meta: Meta<typeof Menu> = {
  title: 'UI kit/Menu',
  component: Menu,
  tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof Menu>;

export const WithButtonTrigger: Story = {
  args: {
    placement: 'bottom start',
  },
  render: args => (
    <Menu {...args} trigger={({ props }) => <Button {...props}>Actions</Button>}>
      <Menu.Item onAction={() => alert('Edit clicked')}>
        <Menu.Item.Cell>
          <Text>Edit</Text>
        </Menu.Item.Cell>
      </Menu.Item>
      <Menu.Item onAction={() => alert('Duplicate clicked')}>
        <Menu.Item.Cell>
          <Text>Duplicate</Text>
        </Menu.Item.Cell>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item onAction={() => alert('Delete clicked')}>
        <Menu.Item.Cell>
          <Text>Delete</Text>
        </Menu.Item.Cell>
      </Menu.Item>
    </Menu>
  ),
};

export const WithIconButtonTrigger: Story = {
  args: {
    placement: 'bottom start',
  },
  render: args => (
    <Menu {...args} trigger={({ props }) => <IconButton {...props} icon='shp-more' ghost variant='secondary' />}>
      <Menu.Item onAction={() => alert('Edit clicked')}>
        <Menu.Item.Cell>
          <Text>Edit</Text>
        </Menu.Item.Cell>
      </Menu.Item>
      <Menu.Item onAction={() => alert('Duplicate clicked')}>
        <Menu.Item.Cell>
          <Text>Duplicate</Text>
        </Menu.Item.Cell>
      </Menu.Item>
      <Menu.Item onAction={() => alert('Delete clicked')}>
        <Menu.Item.Cell>
          <Text>Delete</Text>
        </Menu.Item.Cell>
      </Menu.Item>
    </Menu>
  ),
};

export const WithIcons: Story = {
  render: args => (
    <Menu
      {...args}
      trigger={({ props }) => (
        <Button {...props} iconLeft='shp-more'>
          Actions
        </Button>
      )}
    >
      <Menu.Item onAction={() => alert('Edit clicked')}>
        <Menu.Item.Cell grow={false}>
          <Icon size='sm' icon='shp-edit-icon' />
        </Menu.Item.Cell>
        <Menu.Item.Cell>
          <Text>Edit</Text>
        </Menu.Item.Cell>
      </Menu.Item>
      <Menu.Item onAction={() => alert('Duplicate clicked')}>
        <Menu.Item.Cell grow={false}>
          <Icon size='sm' icon='shp-clipboard' />
        </Menu.Item.Cell>
        <Menu.Item.Cell>
          <Text>Duplicate</Text>
        </Menu.Item.Cell>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item onAction={() => alert('Delete clicked')}>
        <Menu.Item.Cell grow={false}>
          <Icon size='sm' icon='shp-delete' />
        </Menu.Item.Cell>
        <Menu.Item.Cell>
          <Text>Delete</Text>
        </Menu.Item.Cell>
      </Menu.Item>
    </Menu>
  ),
};

export const Disabled: Story = {
  args: {
    placement: 'bottom start',
    disabled: true,
  },
  render: args => (
    <Menu {...args} trigger={({ props }) => <Button {...props}>Actions</Button>}>
      <Menu.Item onAction={() => alert('Edit clicked')}>
        <Menu.Item.Cell>
          <Text>Edit</Text>
        </Menu.Item.Cell>
      </Menu.Item>
    </Menu>
  ),
};

export const WithDestructiveItem: Story = {
  render: args => (
    <Menu
      {...args}
      trigger={({ props }) => (
        <Button {...props} iconLeft='shp-more'>
          Actions
        </Button>
      )}
    >
      <Menu.Item onAction={() => alert('Edit clicked')}>
        <Menu.Item.Cell grow={false}>
          <Icon size='sm' icon='shp-edit-icon' />
        </Menu.Item.Cell>
        <Menu.Item.Cell>
          <Text>Edit</Text>
        </Menu.Item.Cell>
      </Menu.Item>
      <Menu.Item onAction={() => alert('Duplicate clicked')}>
        <Menu.Item.Cell grow={false}>
          <Icon size='sm' icon='shp-clipboard' />
        </Menu.Item.Cell>
        <Menu.Item.Cell>
          <Text>Duplicate</Text>
        </Menu.Item.Cell>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item destructive onAction={() => alert('Delete clicked')}>
        <Menu.Item.Cell grow={false}>
          <Icon size='sm' icon='shp-delete' />
        </Menu.Item.Cell>
        <Menu.Item.Cell>
          <Text>Delete</Text>
        </Menu.Item.Cell>
      </Menu.Item>
    </Menu>
  ),
};

export const WithNestedSubmenu: Story = {
  render: args => (
    <Menu {...args} trigger={({ props }) => <Button {...props}>Actions</Button>}>
      <Menu.Item onAction={() => alert('Edit clicked')}>
        <Menu.Item.Cell>
          <Text>Edit</Text>
        </Menu.Item.Cell>
      </Menu.Item>
      <Menu.Submenu
        trigger={() => (
          <Menu.Item>
            <Menu.Item.Cell>
              <Text>Share…</Text>
            </Menu.Item.Cell>
            <Menu.Item.Cell grow={false}>
              <Icon size='sm' icon='shp-next' />
            </Menu.Item.Cell>
          </Menu.Item>
        )}
      >
        <Menu.Item onAction={() => alert('Share via Email')}>
          <Menu.Item.Cell>
            <Text>Email</Text>
          </Menu.Item.Cell>
        </Menu.Item>
        <Menu.Submenu
          trigger={() => (
            <Menu.Item>
              <Menu.Item.Cell>
                <Text>More options…</Text>
              </Menu.Item.Cell>
              <Menu.Item.Cell grow={false}>
                <Icon size='sm' icon='shp-next' />
              </Menu.Item.Cell>
            </Menu.Item>
          )}
        >
          <Menu.Item onAction={() => alert('Share via Link')}>
            <Menu.Item.Cell>
              <Text>Copy link</Text>
            </Menu.Item.Cell>
          </Menu.Item>
          <Menu.Item onAction={() => alert('Share via QR')}>
            <Menu.Item.Cell>
              <Text>QR code</Text>
            </Menu.Item.Cell>
          </Menu.Item>
        </Menu.Submenu>
      </Menu.Submenu>
      <Menu.Divider />
      <Menu.Item onAction={() => alert('Delete clicked')}>
        <Menu.Item.Cell>
          <Text>Delete</Text>
        </Menu.Item.Cell>
      </Menu.Item>
    </Menu>
  ),
};