import {
  ArrowNarrowLeft,
  Block,
  BlockProps,
  Button,
  ButtonProps,
  mergeOverrides,
  useStyletron,
} from "@mezo-org/mezo-clay"
import React from "react"
import { usePassportContext } from "../../../hooks/usePassportContext"
import { getAddressExplorerUrl } from "../../../utils/address"
import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"
import { useWalletAccount } from "../../../hooks/useWalletAccount"

const buttonStartEnhancerSize = 12

const commonButtonProps: Partial<ButtonProps> = {
  kind: "secondary",
  size: "small",
  shape: "pill",
  overrides: {
    BaseButton: {
      style: {
        flex: 1,
      },
    },
    StartEnhancer: {
      style: {
        stroke: "currentColor",
      },
    },
  },
}

export default function AccountAddressActions(props: BlockProps) {
  const { overrides, ...restProps } = props

  const [, theme] = useStyletron()
  const { environment } = usePassportContext()
  const setDropdownView = useDropdownStore((state) => state.setView)
  const handleReceiveClick = () => setDropdownView(DropdownView.RECEIVE)

  const walletAccount = useWalletAccount()

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

  return (
    <Block
      display="flex"
      alignItems="center"
      backgroundColor="transparent"
      padding={`0 ${theme.sizing.scale600} ${theme.sizing.scale800}`}
      overrides={mergeOverrides(
        {
          Block: {
            style: {
              gap: theme.sizing.scale600,
            },
          },
        },
        overrides,
      )}
      {...restProps}
    >
      <Button
        onClick={handleReceiveClick}
        startEnhancer={
          <ArrowNarrowLeft
            size={buttonStartEnhancerSize}
            overrides={{
              Svg: {
                style: {
                  transform: "rotate(-45deg)",
                },
              },
            }}
          />
        }
        {...commonButtonProps}
      >
        Receive
      </Button>

      <Button
        $as="a"
        href={blockExplorerUrl}
        target="_blank"
        {...commonButtonProps}
      >
        Block Explorer
      </Button>
    </Block>
  )
}