Notification

import {
  CheckCircleIcon,
  ExclamationTriangleIcon,
  InformationCircleIcon,
  XCircleIcon,
} from '@heroicons/react/24/outline'
import { XMarkIcon } from '@heroicons/react/20/solid'
import clsx from 'clsx'
import type React from 'react'
import { Link } from './link'

const typeIcons = {
  success: <CheckCircleIcon aria-hidden="true" className="size-6 text-green-500" />,
  info: <InformationCircleIcon aria-hidden="true" className="size-6 text-blue-500" />,
  warning: <ExclamationTriangleIcon aria-hidden="true" className="size-6 text-amber-500" />,
  error: <XCircleIcon aria-hidden="true" className="size-6 text-red-500" />,
}

const actionStyles = {
  accent:
    'cursor-pointer text-sm/6 font-medium text-accent-600 hover:text-accent-700 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-accent-500 dark:text-accent-400 dark:hover:text-accent-300',
  plain:
    'cursor-pointer text-sm/6 font-medium text-zinc-700 hover:text-zinc-950 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-accent-500 dark:text-zinc-300 dark:hover:text-white',
}

export type SplitAction = {
  label: React.ReactNode
  onClick?: () => void
  href?: string
  plain?: boolean
}

export type NotificationProps = {
  type?: keyof typeof typeIcons
  icon?: React.ReactNode
  media?: React.ReactNode
  title: React.ReactNode
  description?: React.ReactNode
  action?: React.ReactNode
  actions?: React.ReactNode
  splitActions?: SplitAction[]
  onClose?: () => void
}

export function Notification({ className, ...props }: NotificationProps & { className?: string }) {
  return (
    <div
      className={clsx(
        className,
        'pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-zinc-950/10 dark:bg-zinc-800 dark:ring-white/10 dark:ring-inset'
      )}
    >
      <NotificationContent {...props} />
    </div>
  )
}

export function NotificationContent({
  type,
  icon,
  media,
  title,
  description,
  action,
  actions,
  splitActions,
  onClose,
}: NotificationProps) {
  let leading = media ?? icon ?? (type && typeIcons[type])

  return (
    <div className={clsx(splitActions && 'flex')}>
      <div className={clsx('p-4', splitActions && 'w-0 flex-1')}>
        <div className="flex items-start">
          {leading && <div className="shrink-0">{leading}</div>}
          <div className={clsx('w-0 flex-1', leading && 'ml-3')}>
            <p className="text-sm/6 text-zinc-950 dark:text-white font-medium">{title}</p>
            {description && <p className="mt-1 text-sm/6 text-zinc-500 dark:text-zinc-400">{description}</p>}
            {actions && <div className="mt-3 flex items-center gap-4">{actions}</div>}
          </div>
          {action && <div className="ml-3 flex shrink-0">{action}</div>}
          {onClose && (
            <div className="ml-4 flex shrink-0">
              <button
                type="button"
                onClick={onClose}
                className="inline-flex size-6 cursor-pointer items-center justify-center rounded-md text-zinc-400 hover:text-zinc-500 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-500 dark:hover:text-white"
              >
                <span className="sr-only">Close</span>
                <XMarkIcon aria-hidden="true" className="size-5" />
              </button>
            </div>
          )}
        </div>
      </div>
      {splitActions && (
        <div className="flex flex-col divide-y divide-zinc-950/10 border-l border-zinc-950/10 dark:divide-white/10 dark:border-white/10">
          {splitActions.map(({ label, plain, href, onClick }, index) => {
            let className = clsx(
              'flex flex-1 items-center justify-center px-4 py-3 whitespace-nowrap focus-visible:-outline-offset-2',
              plain ? actionStyles.plain : actionStyles.accent
            )
            return href ? (
              <Link key={index} href={href} className={className} onClick={onClick}>
                {label}
              </Link>
            ) : (
              <button key={index} type="button" className={className} onClick={onClick}>
                {label}
              </button>
            )
          })}
        </div>
      )}
    </div>
  )
}

export function NotificationAction({
  plain = false,
  className,
  href,
  ...props
}: { plain?: boolean; href?: string } & Omit<React.ComponentPropsWithoutRef<'button'>, 'type'>) {
  let classes = clsx(className, 'rounded-sm focus-visible:outline-offset-2', plain ? actionStyles.plain : actionStyles.accent)

  return href ? (
    <Link {...(props as Omit<React.ComponentPropsWithoutRef<typeof Link>, 'href'>)} href={href} className={classes} />
  ) : (
    <button type="button" className={classes} {...props} />
  )
}

<script setup lang="ts">
import { computed, useAttrs } from 'vue'
import NotificationContent, { type NotificationType, type SplitAction } from './notification-content.vue'

defineOptions({ inheritAttrs: false })

const props = defineProps<{
  type?: NotificationType
  title: string
  description?: string
  splitActions?: SplitAction[]
}>()

const attrs = useAttrs()
const contentAttrs = computed(() => {
  const { class: _class, style: _style, ...rest } = attrs
  return rest
})
</script>

<template>
  <div
    :class="[
      attrs.class,
      'pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-zinc-950/10 dark:bg-zinc-800 dark:ring-white/10 dark:ring-inset',
    ]"
    :style="attrs.style as string | undefined"
  >
    <NotificationContent v-bind="{ ...props, ...contentAttrs }">
      <template v-for="(_, name) in $slots" #[name]="scope">
        <slot :name="name" v-bind="scope ?? {}" />
      </template>
    </NotificationContent>
  </div>
</template>