"use client"

import { SvgUse } from "@ivtui/base"
import { Primitive } from "@radix-ui/react-primitive"
import clsx from "clsx"
import type { ComponentProps } from "react"
import * as DropzonePrimitive from "./DropzonePrimitive"

export const Dropzone = DropzonePrimitive.Dropzone
export const DropzoneInput = DropzonePrimitive.Input

export const DropzoneZone = ({
  className,
  ...props
}: ComponentProps<typeof DropzonePrimitive.Zone>) => (
  <DropzonePrimitive.Zone
    className={clsx(
      "cursor-pointer rounded-md border-2 border-dashed border-input p-8 transition-colors hover:border-accent-foreground/50 hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[drag-reject]:cursor-no-drop data-[no-click]:cursor-default data-[disabled]:border-inherit data-[drag-active]:border-accent-foreground/50 data-[drag-reject]:border-destructive data-[disabled]:bg-inherit data-[drag-active]:bg-accent data-[drag-reject]:bg-destructive/30 data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  />
)
DropzoneZone.displayName = "DropzoneZone"

export const DropzoneUploadIcon = ({
  className,
  "aria-label": ariaLabel,
  ...props
}: ComponentProps<typeof SvgUse>) => (
  <>
    <DropzonePrimitive.DragAccepted>
      <SvgUse
        aria-label={ariaLabel ?? "circle-check-big"}
        className={clsx("size-8", className)}
        {...props}
      />
    </DropzonePrimitive.DragAccepted>
    <DropzonePrimitive.DragRejected>
      <SvgUse aria-label={ariaLabel ?? "ban"} className={clsx("size-8", className)} {...props} />
    </DropzonePrimitive.DragRejected>
    <DropzonePrimitive.DragDefault>
      <SvgUse aria-label={ariaLabel ?? "upload"} className={clsx("size-8", className)} {...props} />
    </DropzonePrimitive.DragDefault>
  </>
)
DropzoneUploadIcon.displayName = "DropzoneUploadIcon"

export const DropzoneGroup = ({ className, ...props }: ComponentProps<typeof Primitive.div>) => (
  <Primitive.div className={clsx("grid place-items-center gap-1.5", className)} {...props} />
)
DropzoneGroup.displayName = "DropzoneGroup"

export const DropzoneTitle = ({ className, ...props }: ComponentProps<typeof Primitive.h3>) => (
  <Primitive.h3 className={clsx("font-medium leading-none tracking-tight", className)} {...props} />
)
DropzoneTitle.displayName = "DropzoneTitle"

export const DropzoneDescription = ({
  className,
  ...props
}: ComponentProps<typeof Primitive.p>) => (
  <Primitive.p className={clsx("text-sm text-muted-foreground", className)} {...props} />
)
DropzoneDescription.displayName = "DropzoneDescription"

export const DropzoneTrigger = DropzonePrimitive.Trigger

export const DropzoneAccepted = DropzonePrimitive.Accepted

export const DropzoneRejected = DropzonePrimitive.Rejected