import {
  mergeOverrides,
  Block,
  useStyletron,
  BlockProps,
  Skeleton,
  LabelMedium,
  ParagraphSmall,
} from "@mezo-org/mezo-clay"
import React, { ReactNode } from "react"
import SlotNumber from "./SlotNumber"
import { formatUsd } from "../../utils/currency"

type ListingItemLayoutProps = Omit<BlockProps, "children"> & {
  icon: ReactNode
  label: ReactNode
  value: ReactNode
  subLabel: ReactNode
  subValue: ReactNode
}

function ListingItemLayout(props: ListingItemLayoutProps) {
  const { icon, label, value, subLabel, subValue, overrides, ...restProps } =
    props
  const [, theme] = useStyletron()

  return (
    <Block
      display="flex"
      alignItems="center"
      paddingLeft={theme.sizing.scale600}
      paddingRight={theme.sizing.scale600}
      overrides={mergeOverrides(
        {
          Block: {
            style: {
              gap: theme.sizing.scale600,
              minHeight: "72px",
            },
          },
        },
        overrides,
      )}
      {...restProps}
    >
      {icon && icon}

      <Block display="flex" flexDirection="column" alignItems="flex-start">
        {label && label}
        {subLabel && subLabel}
      </Block>

      <Block
        display="flex"
        flexDirection="column"
        alignItems="flex-end"
        marginLeft="auto"
      >
        {value && value}
        {subValue && subValue}
      </Block>
    </Block>
  )
}

type ListingItemProps = {
  icon?: ReactNode
  label?: string
  subLabel?: string
  value?: number | string
  valueFormatter?: (value: number | string) => string
  subValue?: number | string
  subValueFormatter?: (value: number | string) => string
  overrides?: BlockProps["overrides"]
  isLoading?: boolean
}

const defaultValueFormatter = (value: number | string): string => {
  if (typeof value === "string") return value
  return formatUsd(value)
}

export default function ListingItem(props: ListingItemProps) {
  const {
    icon,
    label,
    subLabel,
    value,
    valueFormatter = defaultValueFormatter,
    subValue,
    subValueFormatter = defaultValueFormatter,
    overrides,
    isLoading = false,
  } = props

  const [, theme] = useStyletron()

  if (isLoading) {
    return (
      <ListingItemLayout
        icon={
          <Skeleton
            animation
            width={theme.sizing.scale800}
            height={theme.sizing.scale800}
          />
        }
        label={
          <Skeleton
            animation
            width={theme.sizing.scale2400}
            height={theme.sizing.scale600}
            overrides={{
              Root: {
                style: { marginBottom: theme.sizing.scale100 },
              },
            }}
          />
        }
        subLabel={
          <Skeleton
            animation
            width={theme.sizing.scale1600}
            height={theme.sizing.scale550}
          />
        }
        value={
          <Skeleton
            animation
            width={theme.sizing.scale2400}
            height={theme.sizing.scale600}
            overrides={{
              Root: {
                style: { marginBottom: theme.sizing.scale100 },
              },
            }}
          />
        }
        subValue={
          <Skeleton
            animation
            width={theme.sizing.scale1600}
            height={theme.sizing.scale550}
          />
        }
        overrides={overrides}
      />
    )
  }

  return (
    <ListingItemLayout
      icon={icon}
      label={<LabelMedium>{label}</LabelMedium>}
      subLabel={
        <ParagraphSmall
          margin={0}
          as="div"
          color={theme.colors.contentSecondary}
        >
          {subLabel}
        </ParagraphSmall>
      }
      value={
        value !== undefined && (
          <LabelMedium>
            {typeof value === "number" ? (
              <SlotNumber formatFunction={valueFormatter}>{value}</SlotNumber>
            ) : (
              valueFormatter(value)
            )}
          </LabelMedium>
        )
      }
      subValue={
        subValue !== undefined && (
          <ParagraphSmall
            margin={0}
            as="div"
            color={theme.colors.contentSecondary}
          >
            {typeof subValue === "number" ? (
              <SlotNumber formatFunction={subValueFormatter}>
                {subValue}
              </SlotNumber>
            ) : (
              subValueFormatter(subValue)
            )}
          </ParagraphSmall>
        )
      }
      overrides={overrides}
    />
  )
}