import type { Meta, StoryObj } from '@storybook/react'
import { Typography } from '../Typography'
import { Copy, CopyButton, CopyIcon } from './Copy'

export default {
  title: 'Blocks/Copy/Copy',
  component: Copy,
  argTypes: {
    text: {
      control: 'text',
      description: 'The text to copy to the clipboard.',
    },
    children: {
      control: 'text',
      description: 'The content displayed next to the copy button.',
    },
    variant: {
      control: { type: 'select' },
      options: ['button', 'icon'],
      description: 'The visual variant of the copy button.',
      table: {
        type: { summary: 'button | icon' },
        defaultValue: { summary: 'button' },
      },
    },
  },
} satisfies Meta<typeof Copy>

type Story = StoryObj<typeof Copy>

export const Default: Story = {
  args: {
    text: 'This is the text to be copied',
    children: 'This is the text that is displayed',
  },
  render: (args) => <Copy text={args.text}>{args.children}</Copy>,
}

export const IconVariant: Story = {
  args: {
    text: '0x123456789abcdef0123456789abcdef01234567',
    variant: 'icon',
  },
  render: (args) => (
    <Copy text={args.text} variant={args.variant}>
      <Typography variant="code">0x123...abc</Typography>
    </Copy>
  ),
}

export const CopyAddressExample: Story = {
  render: (args) => <Copy {...args} />,
  args: {
    text: '0x123456789abcdef0123456789abcdef01234567',
    children: <Typography variant="code">0x123...abc</Typography>,
  },
}

export const CopyCodeSnippetExample: Story = {
  render: (args) => (
    <div className="rounded-md border bg-background-alt p-4">
      <Copy {...args} />
    </div>
  ),
  args: {
    text: `import { Copy } from '@chainlink/blocks'

function MyComponent() {
  return <Copy text="Hello World">Hello World</Copy>
}`,
    children: (
      <pre>
        <Typography variant="code" className="text-sm">
          {`import { Copy } from '@chainlink/blocks'

function MyComponent() {
  return <Copy text="Hello World">Hello World</Copy>
}`}
        </Typography>
      </pre>
    ),
  },
}

export const StandaloneCopyButton: Story = {
  name: 'Standalone CopyButton',
  render: (_args) => (
    <div className="flex items-center gap-4">
      <Typography variant="body-s">Click to copy:</Typography>
      <CopyButton text="Standalone button text" />
    </div>
  ),
}

export const StandaloneCopyIcon: Story = {
  name: 'Standalone CopyIcon',
  render: (_args) => (
    <div className="flex items-center gap-4">
      <Typography variant="body-s">Click to copy:</Typography>
      <CopyIcon text="Standalone icon text" />
    </div>
  ),
}