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

import { twJoin } from '@/utils'

export const tableWrapperStyles = twJoin({
	position: 'relative',
	display: 'max-h-[calc(100vh-328px)] overflow-y-auto'
})

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

export const tableStyles = twJoin({
	display: 'table-auto w-full',
	visual: 'border-separate border-spacing-0',
	//
	dark: {
		visual: 'dark:border-dark-divider'
	}
})

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

export const theadStyles = twJoin({
	position: 'sticky top-0 z-10',
	visual: 'bg-white',
	//
	dark: 'dark:bg-dark-gray-900'
})

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

export const headStylesWrapper = cva(
	twJoin({
		tw: 'group',
		mouse: 'hover:cursor-pointer',
		position: 'relative',
		text: 'text-start uppercase',
		visual: 'border-y border-divider',
		hover: 'hover:[&_[data-type="default"]]:bg-[#F4F2FE]',
		attrs: 'has-[[data-state="open"]]:[&_[data-type="default"]]:bg-[#F4F2FE]',
		after: {
			position:
				'after:content-[""] after:absolute after:top-3 after:-right-px after:-z-1',
			display:
				'after:h-4 has-[[data-type*="sort"]]:after:w-px after:-mr-px after:inline-block',
			visual: 'after:bg-divider dark:after:bg-dark-divider',
			hover: 'has-[[data-type="sort"]]:hover:after:opacity-0',
			attrs: 'has-[[data-state="open"]]:after:opacity-0'
		},
		//
		dark: {
			visual: 'dark:border-dark-divider',
			hover: 'dark:hover:[&_[data-type="default"]]:bg-[#353757]',
			attrs: 'dark:has-[[data-state="open"]]:[&_[data-type="default"]]:bg-[#353757]'
		}
	}),
	{
		variants: {
			isLast: {
				true: 'after:hidden!'
			}
		},
		defaultVariants: {
			isLast: false
		}
	}
)

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

export const headStyles = cva('flex py-3', {
	variants: {
		type: {
			selection: 'pl-5 pr-1',
			default: 'pl-5 pr-20',
			'not-sort': 'px-5',
			actions: 'pl-1 pr-5'
		}
	},
	defaultVariants: {
		type: 'default'
	}
})

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

export const sortFilterStyles = twJoin({
	position: 'absolute top-0 right-0 bottom-0',
	display: 'flex'
})

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

export const filterStyles = cva(
	twJoin({
		position: 'relative top-0 bottom-0',
		display: 'w-6 inline-flex items-center justify-center',
		text: 'text-gray-800',
		animation: 'transition-opacity',
		dark: 'dark:text-dark-gray-300'
	}),
	{
		variants: {
			isActive: {
				true: 'opacity-100',
				false: 'opacity-0'
			}
		},
		defaultVariants: {
			isActive: false
		}
	}
)

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

export const sortStyles = twJoin({
	position: 'relative top-0 bottom-0',
	display: 'flex w-10 flex-col items-center justify-center',
	text: 'text-gray',
	animation: 'transition-color',
	dark: 'dark:text-dark-gray-600'
})

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

export const rowStyles = twJoin({
	hover: 'hover:bg-primary/5',
	childs: [
		'has-[[data-state="open"]]:bg-primary/5',
		'has-[[data-state="checked"]]:bg-primary/10',
		'hover:[&_[data-type="name"]_span]:text-primary'
	]
})

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

export const cellStyles = cva(
	twJoin({
		display: 'py-2.5',
		visual: 'border-b border-divider',
		//
		dark: {
			visual: 'dark:border-dark-divider'
		}
	}),
	{
		variants: {
			type: {
				selection: 'pl-5 pr-1 align-middle',
				default: 'px-5',
				actions: 'pl-1 pr-5 align-right'
			}
		},
		defaultVariants: {
			type: 'default'
		}
	}
)

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

export const footerStyles = twJoin({
	display: 'flex items-center justify-between px-6 py-4'
})

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

export const notFoundStyles = twJoin({
	display: 'flex flex-col justify-center items-center size-full p-8',
	childs: {
		text: '[&_svg]:text-gray'
	},
	//
	dark: {
		childs: 'dark:[&_svg]:text-dark-gray-800'
	}
})
