import {
  Canvas,
  Controls,
  Meta,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as CopyPrimitiveStories from './CopyPrimitive.stories'
import { LifecycleTag } from '../../docs/components'

<Meta of={CopyPrimitiveStories} />

<Title>CopyPrimitive</Title>
<Subtitle>
  Low-level primitives for building custom copy-to-clipboard components with
  full control over styling and behavior.
</Subtitle>
<LifecycleTag variant="In Development" />

<Canvas of={CopyPrimitiveStories.Default} sourceState="shown" />
<Controls />

## Components

The CopyPrimitive family consists of the following sub-components:

- `CopyRoot`: Root component that provides copy context and flex layout styling.
- `CopyTrigger`: Clickable button that triggers copy and displays status icon with tooltip.
- `useCopy`: Hook to get copy functionality (works standalone or with context).
- `useCopyContext`: Hook to access copy state from within a CopyRoot.

## Import

```tsx
import { CopyRoot, CopyTrigger, useCopy } from '@chainlink/blocks'
```

## Usage

### With CopyRoot (Context-based)

```tsx
export function MyCopyComponent() {
  return (
    <CopyRoot text="0x123456789abcdef">
      0x1234...abcd
      <CopyTrigger />
    </CopyRoot>
  )
}
```

### Standalone CopyTrigger

`CopyTrigger` can be used without `CopyRoot` by providing the `text` prop directly:

```tsx
export function StandaloneCopy() {
  return <CopyTrigger text="Text to copy" />
}
```

## useCopy Hook

The `useCopy` hook provides copy functionality that works both standalone and within a `CopyRoot`:

```tsx
import { useCopy } from '@chainlink/blocks'

// Standalone usage
function MyCustomCopyButton() {
  const { isCopied, copy } = useCopy('Hello World')

  return <button onClick={copy}>{isCopied ? 'Copied!' : 'Copy'}</button>
}

// Within CopyRoot (context-based)
function MyCustomCopyButton() {
  const { isCopied, copy, text } = useCopy()

  return (
    <button onClick={copy}>{isCopied ? 'Copied!' : `Copy "${text}"`}</button>
  )
}
```

## Examples

### With Truncated Address

Display a truncated address while copying the full value.

<Canvas of={CopyPrimitiveStories.WithTruncatedAddress} sourceState="shown" />

### Custom Icons

Replace the default icons with your own.

<Canvas of={CopyPrimitiveStories.CustomIcons} sourceState="shown" />

### Standalone CopyTrigger

Use `CopyTrigger` without a `CopyRoot` wrapper by providing the `text` prop.

<Canvas of={CopyPrimitiveStories.StandaloneTrigger} sourceState="shown" />