import { UserProfileWeb3WalletsSectionView } from '@clerk/mosaic/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.view';

import type { StoryMeta } from '@/lib/types';

import { primaryWallet, secondaryWallet, useWeb3WalletsFixture } from './fixtures/user-profile-web3-wallets';

export { default as __source } from './user-profile-web3-wallets-section.stories?raw';

export const meta: StoryMeta = {
  group: 'User Profile',
  status: 'stable',
  title: 'UserProfileWeb3WalletsSection',
  label: 'Web3 wallets',
  navigation: { category: 'Sections' },
  source:
    'packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.view.tsx',
};

export function Default() {
  const fixture = useWeb3WalletsFixture();
  return <UserProfileWeb3WalletsSectionView {...fixture} />;
}

export function ConnectedWallets() {
  const fixture = useWeb3WalletsFixture({ initialWallets: [primaryWallet, secondaryWallet] });
  return <UserProfileWeb3WalletsSectionView {...fixture} />;
}

export function ConnectOnly() {
  const fixture = useWeb3WalletsFixture({ initialWallets: [] });
  return <UserProfileWeb3WalletsSectionView {...fixture} />;
}

export function UnverifiedWallet() {
  const fixture = useWeb3WalletsFixture({
    initialWallets: [{ ...primaryWallet, isPrimary: false, isVerified: false }],
    availableProviders: [
      { id: 'web3_metamask_signature', provider: 'MetaMask', iconId: 'metamask', iconUrl: primaryWallet.iconUrl },
    ],
  });
  return (
    <UserProfileWeb3WalletsSectionView
      {...fixture}
      availableProviders={fixture.wallets.length === 0 ? fixture.availableProviders : []}
    />
  );
}

export function ConnectionError() {
  const fixture = useWeb3WalletsFixture({
    initialWallets: [],
    availableProviders: [
      {
        id: 'web3_metamask_signature',
        provider: 'MetaMask',
        iconId: 'metamask',
        iconUrl: primaryWallet.iconUrl,
        connectError: 'Wallet extension not found. Check your wallet and try again.',
      },
    ],
  });
  return <UserProfileWeb3WalletsSectionView {...fixture} />;
}

export function PrimaryError() {
  const fixture = useWeb3WalletsFixture({ initialWallets: [primaryWallet, secondaryWallet], primaryError: true });
  return <UserProfileWeb3WalletsSectionView {...fixture} />;
}

export function RemovalPending() {
  const fixture = useWeb3WalletsFixture({ removalState: 'pending' });
  return <UserProfileWeb3WalletsSectionView {...fixture} />;
}

export function RemovalError() {
  const fixture = useWeb3WalletsFixture({ removalState: 'error' });
  return <UserProfileWeb3WalletsSectionView {...fixture} />;
}