import {
  BitcoinCircle,
  Block,
  BlockProps,
  EthCircle,
  LabelMedium,
  LabelXSmall,
  mergeOverrides,
  MonoLabelXSmall,
  useStyletron,
} from "@mezo-org/mezo-clay"
import React, { useState } from "react"
import { useCopyToClipboard } from "usehooks-ts"
import { usePassportContext } from "../../../hooks/usePassportContext"
import { getAddressExplorerUrl, trimAddress } from "../../../utils/address"
import { useWalletAccount } from "../../../hooks/useWalletAccount"

export default function WalletAddress(props: BlockProps) {
  const { overrides, ...restProps } = props
  const { walletAddress, networkFamily } = useWalletAccount()
  const { environment = "mainnet" } = usePassportContext()
  const [, theme] = useStyletron()
  const [, copy] = useCopyToClipboard()
  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)

  const handleCopyAddress = () => {
    copy(walletAddress!)
    setIsCopiedMessageVisible(true)

    setTimeout(() => {
      setIsCopiedMessageVisible(false)
    }, 2000)
  }

  const blockExplorerUrl = getAddressExplorerUrl(
    walletAddress!,
    networkFamily,
    environment === "testnet",
  )
  const trimmedAddress = trimAddress(walletAddress!)
  const AccountIcon = networkFamily === "bitcoin" ? BitcoinCircle : EthCircle

  return (
    <Block
      as="button"
      onClick={handleCopyAddress}
      display="flex"
      alignItems="center"
      backgroundColor="transparent"
      padding={`${theme.sizing.scale800} ${theme.sizing.scale700}`}
      overrides={mergeOverrides(
        {
          Block: {
            style: {
              gap: theme.sizing.scale700,
              borderWidth: 0,
              cursor: "pointer",
              ":hover": {
                backgroundColor: theme.colors.backgroundTertiary,
              },
            },
          },
        },
        overrides,
      )}
      {...restProps}
    >
      <AccountIcon
        color={theme.colors.black}
        size={theme.sizing.scale800}
        overrides={{
          Svg: {
            style: {
              backgroundColor: theme.colors.black,
              overflow: "hidden",
              borderRadius: theme.borders.radius200,
            },
          },
        }}
      />
      <Block
        display="flex"
        flexDirection="column"
        alignItems="flex-start"
        overrides={{
          Block: {
            style: {
              gap: theme.sizing.scale100,
            },
          },
        }}
      >
        <LabelMedium>Connected Wallet</LabelMedium>

        {isCopiedMessageVisible ? (
          <LabelXSmall color={theme.colors.contentSecondary}>
            Copied address to clipboard
          </LabelXSmall>
        ) : (
          <Block
            as="a"
            color={theme.colors.contentSecondary}
            href={blockExplorerUrl}
            target="_blank"
            overrides={{
              Block: {
                style: {
                  color: "inherit",
                  textDecoration: "none",
                  ":hover": {
                    textDecoration: "underline",
                  },
                },
              },
            }}
          >
            <MonoLabelXSmall>{trimmedAddress}</MonoLabelXSmall>
          </Block>
        )}
      </Block>
    </Block>
  )
}