import type { GetServerSideProps } from 'next'
import WalletPage from '@/components/wallet/WalletPage'
import type {
  CapabilitiesCatalog,
  FetchMetadata,
  NetworksCatalog,
  TokenListCatalog,
} from '@/components/wallet/AddToMetaMask'
import { fetchPublicJsonWithMeta } from '@/utils/publicExplorer'

interface WalletRoutePageProps {
  initialNetworks: NetworksCatalog | null
  initialTokenList: TokenListCatalog | null
  initialCapabilities: CapabilitiesCatalog | null
  initialNetworksMeta: FetchMetadata | null
  initialTokenListMeta: FetchMetadata | null
  initialCapabilitiesMeta: FetchMetadata | null
}

export default function WalletRoutePage(props: WalletRoutePageProps) {
  return <WalletPage {...props} />
}

export const getServerSideProps: GetServerSideProps<WalletRoutePageProps> = async () => {
  const [networksResult, tokenListResult, capabilitiesResult] = await Promise.all([
    fetchPublicJsonWithMeta<NetworksCatalog>('/api/config/networks').catch(() => null),
    fetchPublicJsonWithMeta<TokenListCatalog>('/api/v1/report/token-list?chainId=138').catch(() => null),
    fetchPublicJsonWithMeta<CapabilitiesCatalog>('/api/config/capabilities').catch(() => null),
  ])

  return {
    props: {
      initialNetworks: networksResult?.data || null,
      initialTokenList: tokenListResult?.data || null,
      initialCapabilities: capabilitiesResult?.data || null,
      initialNetworksMeta: networksResult?.meta || null,
      initialTokenListMeta: tokenListResult?.meta || null,
      initialCapabilitiesMeta: capabilitiesResult?.meta || null,
    },
  }
}
