import type { Meta, StoryFn } from '@storybook/react'
import * as React from 'react'
import { Typography } from '../Typography'
import {
  ConnectWalletModal,
  ConnectWalletModalContent,
  ConnectWalletModalDisclaimer,
  ConnectWalletModalHeader,
  ConnectWalletModalSelection,
  ConnectWalletModalSelectionItem,
  ConnectWalletModalTrigger,
} from './ConnectWalletModal'

const meta: Meta<typeof ConnectWalletModal> = {
  title: 'Blocks/ConnectWalletModal',
  component: ConnectWalletModal,
  decorators: [
    (Story) => (
      <div className="flex justify-center p-16">
        <Story />
      </div>
    ),
  ],
}
export default meta

// Mock wallet icons (replace with actual icons)
const MetaMaskIcon = () => (
  <div className="h-10 w-10 rounded-md bg-orange-500" />
)
const WalletConnectIcon = () => (
  <div className="h-10 w-10 rounded-md bg-blue-500" />
)
const CoinbaseIcon = () => <div className="h-10 w-10 rounded-md bg-blue-600" />
const RabbyIcon = () => <div className="h-10 w-10 rounded-md bg-purple-500" />

const Template: StoryFn<typeof ConnectWalletModal> = (args, context) => {
  const defaultOpen = context.viewMode === 'story' ? { defaultOpen: true } : {}
  const [selectedId, setSelectedId] = React.useState<string | null>(null)
  const [loadingId, setLoadingId] = React.useState<string | null>(null)

  const startLoading = (id: string) => {
    setLoadingId(id)
    setSelectedId(null)
    setTimeout(() => {
      setLoadingId(null)
      setSelectedId(id)
    }, 1500)
  }

  return (
    <ConnectWalletModal {...args} {...defaultOpen}>
      <ConnectWalletModalTrigger>Connect</ConnectWalletModalTrigger>

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

        <ConnectWalletModalSelection
          isSelected={!!selectedId}
          isLoading={!!loadingId}
        >
          <ConnectWalletModalSelectionItem
            state="detected"
            onSelect={() => startLoading('metamask')}
            isLoading={loadingId === 'metamask'}
            isSelected={selectedId === 'metamask'}
          >
            <MetaMaskIcon />
            <Typography variant="body-semi-s">MetaMask</Typography>
          </ConnectWalletModalSelectionItem>

          <ConnectWalletModalSelectionItem
            state="recent"
            onSelect={() => startLoading('rabby')}
            isLoading={loadingId === 'rabby'}
            isSelected={selectedId === 'rabby'}
          >
            <RabbyIcon />
            <Typography variant="body-semi-s">Rabby Wallet</Typography>
          </ConnectWalletModalSelectionItem>

          <ConnectWalletModalSelectionItem
            onSelect={() => startLoading('walletconnect')}
            isLoading={loadingId === 'walletconnect'}
            isSelected={selectedId === 'walletconnect'}
          >
            <WalletConnectIcon />
            <Typography variant="body-semi-s">WalletConnect</Typography>
          </ConnectWalletModalSelectionItem>

          <ConnectWalletModalSelectionItem
            onSelect={() => startLoading('coinbase')}
            isLoading={loadingId === 'coinbase'}
            isSelected={selectedId === 'coinbase'}
          >
            <CoinbaseIcon />
            <Typography variant="body-semi-s">Coinbase Wallet</Typography>
          </ConnectWalletModalSelectionItem>
        </ConnectWalletModalSelection>

        <ConnectWalletModalDisclaimer>
          By connecting your wallet, you agree to the Chainlink Foundation’s
          <a
            href="https://chain.link/terms"
            target="_blank"
            rel="noreferrer"
            className="font-medium text-link"
          >
            &nbsp;Terms of Service
          </a>
        </ConnectWalletModalDisclaimer>
      </ConnectWalletModalContent>
    </ConnectWalletModal>
  )
}
export const Default: StoryFn<typeof ConnectWalletModal> = Template.bind({})

export const DisabledItems: StoryFn<typeof ConnectWalletModal> = (
  args,
  context,
) => {
  // Force open in story mode for visual inspection
  const defaultOpen = context.viewMode === 'story' ? { defaultOpen: true } : {}
  return (
    <ConnectWalletModal {...args} {...defaultOpen}>
      <ConnectWalletModalTrigger>Connect</ConnectWalletModalTrigger>

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

        <ConnectWalletModalSelection>
          <ConnectWalletModalSelectionItem state="disabled">
            <MetaMaskIcon />
            <Typography variant="body-semi-s">MetaMask</Typography>
          </ConnectWalletModalSelectionItem>
          <ConnectWalletModalSelectionItem>
            <WalletConnectIcon />
            <Typography variant="body-semi-s">WalletConnect</Typography>
          </ConnectWalletModalSelectionItem>
        </ConnectWalletModalSelection>

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