import type { Meta, StoryObj } from '@storybook/react'
import type * as React from 'react'
import {
  WalletNetworkSelector,
  type WalletNetworkSelectorProps,
} from './WalletNetworkSelector'

const meta: Meta<typeof WalletNetworkSelector> = {
  component: WalletNetworkSelector,
  title: 'Blocks/Wallet/WalletNetworkSelector',
  argTypes: {
    size: {
      control: { type: 'select' },
      options: ['default', 'sm'],
      table: {
        type: { summary: 'default | sm' },
        defaultValue: { summary: 'sm' },
      },
    },
    placeholder: {
      control: 'text',
    },
    onValueChange: { control: false },
    options: { control: false },
  },
  args: {
    size: 'sm',
    placeholder: 'Select network...',
  },
}

export default meta

const demoOptions: Required<WalletNetworkSelectorProps>['options'] = [
  {
    value: 'arbitrum',
    label: 'Arbitrum',
    iconUrl:
      'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/arbitrum.svg?auto=compress%2Cformat',
  },
  {
    value: 'avalanche',
    label: 'Avalanche',
    iconUrl:
      'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/avalanche.svg?auto=compress%2Cformat',
  },
  {
    value: 'base',
    label: 'Base',
    iconUrl:
      'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/base.svg?auto=compress%2Cformat',
  },
  {
    value: 'ethereum',
    label: 'Ethereum',
    iconUrl:
      'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/ethereum.svg?auto=compress%2Cformat',
  },
  {
    value: 'solana',
    label: 'Solana',
    iconUrl:
      'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/solana.svg?auto=compress%2Cformat',
  },
  {
    value: 'polygon',
    label: 'Polygon',
    iconUrl:
      'https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/polygon.svg?auto=compress%2Cformat',
  },
]

type Story = StoryObj<React.ComponentProps<typeof WalletNetworkSelector>>

export const Default: Story = {
  render: (args: WalletNetworkSelectorProps, context: any) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}
    return (
      <WalletNetworkSelector {...args} {...openProp} options={demoOptions} />
    )
  },
  args: {
    value: undefined,
  },
}

export const WithDefaultValue: Story = {
  render: (args: WalletNetworkSelectorProps, context: any) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}
    return (
      <WalletNetworkSelector
        {...args}
        {...openProp}
        value="ethereum"
        options={demoOptions}
      />
    )
  },
  args: {},
}

export const Disabled: Story = {
  render: (args: WalletNetworkSelectorProps) => {
    return <WalletNetworkSelector {...args} options={demoOptions} />
  },
  args: { defaultOpen: false, disabled: true },
}