import {
  Dialog as BaseDialog,
  DialogClose as BaseDialogClose,
  DialogContent as BaseDialogContent,
  DialogDescription as BaseDialogDescription,
  DialogFooter as BaseDialogFooter,
  DialogHeader as BaseDialogHeader,
  DialogOverlay as BaseDialogOverlay,
  DialogPortal as BaseDialogPortal,
  DialogTitle as BaseDialogTitle,
  DialogTrigger as BaseDialogTrigger,
} from '@/shadcn/dialog';
import { cn } from '@/utils';
import * as React from 'react';

// takes no extra customization
const Dialog = BaseDialog;

// takes no extra customization
const DialogPortal = BaseDialogPortal;

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof BaseDialogOverlay>,
  React.ComponentPropsWithoutRef<typeof BaseDialogOverlay>
>(({ className, ...props }, ref) => (
  <BaseDialogOverlay
    ref={ref}
    className={cn('bg-dialog-overlay', className)}
    {...props}
  />
));
DialogOverlay.displayName = 'DialogOverlay';

const DialogClose = React.forwardRef<
  React.ElementRef<typeof BaseDialogClose>,
  React.ComponentPropsWithoutRef<typeof BaseDialogClose>
>(({ className, ...props }, ref) => (
  <BaseDialogClose ref={ref} className={className} {...props} />
));
DialogClose.displayName = 'DialogClose';

const DialogTrigger = React.forwardRef<
  React.ElementRef<typeof BaseDialogTrigger>,
  React.ComponentPropsWithoutRef<typeof BaseDialogTrigger>
>(({ className, ...props }, ref) => (
  <BaseDialogTrigger ref={ref} className={className} {...props} />
));
DialogTrigger.displayName = 'DialogTrigger';

const DialogContent = React.forwardRef<
  React.ElementRef<typeof BaseDialogContent>,
  React.ComponentPropsWithoutRef<typeof BaseDialogContent>
>(({ className, ...props }, ref) => (
  <BaseDialogContent
    ref={ref}
    className={cn(
      'max-w-[480px] p-5 sm:rounded-2xl backdrop-blur-lg shadow-dialog',
      className,
    )}
    {...props}
  />
));
DialogContent.displayName = 'DialogContent';

// does not take a ref
const DialogHeader = ({
  className,
  ...props
}: React.ComponentPropsWithoutRef<typeof BaseDialogHeader>) => (
  <BaseDialogHeader className={className} {...props} />
);
DialogHeader.displayName = 'DialogHeader';

// does not take a ref
const DialogFooter = ({
  className,
  ...props
}: React.ComponentPropsWithoutRef<typeof BaseDialogFooter>) => (
  <BaseDialogFooter className={className} {...props} />
);
DialogFooter.displayName = 'DialogFooter';

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof BaseDialogTitle>,
  React.ComponentPropsWithoutRef<typeof BaseDialogTitle>
>(({ className, ...props }, ref) => (
  <BaseDialogTitle ref={ref} className={className} {...props} />
));
DialogTitle.displayName = 'DialogTitle';

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof BaseDialogDescription>,
  React.ComponentPropsWithoutRef<typeof BaseDialogDescription>
>(({ className, ...props }, ref) => (
  <BaseDialogDescription ref={ref} className={className} {...props} />
));
DialogDescription.displayName = 'DialogDescription';

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
};
