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

import { twJoin } from '@/utils'

export const rootStyles = cva(
	twJoin({
		display: 'w-18 overflow-hidden',
		animation: 'ease-linear duration-200',
		attrs: 'group-data-[state=expanded]:w-60'
	}),
	{
		variants: {
			content: {
				true: twJoin({
					position: 'fixed inset-y-0 left-0 z-50',
					display: 'h-svh',
					visual: 'bg-white shadow-sm',
					animation: 'transition-[left,width]',
					//
					dark: 'dark:shadow-dark-sm dark:bg-dark-gray-900'
				}),
				false: 'relative transition-[width]'
			}
		},
		defaultVariants: {
			content: false
		}
	}
)

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

export const wrapperStyles = twJoin({
	display: 'flex h-full w-full flex-col'
})

export const headerStyles = twJoin({
	display: 'flex items-center pt-5 pb-1 px-3.5',
	text: 'text-2xl text-gray-900',
	childs: {
		display: [
			'[&_button]:flex [&_button]:items-center [&_button]:px-3 [&_button]:py-1 [&_button]:ml-auto'
		],
		hover: {
			mouse: 'hover:[&_button]:cursor-pointer'
		},
		attrs: [
			'group-data-[state="expanded"]:pl-4.5',
			'group-data-[state="expanded"]:pr-0',
			//
			'group-data-[state="collapsed"]:pb-2',
			'group-data-[state="collapsed"]:[&_>_a]:hidden',
			'group-data-[state="collapsed"]:[&_>_button]:ml-0',
			'group-data-[state="collapsed"]:justify-center'
		]
	},
	//
	dark: {
		text: 'dark:text-dark-gray-300'
	}
})

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

export const contentStyles = twJoin({
	display: 'px-3'
})

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

export const groupHeadStyles = twJoin({
	display: 'flex items-center h-11.5 p-3',
	childs: {
		display: '[&_svg]:size-5.5',
		text: 'text-gray uppercase',
		attrs: [
			'group-data-[state="collapsed"]:[&_[role="separator"]]:hidden',
			'group-data-[state="collapsed"]:[&_span]:hidden',
			'group-data-[state="collapsed"]:justify-center',
			//
			'group-data-[state="expanded"]:[&_svg]:hidden'
		]
	},
	//
	dark: 'dark:text-dark-gray-600'
})

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

export const footerStyles = twJoin({
	display: 'flex items-center justify-center py-2 px-3.5 mt-auto',
	text: 'text-center text-nowrap',
	visual: 'border-t border-divider',
	childs: 'group-data-[state="collapsed"]:[&_span_span]:hidden',
	//
	dark: 'dark:border-dark-divider'
})
