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

import { twJoin } from '@/utils'

export const rootStyles = cva(
	twJoin({
		tw: [
			'group-has-[[data-state="open"]]/input:border-primary',
			'group-has-[[data-state="open"]]/input:shadow-primary-sm',
			'hover:group-has-[[data-state="open"]]/input:border-primary'
		],
		display: 'flex w-full min-w-0 ',
		text: 'text-base text-gray-800',
		visual: 'border-divider border bg-white outline-none',
		animation: 'transition duration-300',
		placeholder: 'placeholder:text-gray-400',
		hover: 'hover:border-gray hover:focus-visible:border-primary',
		focus: 'focus-visible:border-primary focus-visible:shadow-primary-sm',
		disabled: {
			mouse: 'disabled:cursor-not-allowed',
			text: 'disabled:text-secondary',
			visual: 'disabled:bg-gray-100'
		},
		attrs: {
			visual: 'aria-[invalid=true]:border-danger',
			hover: 'aria-[invalid=true]:hover:border-danger',
			focus: 'aria-[invalid=true]:focus-visible:border-danger aria-[invalid=true]:focus-visible:shadow-none'
		},
		//
		dark: {
			text: 'dark:text-dark-gray-300',
			visual: 'dark:border-dark-divider dark:bg-dark-gray-900',
			disabled: {
				text: 'dark:disabled:text-secondary',
				visual: 'dark:disabled:bg-secondary/16'
			},
			placeholder: 'dark:placeholder:text-dark-gray-700',
			hover: 'dark:hover:border-dark-gray',
			focus: 'dark:focus-visible:shadow-dark-sm'
		}
	}),
	{
		variants: {
			sizes: {
				sm: twJoin({
					display: 'h-7 py-2 px-2.5',
					text: 'text-sm',
					visual: 'rounded-sm',
					focus: {
						display: 'focus-visible:pl-3.5'
					}
				}),
				md: twJoin({
					display: 'h-9.5 py-2 px-3.5',
					text: 'text-base',
					visual: 'rounded-md',
					focus: {
						display: 'focus-visible:pl-4.5'
					}
				}),
				lg: twJoin({
					display: 'h-12 py-3 px-4',
					text: 'text-lg',
					visual: 'rounded-lg',
					focus: {
						display: 'focus-visible:pl-5.5'
					}
				})
			}
		},
		defaultVariants: {
			sizes: 'md'
		}
	}
)

export type RootStylesProps = VariantProps<typeof rootStyles>
