import React, { CSSProperties, ReactNode } from "react"
import Balancer from "react-wrap-balancer"

import { cn } from "../../design-lib/utils"

type AsElement =
  | "div"
  | "h1"
  | "h2"
  | "h3"
  | "h4"
  | "h5"
  | "h6"
  | "p"
  | "small"
  | "span"
type TextAlign = "left" | "center" | "right"
type TextTransform = "capitalize" | "uppercase" | "lowercase"

interface TextProps {
  as?: AsElement
  children: ReactNode
  transform?: TextTransform
  align?: TextAlign
  color?: string
  truncate?: boolean
  clamb?: number
  className?: string
  style?: CSSProperties
  title?: string
  monospace?: boolean
  id?: string
  wrap?: boolean
  muted?: boolean
  dangerouslySetInnerHTML?: { __html: string }
  htmlFor?: string
  center?: boolean
  margin?: number
}

const Text: React.FC<TextProps> = ({
  as = "p",
  children,
  transform = "none",
  align = "left",
  color = "gray-1000",
  truncate,
  clamb,
  className,
  style,
  title,
  monospace = false,
  id,
  wrap = true,
  muted,
  dangerouslySetInnerHTML,
  htmlFor,
  center,
  margin,
}) => {
  const typographyClass = {
    h1: "text-4xl font-bold leading-tight tracking-tighter lg:text-5xl",
    h2: "text-3xl font-semibold leading-snug tracking-tighter first:mt-0",
    h3: "text-2xl font-semibold leading-relaxed tracking-tight",
    h4: "text-xl font-semibold leading-normal tracking-normal",
    h5: "text-lg font-medium leading-7 tracking-normal",
    h6: "text-base font-medium leading-6 tracking-normal",
    p: "text-base leading-8 mt-4 &:not(:first-child):mt-6",
    div: "text-base leading-7 tracking-normal",
    small: "text-sm leading-5 tracking-wider",
    span: "text-base leading-7 tracking-normal",
  }

  const rootClass = [
    `text-${color}`,
    `text-${align}`,
    monospace ? "" : "",
    transform,
    truncate ? "truncate" : "",
    clamb ? `line-clamp-${clamb}` : "",
    wrap ? "break-words" : "break-normal",
    muted ? "text-gray-11" : "",
    center ? "text-center" : "",
    margin ? `m-${margin}` : "",
    className,
  ]
    .filter(Boolean)
    .join(" ")

  return (
    <Balancer
      as={as}
      className={cn(typographyClass[as], rootClass, className)}
      style={style}
      title={title}
      id={id}
      dangerouslySetInnerHTML={dangerouslySetInnerHTML}
      {...(htmlFor ? { htmlFor } : {})}
    >
      {children}
    </Balancer>
  )
}

export default Text