import * as React from "react";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "../lib/utils";

const Sheet = SheetPrimitive.Root;

const SheetTrigger = SheetPrimitive.Trigger;

const SheetClose = SheetPrimitive.Close;

const SheetPortal = SheetPrimitive.Portal;

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      "tw-figr-fixed tw-figr-inset-0 tw-figr-z-50 tw-figr-bg-black/80 data-[state=open]:tw-figr-animate-in data-[state=closed]:tw-figr-animate-out data-[state=closed]:tw-figr-fade-out-0 data-[state=open]:tw-figr-fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
));
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;

const sheetVariants = cva(
  "tw-figr-fixed tw-figr-z-50 tw-figr-gap-m tw-figr-bg-base-white tw-figr-p-ml tw-figr-shadow-lg tw-figr-transition tw-figr-ease-in-out data-[state=open]:tw-figr-animate-in data-[state=closed]:tw-figr-animate-out data-[state=closed]:tw-figr-duration-300 data-[state=open]:tw-figr-duration-500",
  {
    variants: {
      side: {
        top: "tw-figr-inset-x-0 tw-figr-top-0 data-[state=closed]:tw-figr-slide-out-to-top data-[state=open]:tw-figr-slide-in-from-top",
        bottom:
          "tw-figr-inset-x-0 tw-figr-bottom-0 data-[state=closed]:tw-figr-slide-out-to-bottom data-[state=open]:tw-figr-slide-in-from-bottom",
        left: "tw-figr-inset-y-0 tw-figr-left-0 tw-figr-h-full tw-figr-w-3/4 data-[state=closed]:tw-figr-slide-out-to-left data-[state=open]:tw-figr-slide-in-from-left sm:tw-figr-max-w-sm",
        right:
          "tw-figr-inset-y-0 tw-figr-right-0 tw-figr-h-full tw-figr-w-3/4  data-[state=closed]:tw-figr-slide-out-to-right data-[state=open]:tw-figr-slide-in-from-right sm:tw-figr-max-w-sm"
      }
    },
    defaultVariants: {
      side: "right"
    }
  }
);

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="focus:tw-figr-ring-ring data-[state=open]:bg-secondary tw-figr-absolute tw-figr-right-4 tw-figr-top-4 tw-figr-rounded-sm tw-figr-opacity-70 tw-figr-ring-offset-background tw-figr-transition-opacity hover:tw-figr-opacity-100 focus:tw-figr-outline-none focus:tw-figr-ring-2 focus:tw-figr-ring-offset-2 disabled:tw-figr-pointer-events-none">
        <X className="tw-figr-h-4 tw-figr-w-4 tw-figr-text-base-black" />
        <span className="tw-figr-sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
));
SheetContent.displayName = SheetPrimitive.Content.displayName;

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "tw-figr-flex tw-figr-flex-col tw-figr-space-y-2 tw-figr-text-center sm:tw-figr-text-left",
      className
    )}
    {...props}
  />
);
SheetHeader.displayName = "SheetHeader";

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "tw-figr-flex tw-figr-flex-col-reverse sm:tw-figr-flex-row sm:tw-figr-justify-end sm:tw-figr-space-x-2",
      className
    )}
    {...props}
  />
);
SheetFooter.displayName = "SheetFooter";

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn(
      "tw-figr-text-desktop-highlight-accent tw-figr-text-base-black",
      className
    )}
    {...props}
  />
));
SheetTitle.displayName = SheetPrimitive.Title.displayName;

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn(
      "tw-figr-text-desktop-caption-regular tw-figr-text-neutral-700",
      className
    )}
    {...props}
  />
));
SheetDescription.displayName = SheetPrimitive.Description.displayName;

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription
};