import { VariantProps, cva } from 'class-variance-authority'

import { twJoin } from '@/utils'

export const overlayStyles = twJoin({
	position: 'fixed inset-0 z-50',
	visual: 'bg-black/50',
	attrs: [
		'data-[state=open]:animate-in',
		'data-[state=open]:fade-in-0',
		//
		'data-[state=closed]:animate-out',
		'data-[state=closed]:fade-out-0'
	]
})

// /////////////////////////

export const contentStyles = cva(
	twJoin({
		position: 'fixed z-50',
		display: 'flex flex-col gap-4',
		visual: 'bg-white shadow-lg border-divider',
		animation: 'transition ease-in-out',
		attrs: [
			'data-[state=open]:animate-in',
			'data-[state=open]:duration-500',
			//
			'data-[state=closed]:animate-out',
			'data-[state=closed]:duration-300'
		],
		//
		dark: 'dark:bg-dark-gray-900 dark:shadow-dark-lg  dark:border-dark-divider'
	}),
	{
		variants: {
			side: {
				right: twJoin({
					position: 'inset-y-0 right-0',
					display: 'w-3/4 h-full sm:max-w-sm',
					visual: 'border-l',
					attrs: [
						'data-[state=open]:slide-in-from-right',
						'data-[state=closed]:slide-out-to-right'
					]
				}),
				left: twJoin({
					position: 'inset-y-0 left-0',
					display: 'w-3/4 h-full sm:max-w-sm',
					visual: 'border-r',
					attrs: [
						'data-[state=open]:slide-in-from-left',
						'data-[state=closed]:slide-out-to-left'
					]
				}),
				top: twJoin({
					position: 'inset-x-0 top-0',
					display: 'h-auto',
					visual: 'border-b',
					attrs: [
						'data-[state=open]:slide-in-from-top',
						'data-[state=closed]:slide-out-to-top'
					]
				}),
				bottom: twJoin({
					position: 'inset-x-0 bottom-0',
					display: 'h-auto',
					visual: 'border-t',
					attrs: [
						'data-[state=open]:slide-in-from-bottom',
						'data-[state=closed]:slide-out-to-bottom'
					]
				})
			}
		},
		defaultVariants: {
			side: 'left'
		}
	}
)

export type ContentStylesProps = VariantProps<typeof contentStyles>

// /////////////////////////

export const headerStyles = twJoin({
	display: 'hidden'
})

// /////////////////////////

export const closeStyles = twJoin({
	position: 'absolute top-4 right-4',
	display: 'opacity-70',
	visual: 'rounded-xs',
	animation: 'transition-opacity',
	hover: 'hover:opacity-100',
	disabled: 'disabled:pointer-events-none',
	attrs: 'data-[state=open]:bg-secondary'
})
