import {
  Block,
  BlockProps,
  HeadingMedium,
  LabelLarge,
  Mats,
  mergeOverrides,
  Skeleton,
  useStyletron,
} from "@mezo-org/mezo-clay"
import React from "react"
import DefaultAvatar from "../../../assets/DefaultAvatar"
import { useGetCurrentAccount } from "../../../hooks"
import { formatNumberToCompactString } from "../../../utils/numbers"
import AccountError from "./AccountError"
import { usePassportContext } from "../../../hooks/usePassportContext"
import SlotNumber from "../SlotNumber"

const DOT_DELIMITER_REGEX = /(?=\.)/

function WelcomeBlockSkeleton() {
  const [, theme] = useStyletron()

  return (
    <Block
      display="flex"
      alignItems="center"
      padding={theme.sizing.scale600}
      paddingTop={theme.sizing.scale900}
      paddingBottom={theme.sizing.scale800}
      overrides={{
        Block: {
          style: {
            gap: theme.sizing.scale600,
          },
        },
      }}
    >
      <Skeleton
        animation
        width={theme.sizing.scale1200}
        height={theme.sizing.scale1200}
        overrides={{
          Root: {
            style: {
              borderRadius: "100%",
            },
          },
        }}
      />

      <Block
        display="flex"
        flexDirection="column"
        flex={1}
        overrides={{
          Block: {
            style: {
              gap: theme.sizing.scale100,
            },
          },
        }}
      >
        <Skeleton animation width="60%" height={theme.sizing.scale900} />
        <Skeleton animation width="40%" height={theme.sizing.scale800} />
      </Block>
    </Block>
  )
}

type WelcomeBlockProps = BlockProps

export default function WelcomeBlock(props: WelcomeBlockProps) {
  const { overrides, ...restProps } = props
  const { accountDataRefetchInterval } = usePassportContext()

  const { data, isError, isPending } = useGetCurrentAccount({
    staleTime: accountDataRefetchInterval,
    refetchInterval: accountDataRefetchInterval,
  })
  const [, theme] = useStyletron()

  if (isError) {
    return (
      <AccountError
        padding={theme.sizing.scale600}
        paddingTop={theme.sizing.scale900}
        paddingBottom={theme.sizing.scale800}
        marginBottom={theme.sizing.scale300}
        topic="account information"
      />
    )
  }

  if (isPending) {
    return <WelcomeBlockSkeleton />
  }

  const [mezoId, mezoIdSuffix] = (data.mezoId ?? "").split(DOT_DELIMITER_REGEX)

  return (
    <Block
      display="flex"
      alignItems="center"
      paddingLeft={theme.sizing.scale600}
      paddingRight={theme.sizing.scale600}
      paddingTop={theme.sizing.scale900}
      paddingBottom={theme.sizing.scale800}
      overrides={mergeOverrides(overrides, {
        Block: {
          style: {
            gap: theme.sizing.scale600,
          },
        },
      })}
      {...restProps}
    >
      <Block
        as={DefaultAvatar}
        width={theme.sizing.scale1200}
        height={theme.sizing.scale1200}
        overrides={{
          Block: {
            style: {
              borderRadius: "100%",
            },
          },
        }}
      />

      <Block display="flex" flexDirection="column">
        {mezoId && mezoIdSuffix && (
          <HeadingMedium as="span">
            <Block as="span">{mezoId}</Block>
            <Block as="span" color={theme.colors.contentSecondary}>
              {mezoIdSuffix}
            </Block>
          </HeadingMedium>
        )}

        <Block
          display="flex"
          alignItems="center"
          overrides={{
            Block: {
              style: {
                gap: theme.sizing.scale100,
              },
            },
          }}
        >
          <Mats
            size={theme.sizing.scale600}
            overrides={{
              Svg: {
                style: {
                  margin: theme.sizing.scale100, // To reduce gap
                },
              },
            }}
          />

          <LabelLarge color={theme.colors.contentPrimary}>
            <SlotNumber formatFunction={formatNumberToCompactString}>
              {data.totalMats}
            </SlotNumber>{" "}
            mats
          </LabelLarge>
        </Block>
      </Block>
    </Block>
  )
}