import * as React from "react"
import TextareaAutosize from "react-textarea-autosize"

import { cn } from "../../design-lib/utils"
import { Icons } from "../organisms/icons"
import { Note, NoteMessage } from "./note"

export interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  autoResize?: boolean
  error?: string
  info?: string
  markdownSupported?: boolean
}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  (
    { className, autoResize, error, info, markdownSupported, ...props },
    ref
  ) => {
    return (
      <div className="relative w-full">
        {autoResize ? (
          <AutoTextarea
            className={cn(
              {
                "border-error-light ring-4 ring-error-lighter dark:ring-0 dark:focus:border-white/70 dark:focus:ring-[3px]":
                  error,
              },
              className
            )}
            ref={ref}
            {...props}
            minRows={3}
          />
        ) : (
          <textarea
            className={cn(
              "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-medium transition-[border-color,box-shadow,background-color] duration-300 placeholder:text-muted-foreground focus:border-black/40 focus:outline-none focus:ring-[3px] focus:ring-accent-secondary disabled:cursor-not-allowed disabled:opacity-disabled dark:ring-white/30 dark:focus:border-white/70",
              {
                "border-error-light ring-4 ring-error-lighter dark:ring-0 dark:focus:border-white/70 dark:focus:ring-[3px]":
                  error,
              },
              className
            )}
            ref={ref}
            {...props}
          />
        )}
        {error && (
          <Note variant="error" className="mt-1" unStyled>
            <NoteMessage>{error}</NoteMessage>
          </Note>
        )}

        {info && (
          <Note variant="info" className="mt-1" unStyled>
            <NoteMessage>{info}</NoteMessage>
          </Note>
        )}

        {markdownSupported && (
          <Note
            variant="info"
            className="mt-1 flex w-full justify-end"
            unStyled
            icon={<Icons.markdown className="!h-5 !w-5" />}
          >
            <NoteMessage>supported.</NoteMessage>
          </Note>
        )}
      </div>
    )
  }
)
Textarea.displayName = "Textarea"

export { Textarea }

export interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const AutoTextarea = React.forwardRef<
  HTMLTextAreaElement,
  TextareaProps & { minRows: number }
>(({ className, ...props }, ref) => {
  return (
    // @ts-ignore
    <TextareaAutosize
      className={cn(
        "placeholder:text-text-muted-foreground flex h-10 max-h-[500px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-medium transition-[border-color,box-shadow,background-color] duration-300 file:border-0 file:bg-transparent file:text-sm file:font-medium focus:border-black/40 focus:outline-none focus:ring-[3px] focus:ring-accent-secondary disabled:cursor-not-allowed disabled:opacity-disabled dark:ring-white/30 dark:focus:border-white/70",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
AutoTextarea.displayName = "Textarea"

export { AutoTextarea }