import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const noteVariants = cva(
  "relative flex items-center space-x-2 overflow-hidden rounded-md border px-4 py-3",
  {
    variants: {
      variant: {
        error: "border-error-light text-error",
        info: "border-secondary text-gray-11 [&>svg]:text-muted-foreground",
        success: "border-success-light text-success",
        warning: "border-warning-light text-warning",
      },
    },
    defaultVariants: {
      variant: "info",
    },
  }
)

const Note = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> &
    VariantProps<typeof noteVariants> & {
      fill?: boolean
      unStyled?: boolean
      icon?: React.ReactNode
    }
>(
  (
    { className, variant = "info", fill, title, unStyled, icon, ...props },
    ref
  ) => (
    <div
      ref={ref}
      role="alert"
      className={cn(
        noteVariants({ variant }),
        `
    ${
      fill
        ? `
      ${
        variant === "error"
          ? "bg-error-lighter"
          : variant === "info"
          ? "bg-secondary"
          : variant === "success"
          ? "bg-success-lighter"
          : variant === "warning"
          ? "bg-warning-lighter"
          : "bg-background"
      }
    `
        : "bg-background"
    }
    `,
        className,
        { "border-none bg-transparent !px-0": unStyled }
      )}
      {...props}
    >
      <div className="min-w-10 flex h-full items-center justify-center [&>svg]:h-4 [&>svg]:w-4">
        {title ? (
          <p className={cn("text-sm font-semibold")}>{title}</p>
        ) : icon ? (
          icon
        ) : variant === "error" ? (
          <Icons.error />
        ) : variant === "info" ? (
          <Icons.info />
        ) : variant === "success" ? (
          <Icons.success />
        ) : variant === "warning" ? (
          <Icons.warning />
        ) : (
          <Icons.info className={cn("h-4 w-4")} />
        )}
      </div>

      {props.children}
    </div>
  )
)
Note.displayName = "Alert"

const NoteAction = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "flex flex-1 items-center justify-end whitespace-nowrap pl-4",
      className
    )}
    {...props}
  />
))
NoteAction.displayName = "NoteAction"

const NoteMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props}
  />
))
NoteMessage.displayName = "AlertMessage"

export { Note, NoteAction, NoteMessage }