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

import { Icon } from '../Icon/Icon';
import { Loader } from '../Loader/Loader';
import { Menu } from '../Menu/Menu';
import { Text } from '../Typography/Text/Text';

import { ContextMenu } from './ContextMenu';

const meta: Meta<typeof ContextMenu> = {
  title: 'UI kit/ContextMenu',
  component: ContextMenu,
  tags: ['autodocs'],
  args: {
    variant: 'secondary',
    ghost: true,
    icon: 'shp-more',
  },
};

export default meta;

type Story = StoryObj<typeof ContextMenu>;

export const Default: Story = {
  args: {
    placement: 'bottom start',
  },
  render: args => (
    <ContextMenu {...args}>
      <ContextMenu.Item onAction={() => alert('Edit clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Edit</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
      <ContextMenu.Item onAction={() => alert('Duplicate clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Duplicate</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
      <ContextMenu.Item onAction={() => alert('Delete clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Delete</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
    </ContextMenu>
  ),
};

export const DefaultOpen: Story = {
  args: {
    placement: 'bottom start',
    defaultOpen: true,
  },
  render: args => (
    <ContextMenu {...args}>
      <ContextMenu.Item onAction={() => alert('Edit clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Edit</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
      <ContextMenu.Item onAction={() => alert('Duplicate clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Duplicate</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
      <ContextMenu.Item onAction={() => alert('Delete clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Delete</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
    </ContextMenu>
  ),
};

export const Disabled: Story = {
  args: {
    placement: 'bottom start',
    disabled: true,
  },
  render: args => (
    <ContextMenu {...args}>
      <ContextMenu.Item onAction={() => alert('Edit clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Edit</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
      <ContextMenu.Item onAction={() => alert('Duplicate clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Duplicate</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
      <ContextMenu.Item onAction={() => alert('Delete clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Delete</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
    </ContextMenu>
  ),
};

export const WithDisabledItem: Story = {
  render: args => (
    <ContextMenu {...args}>
      <ContextMenu.Item onAction={() => alert('Edit clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Edit</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
      <ContextMenu.Item disabled>
        <ContextMenu.Item.Cell>
          <Text>Duplicate</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
      <ContextMenu.Item onAction={() => alert('Delete clicked')}>
        <ContextMenu.Item.Cell>
          <Text>Delete</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
    </ContextMenu>
  ),
};

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

export const Loading: Story = {
  args: {
    isLoading: true,
  },
  render: args => (
    <ContextMenu {...args}>
      <ContextMenu.Item onAction={() => alert('Edit clicked')}>
        <ContextMenu.Item.Cell grow={false}>
          <Icon size='sm' icon='shp-edit-icon' />
        </ContextMenu.Item.Cell>
        <ContextMenu.Item.Cell>
          <Text>Edit</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
      <ContextMenu.Item onAction={() => alert('Duplicate clicked')}>
        <ContextMenu.Item.Cell grow={false}>
          <Loader size='sm' />
        </ContextMenu.Item.Cell>
        <ContextMenu.Item.Cell>
          <Text>Duplicate</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
      <ContextMenu.Item onAction={() => alert('Delete clicked')}>
        <ContextMenu.Item.Cell grow={false}>
          <Icon size='sm' icon='shp-delete' />
        </ContextMenu.Item.Cell>
        <ContextMenu.Item.Cell>
          <Text>Delete</Text>
        </ContextMenu.Item.Cell>
      </ContextMenu.Item>
    </ContextMenu>
  ),
};

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