import * as React from 'react'
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
import tw from 'twin.macro'

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

function AlertDialogPortal({
  children,
  ...props
}: AlertDialogPrimitive.AlertDialogPortalProps) {
  return (
    <AlertDialogPrimitive.Portal {...props}>
      <div
        css={[
          tw`fixed inset-0 z-50 flex items-end justify-center sm:items-center`,
        ]}
      >
        {children}
      </div>
    </AlertDialogPrimitive.Portal>
  )
}
AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>((props, ref) => (
  <AlertDialogPrimitive.Overlay
    tw="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity animate-in fade-in"
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>((props, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      css={[
        tw`
          fixed z-50
          grid
          w-full
          max-w-lg
          scale-100
          gap-4
          bg-white
          p-6
          opacity-100
          animate-in
          fade-in-90
          slide-in-from-bottom-10
          sm:rounded-lg
          sm:zoom-in-90
          sm:slide-in-from-bottom-0
          md:w-full
          dark:bg-slate-900
        `,
      ]}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

function AlertDialogHeader(props: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      css={[tw`flex flex-col space-y-2 text-center sm:text-left`]}
      {...props}
    />
  )
}
AlertDialogHeader.displayName = 'AlertDialogHeader'

function AlertDialogFooter(props: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      css={[tw`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`]}
      {...props}
    />
  )
}
AlertDialogFooter.displayName = 'AlertDialogFooter'

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>((props, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    css={[tw`text-lg font-semibold text-slate-900`, tw`dark:text-slate-50`]}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>((props, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
    css={[tw`text-sm text-slate-500`, tw`dark:text-slate-400`]}
    {...props}
  />
))
AlertDialogDescription.displayName =
  AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>((props, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    css={[
      tw`
        inline-flex
        h-10
        items-center
        justify-center
        rounded-md
        bg-slate-900
        py-2
        px-4
        text-sm
        font-semibold
        text-white
        transition-colors
        hover:bg-slate-700
        focus:outline-none
        focus:ring-2
        focus:ring-slate-400
        focus:ring-offset-2
        disabled:cursor-not-allowed
        disabled:opacity-50
        dark:bg-slate-100
        dark:text-slate-900
        dark:hover:bg-slate-200
        dark:focus:ring-slate-400
        dark:focus:ring-offset-slate-900
      `,
    ]}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>((props, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    css={[
      tw`
        mt-2
        inline-flex
        h-10
        items-center
        justify-center
        rounded-md
        border
        border-slate-200
        bg-transparent
        py-2
        px-4
        text-sm
        font-semibold
        text-slate-900
        transition-colors
        hover:bg-slate-100
        focus:outline-none
        focus:ring-2
        focus:ring-slate-400
        focus:ring-offset-2
        disabled:cursor-not-allowed
        disabled:opacity-50
        dark:border-slate-700
        dark:text-slate-100 dark:hover:bg-slate-700
        dark:focus:ring-slate-400
        dark:focus:ring-offset-slate-900 sm:mt-0
      `,
    ]}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

const _AlertDialog = AlertDialog

export {
  _AlertDialog as Root,
  AlertDialogTrigger as Trigger,
  AlertDialogContent as Content,
  AlertDialogHeader as Header,
  AlertDialogFooter as Footer,
  AlertDialogTitle as Title,
  AlertDialogDescription as Description,
  AlertDialogAction as Action,
  AlertDialogCancel as Cancel,
  AlertDialogPortal as Portal,
}
