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

import { twJoin } from '@/utils'

export const mainStyles = cva(
	twJoin({
		tw: 'group/calendar',
		visual: 'bg-white shadow-md',
		//
		dark: 'dark:bg-dark-gray-900'
	}),
	{
		variants: {
			size: {
				sm: 'px-2 pb-2 rounded-sm',
				md: 'px-3.5 pb-3 rounded-md',
				lg: ''
			}
		},
		defaultVariants: {
			size: 'md'
		}
	}
)

export type MainStylesProps = VariantProps<typeof mainStyles>

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

export const allStyles = ({ size }: { size?: 'sm' | 'md' | 'lg' | null }) => {
	const generalStyles = {
		root: twJoin({
			position: 'relative',
			display: 'w-fit'
		}),
		month_caption: twJoin({
			display: 'flex items-center',
			text: 'font-semibold text-gray-900 capitalize',
			visual: 'border-b border-divider',
			//
			dark: {
				text: 'dark:text-dark-gray-200',
				visual: 'dark:border-dark-divider'
			}
		}),
		nav: twJoin({
			position: 'absolute',
			display: 'flex -mt-px'
		}),
		button_previous: twJoin({
			display: 'flex items-center justify-center',
			text: 'text-gray-800',
			visual: 'bg-secondary/16 rounded-full',
			hover: 'hover:bg-secondary/32',
			//
			dark: {
				text: 'dark:text-dark-gray-300',
				visual: 'dark:bg-dark-gray-700/16',
				hover: 'dark:hover:bg-dark-gray-700/32'
			}
		}),
		button_next: twJoin({
			display: 'flex items-center justify-center',
			text: 'text-gray-800',
			visual: 'bg-secondary/16 rounded-full',
			hover: 'hover:bg-secondary/32',
			//
			dark: {
				text: 'dark:text-dark-gray-300',
				visual: 'dark:bg-dark-gray-700/16',
				hover: 'dark:hover:bg-dark-gray-700/32'
			}
		}),
		weekday: twJoin({
			display: 'flex items-center justify-center',
			text: 'font-semibold text-gray-900 capitalize'
		}),
		day_button: twJoin({
			display: 'flex items-center justify-center',
			text: 'text-gray-800',
			visual: 'rounded-full',
			hover: {
				visual: 'hover:bg-secondary/16',
				attrs: {
					visual: 'hover:group-data-[selected=true]/day:bg-primary'
				}
			},
			attrs: {
				text: [
					'group-data-[selected=true]/day:text-white!',
					'group-data-[outside=true]/day:text-gray',
					'group-data-[today=true]/day:text-primary'
				],
				visual: [
					'group-data-[selected=true]/day:bg-primary',
					'group-data-[today=true]/day:border group-data-[today=true]/day:border-primary',
					'data-[selected-single=true]:rounded-full!'
				]
			},
			//
			dark: {
				text: 'dark:text-dark-gray-300',
				hover: {
					visual: 'hover:bg-secondary/32'
				}
			}
		}),
		range_start: twJoin({
			attrs: {
				visual: ['[&_button]:rounded-e-none']
			}
		}),
		range_middle: twJoin({
			attrs: {
				text: 'data-[selected=true]:[&_button]:text-primary!',
				visual: [
					'[&_button]:bg-primary/16! [&_button]:rounded-none',
					'data-[today=true]:[&_button]:bg-primary/32! data-[today=true]:[&_button]:border-none!'
				],
				hover: {
					text: 'hover:[&_button]:text-gray!',
					visual: [
						'hover:[&_button]:bg-secondary/8!',
						'hover:data-[today=true]:[&_button]:text-primary!'
					]
				}
			}
		}),
		range_end: twJoin({
			attrs: {
				visual: '[&_button]:rounded-s-none'
			}
		})
	}

	const sizeStyles = {
		sm: {
			...generalStyles,
			month_caption:
				generalStyles.month_caption +
				' ' +
				twJoin({
					display: 'h-10 -mx-2 px-2',
					text: 'text-sm'
				}),
			nav:
				generalStyles.nav +
				' ' +
				twJoin({
					position: 'top-2 right-2',
					display: 'gap-2'
				}),
			button_previous:
				generalStyles.button_previous +
				' ' +
				twJoin({
					display: 'size-6'
				}),
			button_next:
				generalStyles.button_next +
				' ' +
				twJoin({
					display: 'size-6'
				}),
			weekday:
				generalStyles.weekday +
				' ' +
				twJoin({
					display: 'h-10 w-7',
					text: 'text-xs'
				}),
			day_button:
				generalStyles.day_button +
				' ' +
				twJoin({
					display: 'size-7',
					text: 'text-sm'
				})
		},
		md: {
			...generalStyles,
			month_caption:
				generalStyles.month_caption +
				' ' +
				twJoin({
					display: 'h-14.5 -mx-3.5 px-3.5',
					text: 'text-base'
				}),
			nav:
				generalStyles.nav +
				' ' +
				twJoin({
					position: 'top-4 right-4',
					display: 'gap-4'
				}),
			button_previous:
				generalStyles.button_previous +
				' ' +
				twJoin({
					display: 'size-7'
				}),
			button_next:
				generalStyles.button_next +
				' ' +
				twJoin({
					display: 'size-7'
				}),
			weekday:
				generalStyles.weekday +
				' ' +
				twJoin({
					display: 'h-14.5 w-8.5',
					text: 'text-sm'
				}),
			day_button:
				generalStyles.day_button +
				' ' +
				twJoin({
					display: 'size-8.5',
					text: 'text-base'
				})
		},
		lg: {}
	}

	return size ? sizeStyles[size] : generalStyles
}
