import {
  Block,
  Button,
  LabelLarge,
  MezoCircle,
  MonoLabelXSmall,
  ParagraphSmall,
  useStyletron,
} from "@mezo-org/mezo-clay"
import React, { useState } from "react"
import { useCopyToClipboard } from "usehooks-ts"
import { QRCodeSVG } from "qrcode.react"
import NestedViewLayout from "../NestedViewLayout"
import { getAddressExplorerUrl } from "../../../utils/address"
import { usePassportContext } from "../../../hooks/usePassportContext"
import { useWalletAccount } from "../../../hooks/useWalletAccount"

function Receive() {
  const { environment } = usePassportContext()

  const walletAccount = useWalletAccount()

  const [, theme] = useStyletron()

  const [, copy] = useCopyToClipboard()

  const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false)

  const handleCopyAddress = () => {
    copy(walletAccount.accountAddress!)
    setIsCopiedMessageVisible(true)

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

  const blockExplorerUrl = getAddressExplorerUrl(
    walletAccount.accountAddress!,
    "mezo",
    environment === "testnet",
  )

  return (
    <NestedViewLayout>
      <LabelLarge>Your Mezo Address</LabelLarge>

      <ParagraphSmall
        marginTop={0}
        marginBottom={theme.sizing.scale800}
        color={theme.colors.contentTertiary}
      >
        {walletAccount.networkFamily === "bitcoin" ? (
          <>
            Mezo automatically created a smart account that&apos;s fully
            controlled by your connected Bitcoin wallet. Use this address to
            receive assets on Mezo.
          </>
        ) : (
          <>
            Your connected wallet address is your Mezo address. Use this address
            to receive assets on Mezo.
          </>
        )}
      </ParagraphSmall>

      <Block
        as={QRCodeSVG}
        value={walletAccount.accountAddress!}
        flex={1}
        overrides={{
          Block: {
            style: {
              aspectRatio: 1,
              width: "fit-content",
              margin: "0 auto",
            },
          },
        }}
      />

      <Block
        display="flex"
        alignItems="center"
        backgroundColor={theme.colors.backgroundSecondary}
        marginTop={theme.sizing.scale800}
        marginBottom={theme.sizing.scale600}
        padding={theme.sizing.scale300}
        overrides={{
          Block: {
            style: {
              gap: theme.sizing.scale300,
              borderRadius: theme.borders.radius400,
            },
          },
        }}
      >
        <MezoCircle
          size={theme.sizing.scale700}
          color={theme.colors.accent}
          symbolColor={theme.colors.white}
          overrides={{
            Svg: {
              style: {
                backgroundColor: theme.colors.accent,
                overflow: "hidden",
                borderRadius: theme.borders.radius200,
                flexShrink: 0,
              },
            },
          }}
        />

        <MonoLabelXSmall>{walletAccount.accountAddress}</MonoLabelXSmall>
      </Block>

      <Button
        onClick={handleCopyAddress}
        size="medium"
        overrides={{
          BaseButton: {
            style: {
              marginBottom: theme.sizing.scale500,
            },
          },
        }}
      >
        {isCopiedMessageVisible ? "Copied!" : "Copy Mezo address"}
      </Button>

      <Button
        kind="secondary"
        size="medium"
        $as="a"
        href={blockExplorerUrl}
        target="_blank"
      >
        View Mezo explorer
      </Button>
    </NestedViewLayout>
  )
}

export default Receive