import type { IconType, MaterialIcons } from '../components/Icon/types'

export type {
	ModalComponentProps,
	ModalComponentProps as ModalFormComponentProps,
	ModalOptions,
} from '../plugins/modalTypes'

export type { IconType, MaterialIcons }

export type { AddToCalendarEvent } from '../utils/calendar/types'
export * from './BagelForm'
export * from './BtnOptions'
export type { StorageFile } from './file'

export type { NavLink } from './NavLink'

export type Tab = {
	label: string
	value: string
	icon?: IconType
} | string

export type ThemeType
	= | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'brown' | 'orange' | 'turquoise' | 'gray' | 'black' | 'pink'
		| 'primary' | 'white'
		| 'blue-light' | 'green-light' | 'red-light' | 'yellow-light' | 'purple-light' | 'brown-light'
		| 'orange-light' | 'turquoise-light' | 'pink-light' | 'gray-light' | 'primary-light'
		| 'blue-tint' | 'red-tint' | 'primary-tint' | 'black-tint' | 'blue-dark'
		| 'light'

// Extended theme type with all percentage variations
export type ExtendedThemeType
	// Base colors
	= | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'brown' | 'orange' | 'turquoise' | 'gray' | 'black' | 'pink'
		| 'primary' | 'white'
	// Legacy light variants
		| 'blue-light' | 'green-light' | 'red-light' | 'yellow-light' | 'purple-light' | 'brown-light'
		| 'orange-light' | 'turquoise-light' | 'pink-light' | 'gray-light' | 'primary-light'
	// Legacy tint variants
		| 'blue-tint' | 'red-tint' | 'primary-tint' | 'black-tint' | 'blue-dark' | 'light'
	// 10% variants (lightest)
		| 'blue-10' | 'green-10' | 'red-10' | 'yellow-10' | 'purple-10' | 'brown-10' | 'orange-10' | 'turquoise-10' | 'gray-10' | 'black-10' | 'pink-10'
	// 20% variants
		| 'blue-20' | 'green-20' | 'red-20' | 'yellow-20' | 'purple-20' | 'brown-20' | 'orange-20' | 'turquoise-20' | 'gray-20' | 'black-20' | 'pink-20'
	// 30% variants
		| 'blue-30' | 'green-30' | 'red-30' | 'yellow-30' | 'purple-30' | 'brown-30' | 'orange-30' | 'turquoise-30' | 'gray-30' | 'black-30' | 'pink-30'
	// 40% variants
		| 'blue-40' | 'green-40' | 'red-40' | 'yellow-40' | 'purple-40' | 'brown-40' | 'orange-40' | 'turquoise-40' | 'gray-40' | 'black-40' | 'pink-40'
	// 50% variants
		| 'blue-50' | 'green-50' | 'red-50' | 'yellow-50' | 'purple-50' | 'brown-50' | 'orange-50' | 'turquoise-50' | 'gray-50' | 'black-50' | 'pink-50'
	// 60% variants
		| 'blue-60' | 'green-60' | 'red-60' | 'yellow-60' | 'purple-60' | 'brown-60' | 'orange-60' | 'turquoise-60' | 'gray-60' | 'black-60' | 'pink-60'
	// 70% variants
		| 'blue-70' | 'green-70' | 'red-70' | 'yellow-70' | 'purple-70' | 'brown-70' | 'orange-70' | 'turquoise-70' | 'gray-70' | 'black-70' | 'pink-70'
	// 80% variants
		| 'blue-80' | 'green-80' | 'red-80' | 'yellow-80' | 'purple-80' | 'brown-80' | 'orange-80' | 'turquoise-80' | 'gray-80' | 'black-80' | 'pink-80'
	// 90% variants
		| 'blue-90' | 'green-90' | 'red-90' | 'yellow-90' | 'purple-90' | 'brown-90' | 'orange-90' | 'turquoise-90' | 'gray-90' | 'black-90' | 'pink-90'
	// 100% variants (same as base)
		| 'blue-100' | 'green-100' | 'red-100' | 'yellow-100' | 'purple-100' | 'brown-100' | 'orange-100' | 'turquoise-100' | 'gray-100' | 'black-100' | 'pink-100'
	// 110% variants (darker)
		| 'blue-110' | 'green-110' | 'red-110' | 'yellow-110' | 'purple-110' | 'brown-110' | 'orange-110' | 'turquoise-110' | 'gray-110' | 'black-110' | 'pink-110'
	// 120% variants
		| 'blue-120' | 'green-120' | 'red-120' | 'yellow-120' | 'purple-120' | 'brown-120' | 'orange-120' | 'turquoise-120' | 'gray-120' | 'black-120' | 'pink-120'
	// 130% variants (darkest)
		| 'blue-130' | 'green-130' | 'red-130' | 'yellow-130' | 'purple-130' | 'brown-130' | 'orange-130' | 'turquoise-130' | 'gray-130' | 'black-130' | 'pink-130'
	// Status colors
		| 'Error' | 'Paid' | 'Active'

export interface OptionObject {
	label: string
	value: string | number
	icon?: IconType
	[key: string]: any
}

export type Option = string | number | OptionObject

export type IfAny<T, Y, N> = 0 extends (1 & T) ? Y : N
