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

import { twJoin } from '@/utils'

export const rootStyles = cva(
	twJoin({
		mouse: 'cursor-pointer',
		display: 'inline-flex items-center justify-center shrink-0',
		text: 'font-medium whitespace-nowrap leading-none! tracking-wide',
		animation: 'transition-all',
		disabled: [
			'disabled:cursor-not-allowed!',
			'disabled:select-none',
			'disabled:opacity-65',
			'disabled:shadow-none'
		]
	}),
	{
		variants: {
			color: {
				primary: '',
				secondary: '',
				success: '',
				info: '',
				custom: ''
			},
			variant: {
				default: 'text-white focus-visible:outline-none',
				outline: 'bg-transparent outline shadow-none',
				label: 'focus-visible:outline-none'
			},
			size: {
				xs: 'h-6 px-2.5 py-1 text-xs rounded-sm gap-1',
				sm: 'h-7 px-3.5 py-1.5 text-sm rounded-sm gap-1',
				md: 'h-9.5 px-5 py-2.5 text-base rounded-md gap-2 [&_svg]:size-4.5',
				lg: 'h-12 px-6.5 py-[13px] text-lg rounded-lg',
				icon: 'size-9.5 p-2 text-2xl rounded-md'
			},
			block: {
				true: 'w-full'
			}
		},
		compoundVariants: [
			{
				color: 'primary',
				variant: 'default',
				class: twJoin({
					visual: 'bg-primary shadow-primary-sm',
					hover: 'hover:not-disabled:text-white hover:bg-primary-600',
					focus: 'focus-visible:not-disabled:bg-primary-600',
					active: 'active:not-disabled:bg-primary-600',
					dark: 'dark:shadow-dark-sm'
				})
			},
			{
				color: 'primary',
				variant: 'outline',
				class: twJoin({
					text: 'text-primary',
					visual: 'outline-primary',
					hover: 'hover:not-disabled:bg-primary/8',
					focus: 'focus-visible:not-disabled:bg-primary/8',
					active: 'active:not-disabled:bg-primary/16'
				})
			},
			{
				color: 'primary',
				variant: 'label',
				class: twJoin({
					text: 'text-primary',
					visual: 'bg-primary/16',
					hover: 'hover:not-disabled:bg-primary/24',
					focus: 'focus-visible:not-disabled:bg-primary/24',
					active: 'active:not-disabled:bg-primary/24'
				})
			},
			//
			{
				color: 'secondary',
				variant: 'default',
				class: twJoin({
					visual: 'bg-secondary shadow-sm',
					hover: 'hover:not-disabled:text-white hover:bg-secondary-600',
					focus: 'focus-visible:not-disabled:bg-secondary-600',
					active: 'active:not-disabled:bg-secondary-600',
					dark: 'dark:shadow-dark-sm'
				})
			},
			{
				color: 'secondary',
				variant: 'outline',
				class: twJoin({
					text: 'text-secondary',
					visual: 'outline-secondary',
					hover: 'hover:not-disabled:bg-secondary/8',
					focus: 'focus-visible:not-disabled:bg-secondary/8',
					active: 'active:not-disabled:bg-secondary/16'
				})
			},
			{
				color: 'secondary',
				variant: 'label',
				class: twJoin({
					text: 'text-secondary',
					visual: 'bg-secondary/16',
					hover: 'hover:not-disabled:not-disabled:bg-secondary/24',
					focus: 'focus-visible:not-disabled:bg-secondary/24',
					active: 'active:not-disabled:bg-secondary/24'
				})
			},
			//
			{
				color: 'success',
				variant: 'default',
				class: twJoin({
					visual: 'bg-success shadow-sm',
					hover: 'hover:not-disabled:text-white hover:bg-success-600',
					focus: 'focus-visible:not-disabled:bg-success-600',
					active: 'active:not-disabled:bg-success-600',
					dark: 'dark:shadow-dark-sm'
				})
			},
			{
				color: 'success',
				variant: 'outline',
				class: twJoin({
					text: 'text-success',
					visual: 'outline-success',
					hover: 'hover:not-disabled:bg-success/8',
					focus: 'focus-visible:not-disabled:bg-success/8',
					active: 'active:not-disabled:bg-success/16'
				})
			},
			{
				color: 'success',
				variant: 'label',
				class: twJoin({
					text: 'text-success',
					visual: 'bg-success/16',
					hover: 'hover:not-disabled:bg-success/24',
					focus: 'focus-visible:not-disabled:bg-success/24',
					active: 'active:not-disabled:bg-success/24'
				})
			},
			//
			{
				color: 'info',
				variant: 'default',
				class: twJoin({
					visual: 'bg-info shadow-sm',
					hover: 'hover:not-disabled:text-white hover:bg-info-600',
					focus: 'focus-visible:not-disabled:bg-info-600',
					active: 'active:not-disabled:bg-info-600',
					dark: 'dark:not-disabled:shadow-dark-sm'
				})
			},
			{
				color: 'info',
				variant: 'outline',
				class: twJoin({
					text: 'text-info',
					visual: 'outline-info',
					hover: 'hover:not-disabled:bg-info/8',
					focus: 'focus-visible:not-disabled:bg-info/8',
					active: 'active:not-disabled:bg-info/16'
				})
			},
			{
				color: 'info',
				variant: 'label',
				class: twJoin({
					text: 'text-info',
					visual: 'bg-info/16',
					hover: 'hover:not-disabled:bg-info/24',
					focus: 'focus-visible:not-disabled:bg-info/24',
					active: 'active:not-disabled:bg-info/24'
				})
			}
		],
		defaultVariants: {
			variant: 'default',
			size: 'md',
			color: 'primary',
			block: false
		}
	}
)

export type RootStylesProps = VariantProps<typeof rootStyles>
