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

<Meta of={ConnectWalletModalStories} />

<Title>ConnectWalletModal</Title>
<Subtitle>
  Composable, visual-only modal for connecting a wallet. Built with Blocks Modal
  primitives and exported subcomponents to construct a consistent wallet
  selection experience across apps. On desktop opens a Popover, and on mobile this modal opens in a Sheet

</Subtitle>
<LifecycleTag variant="In Development" />

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

## Components

The Connect Wallet modal exposes the following sub-components:

- `ConnectWalletModal`: Root (compose with `Modal`)
- `ConnectWalletModalTrigger`: Button/element that opens the modal (supports `asChild`)
- `ConnectWalletModalContent`: Dialog content container (hugs children, themed)
- `ConnectWalletModalHeader`: Title header area
- `ConnectWalletModalSelection`: Wrapper for wallet options; accepts `isSelected`/`isLoading` to control sibling dimming
- `ConnectWalletModalSelectionItem`: Row/button styled for a wallet option; accepts `state`, `isSelected`, `isLoading`, `onSelect`
- `ConnectWalletModalDisclaimer`: Footer disclaimer region

## Import

```tsx
import {
  ConnectWalletModal,
  ConnectWalletModalTrigger,
  ConnectWalletModalContent,
  ConnectWalletModalHeader,
  ConnectWalletModalSelection,
  ConnectWalletModalSelectionItem,
  ConnectWalletModalDisclaimer,
} from '@chainlink/blocks'
```

## Usage

```tsx
import * as React from 'react'
import { Button, Typography } from '@chainlink/blocks'
import {
  ConnectWalletModal,
  ConnectWalletModalTrigger,
  ConnectWalletModalContent,
  ConnectWalletModalHeader,
  ConnectWalletModalSelection,
  ConnectWalletModalSelectionItem,
  ConnectWalletModalDisclaimer,
} from '@chainlink/blocks'

export function WalletModalExample() {
  return (
    <ConnectWalletModal>
      <ConnectWalletModalTrigger asChild>
        <Button variant="primary">Connect Wallet</Button>
      </ConnectWalletModalTrigger>

      <ConnectWalletModalContent>
        <ConnectWalletModalHeader>Connect your wallet</ConnectWalletModalHeader>

        <ConnectWalletModalSelection>
          <ConnectWalletModalSelectionItem>
            <Typography variant="body-semi-s">MetaMask</Typography>
          </ConnectWalletModalSelectionItem>

          <ConnectWalletModalSelectionItem>
            <Typography variant="body-semi-s">WalletConnect</Typography>
          </ConnectWalletModalSelectionItem>
        </ConnectWalletModalSelection>

        <ConnectWalletModalDisclaimer>
          By connecting, you agree to our Terms of Service
        </ConnectWalletModalDisclaimer>
      </ConnectWalletModalContent>
    </ConnectWalletModal>
  )
}
```

## Examples

### DisabledItems

<Canvas of={ConnectWalletModalStories.DisabledItems} sourceState="shown" />