import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import { Copy, Scissors, Trash, ArrowCounterClockwise } from '@phosphor-icons/react';
import {
  Tooltip,
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  MenuSeparator,
  Dialog,
  AlertDialog,
  Button,
} from '../components/ui';

const meta = {
  title: 'Overlays/Floating',
  component: Tooltip,
  parameters: {
    docs: {
      description: {
        component:
          'Floating surfaces — Tooltip, dropdown Menu, Dialog and AlertDialog. All are Radix-backed and portal-rendered.',
      },
    },
  },
  argTypes: {
    children: { control: false },
    content: { control: 'text' },
    delayDuration: { control: 'number' },
    open: { control: 'boolean' },
    defaultOpen: { control: 'boolean' },
    onOpenChange: { action: 'open changed' },
    sideOffset: { control: 'number' },
  },
  args: {
    content: 'Tooltip text',
    children: null,
    delayDuration: 0,
  },
} satisfies Meta<typeof Tooltip>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Playground: Story = {
  name: 'Tooltip Playground',
  render: (args) => (
    <Tooltip {...args}>
      <Button variant="ghost">Hover me</Button>
    </Tooltip>
  ),
};

export const TooltipStory: Story = {
  name: 'Tooltip',
  render: () => (
    <Tooltip content="Saved to iCloud">
      <Button variant="ghost">Hover me</Button>
    </Tooltip>
  ),
};

export const DropdownMenu: Story = {
  render: () => (
    <Menu>
      <MenuTrigger asChild>
        <Button>Open menu</Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItem icon={<Copy size={16} />} shortcut="⌘C">Copy</MenuItem>
        <MenuItem icon={<Scissors size={16} />} shortcut="⌘X">Cut</MenuItem>
        <MenuItem icon={<ArrowCounterClockwise size={16} />} shortcut="⌘Z">Undo</MenuItem>
        <MenuSeparator />
        <MenuItem icon={<Trash size={16} />}>Delete</MenuItem>
      </MenuContent>
    </Menu>
  ),
};

export const ModalDialog: Story = {
  render: () => (
    <Dialog
      trigger={<Button variant="primary">Open dialog</Button>}
      title="Rename project"
      description="Choose a new name for this project."
      footer={<Button variant="primary">Save</Button>}
    />
  ),
};

export const Confirm: Story = {
  render: () => (
    <AlertDialog
      trigger={<Button variant="ember">Delete…</Button>}
      title="Delete this project?"
      description="This action cannot be undone."
      actionLabel="Delete"
      destructive
      onAction={() => {}}
    />
  ),
};