import * as React from 'react'
import { LiteralUnion } from 'type-fest'

import { BoxProps } from './Box'
import { NativeStyleNames, ColorStyleNames } from './system/style-names'

export interface BoxSizes {}

export interface Breakpoints {}

export interface DefaultBreakpoints {
  xs: number
  sm: number
  md: number
  lg: number
  xl: number
}

export interface SpinnerSizes {
  xxs: number
  xs: number
  sm: number
  md: number
  lg: number
  xl: number
  xxl: number
}

export interface SpinnerThickness {
  xxs: number
  xs: number
  sm: number
  md: number
  lg: number
  xl: number
  xxl: number
}

export interface Colors {
  foreground: string
  foregroundSecondary: string
  foregroundTertiary: string
  background: string
  backgroundSecondary: string
  backgroundTertiary: string
  surface: string
  surfaceSecondary: string
  surfaceTertiary: string
  separator: string
  separatorSecondary: string
  separatorTertiary: string
  separatorHover: string
  separatorFocus: string
  separatorFocusSecondary: string
  highlight: string
  highlightSecondary: string
  linkForeground: string
  linkBackground: string
  primary: string
  'primary-light': string
  'primary-lighter': string
  'primary-lightest': string
  'primary-dark': string
  'primary-darker': string
  'primary-darkest': string
  warning: string
  'warning-light': string
  'warning-lighter': string
  'warning-lightest': string
  'warning-dark': string
  'warning-darker': string
  'warning-darkest': string
  error: string
  'error-light': string
  'error-lighter': string
  'error-lightest': string
  'error-dark': string
  'error-darker': string
  'error-darkest': string
  success: string
  'success-light': string
  'success-lighter': string
  'success-lightest': string
  'success-dark': string
  'success-darker': string
  'success-darkest': string
  sunday: string
  monday: string
  tuesday: string
  wednesday: string
  thursday: string
  friday: string
  saturday: string
  'check-ins': string
  giving: string
  groups: string
  'music-stand': string
  pco: string
  people: string
  'planning-center': string
  projector: string
  registrations: string
  calendar: string
  services: string
  'red-0': string
  'red-1': string
  'red-2': string
  'red-3': string
  'red-4': string
  'red-5': string
  'red-6': string
  'red-7': string
  'red-8': string
  'red-9': string
  'blue-0': string
  'blue-1': string
  'blue-2': string
  'blue-3': string
  'blue-4': string
  'blue-5': string
  'blue-6': string
  'blue-7': string
  'blue-8': string
  'blue-9': string
  'green-0': string
  'green-1': string
  'green-2': string
  'green-3': string
  'green-4': string
  'green-5': string
  'green-6': string
  'green-7': string
  'green-8': string
  'green-9': string
  'yellow-0': string
  'yellow-1': string
  'yellow-2': string
  'yellow-3': string
  'yellow-4': string
  'yellow-5': string
  'yellow-6': string
  'yellow-7': string
  'yellow-8': string
  'yellow-9': string
  'light-0': string
  'light-1': string
  'light-2': string
  'light-3': string
  'light-4': string
  'light-5': string
  'light-6': string
  'light-7': string
  'light-8': string
  'light-9': string
  'dark-0': string
  'dark-1': string
  'dark-2': string
  'dark-3': string
  'dark-4': string
  'dark-5': string
  'dark-6': string
  'dark-7': string
  'dark-8': string
  'dark-9': string
  'grey-0': string
  'grey-1': string
  'grey-2': string
  'grey-3': string
  'grey-4': string
  'grey-5': string
  'grey-6': string
  'grey-7': string
  'grey-8': string
  'grey-9': string
  transparent: string
}

export type ColorProp = LiteralUnion<keyof Colors, string>

export interface ButtonTheme {
  fill: any
  outline: any
  naked: any
}

export interface Theme {
  boxSizes?: Record<keyof BoxSizes, BoxProps>
  breakpoints?: Partial<Breakpoints>
  button?: { themes?: { [key: string]: ButtonTheme } }
  calendar?: any
  checkbox?: any
  colors?: Partial<Colors>
  elevations?: Array<string>
  fontSizes?: Array<number>
  group?: { radius?: number }
  pageBody?: BoxProps
  pageButton?: any
  pageDropdown?: any
  pageHeader?: BoxProps
  pageTitle?: any
  icons?: object
  lineHeights?: Array<number>
  radio?: any
  spinner?: {
    color?: ColorProp
    sizes?: Partial<SpinnerSizes>
    thickness?: Partial<SpinnerThickness>
    trackColor?: ColorProp
  }
}

export interface MediaQueries<T> {
  mediaQueries?: Partial<Record<keyof Breakpoints, T>>
}

export interface Variants<T> {
  variants?: {
    [key in any]?: T
  }
}

type CustomStyles = {
  css?: any
  paddingHorizontal?: number | string
  paddingVertical?: number | string
  marginHorizontal?: number | string
  marginVertical?: number | string
  column?: React.CSSProperties['gridColumn']
  columnStart?: React.CSSProperties['gridColumnStart']
  columnEnd?: React.CSSProperties['gridColumnEnd']
  row?: React.CSSProperties['gridRow']
  rowStart?: React.CSSProperties['gridRowStart']
  rowEnd?: React.CSSProperties['gridRowEnd']
  basis?: React.CSSProperties['flexBasis']
  grow?: React.CSSProperties['flexGrow']
  shrink?: React.CSSProperties['flexShrink']
  wrap?: boolean | string
  radius?: React.CSSProperties['borderRadius']
  radiusTop?: number | string
  radiusRight?: number | string
  radiusBottom?: number | string
  radiusLeft?: number | string
  strokeAlign?: 'inside' | 'center' | 'outside'
  strokeWeight?: number
  elevation?: number
  x?: number | string
  y?: number | string
  rotate?: number
  scale?: number
  uppercase?: boolean
}

export type StyleProps = Pick<React.CSSProperties, NativeStyleNames> &
  Partial<Record<ColorStyleNames, ColorProp>> &
  CustomStyles

export type CommonProps = React.RefAttributes<any> &
  React.HTMLAttributes<any> &
  any

export const designSystem: any
export const hooks: any
export const server: any
export const utils: any

export const Avatar: React.FC<CommonProps>
export const Badge: React.FC<CommonProps>
export const Calendar: React.FC<CommonProps>
export const Checkbox: React.FC<CommonProps>
export const CheckboxCard: React.FC<CommonProps>
export const CheckboxGroup: React.FC<CommonProps>
export const ChurchCenterStatus: React.FC<CommonProps>
export const Collapse: React.FC<CommonProps>
export const ColumnView: React.FC<CommonProps>
export const Combobox: React.FC<CommonProps>
export const DataTable: React.FC<CommonProps>
export const DateField: React.FC<CommonProps>
export const DragDrop: React.FC<CommonProps>
export const Drawer: React.FC<CommonProps>
export const Dropdown: React.FC<CommonProps>
export const EditActions: React.FC<CommonProps>
export const Field: React.FC<CommonProps>
export const Form: React.FC<CommonProps>
export const FieldSet: React.FC<CommonProps>
export const Heading: React.FC<CommonProps>
export const HelperDrawer: React.FC<CommonProps>
export const Highlight: React.FC<CommonProps>
export const Icon: React.FC<CommonProps>
export const Link: React.FC<CommonProps>
export const LinkList: React.FC<CommonProps>
export const List: React.FC<CommonProps>
export const Logo: React.FC<CommonProps>
export const Menu: React.FC<CommonProps>
export const Modal: React.FC<CommonProps>
export const NumberField: React.FC<CommonProps>
export const PagerView: React.FC<CommonProps>
export const Pagination: React.FC<CommonProps>
export const Progress: React.FC<CommonProps>
export const Radio: React.FC<CommonProps>
export const RangeSlider: React.FC<CommonProps>
export const ScreenReader: React.FC<CommonProps>
export const Section: React.FC<CommonProps>
export const HeadingUppercase: React.FC<CommonProps>
export const SegmentedControl: React.FC<CommonProps>
export const SegmentedTabs: React.FC<CommonProps>
export const Select: React.FC<CommonProps>
export const Sidebar: React.FC<CommonProps>
export const Sortable: React.FC<CommonProps>
export const StepperField: React.FC<CommonProps>
export const StepperProgress: React.FC<CommonProps>
export const Summary: React.FC<CommonProps>
export const Table: React.FC<CommonProps>
export const Tabs: React.FC<CommonProps>
export const TextArea: React.FC<CommonProps>
export const TimeField: React.FC<CommonProps>
export const Toolbar: React.FC<CommonProps>
export const TokenInput: React.FC<CommonProps>
export const Tooltip: React.FC<CommonProps>
export const VariantProvider: React.FC<CommonProps>
export const Wizard: React.FC<CommonProps>

export * from './Alert'
export * from './Box'
export * from './Button'
export * from './Card'
export * from './Divider'
export * from './FilterLayout'
export * from './GridView'
export * from './Group'
export * from './Input'
export * from './Popover'
export * from './Portal'
export * from './Scrim'
export * from './Spinner'
export * from './StackView'
export * from './Tab'
export * from './Text'
export * from './TileView'
export * from './ThemeProvider'
export * from './WrapView'