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

import { twJoin } from '@/utils'

export const triggerStyles = cva(
	twJoin({
		display: 'flex justify-between items-center overflow-hidden',
		text: 'text-gray whitespace-nowrap',
		visual: 'border border-divider bg-white',
		animation: 'transition duration-300',
		hover: {
			visual: 'hover:border-gray',
			focus: {
				visual: 'hover:focus-visible:border-primary'
			}
		},
		focus: 'focus-visible:outline-none focus-visible:border-primary focus-visible:shadow-sm',
		disabled: {
			mouse: 'disabled:cursor-not-allowed!',
			text: 'disabled:text-secondary',
			visual: 'disabled:bg-gray-100',
			attrs: 'disabled:[&_svg]:text-secondary'
		},
		attrs: 'data-[state=open]:border-primary data-[state=open]:shadow-sm',
		childs: [
			'[&_span]:first:mr-2',
			'[&_span]:first:flex',
			'[&_span]:first:items-center',
			'[&_span]:first:gap-x-2',
			'[&_span]:first:[&_svg]:size-5',
			'[&_svg]:text-gray-800'
		],
		//
		dark: {
			text: 'dark:text-dark-gray-600',
			visual: 'dark:border-dark-divider dark:bg-dark-gray-900',
			disabled: {
				text: 'dark:disabled:text-secondary',
				visual: 'dark:disabled:bg-secondary/16'
			},
			hover: {
				visual: 'dark:hover:border-dark-gray',
				focus: {
					visual: 'dark:focus-visible:shadow-dark-sm'
				},
				childs: ['dark:[&_svg]:text-dark-gray-300']
			}
		}
	}),
	{
		variants: {
			size: {
				sm: twJoin({
					display: 'h-7 py-2 px-2.5',
					text: 'text-sm',
					visual: 'rounded-sm',
					childs: '[&_svg]:size-4'
				}),
				md: twJoin({
					display: 'h-9.5 py-2 px-3.5',
					text: 'text-base',
					visual: 'rounded-md',
					childs: '[&_svg]:size-5'
				}),
				lg: twJoin({
					display: 'h-12 py-3 px-4',
					text: 'text-lg',
					visual: 'rounded-lg',
					childs: '[&_svg]:size-6'
				})
			}
		},
		defaultVariants: {
			size: 'md'
		}
	}
)

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

export const viewportStyles = cva('p-1', {
	variants: {
		position: {
			popper: twJoin({
				display: 'w-full scroll-my-1',
				vars: [
					'h-[var(--radix-select-trigger-height)]',
					'min-w-[var(--radix-select-trigger-width)]'
				]
			}),
			'item-aligned': ''
		}
	},
	defaultVariants: {
		position: 'popper'
	}
})

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

export const contentStyles = cva(
	twJoin({
		position: 'relative z-50',
		display: 'min-w-[8rem] overflow-x-hidden overflow-y-auto',
		text: 'text-gray-900',
		visual: 'bg-white rounded-md shadow-lg',
		attrs: [
			'data-[state=open]:animate-in',
			'data-[state=open]:fade-in-0',
			'data-[state=open]:zoom-in-95',
			//
			'data-[state=closed]:animate-out',
			'data-[state=closed]:fade-out-0',
			'data-[state=closed]:zoom-out-95',
			//
			'data-[side=top]:slide-in-from-bottom-2',
			'data-[side=right]:slide-in-from-left-2',
			'data-[side=bottom]:slide-in-from-top-2',
			'data-[side=left]:slide-in-from-right-2'
		],
		vars: [
			'max-h-(--radix-select-content-available-height)',
			'origin-(--radix-select-content-transform-origin)'
		],
		//
		dark: {
			text: 'dark:text-dark-gray-300',
			visual: 'dark:bg-tooltip dark:shadow-dark-lg'
		}
	}),
	{
		variants: {
			position: {
				popper: twJoin({
					attrs: [
						'data-[side=top]:-translate-y-1',
						'data-[side=right]:translate-x-1',
						'data-[side=bottom]:translate-y-1',
						'data-[side=left]:-translate-x-1'
					]
				}),
				'item-aligned': ''
			}
		},
		defaultVariants: {
			position: 'popper'
		}
	}
)
