import {  } from './theme-notifier'

import { Breakpoint, Theme, ThemeNotifier } from '../theme'

export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg'

// Sizeable Components also support 2 extra sizes
export type Size = Breakpoint | 'xxs' | 'xxl' | 'xl'

export type TooltipPosition = 'up' | 'down' | 'left' | 'right'

export interface StylableComponentProps {
    id?: string
    className?: string
    style?: Styles
    tooltip?: string
    tooltipPos?: TooltipPosition
    primary?: boolean
    secondary?: boolean
}

export interface SizeableComponentProps extends StylableComponentProps {
    size?: Size
}

export interface Styles {
    [key: string]: any
}

export interface StyleProviderProps { }

export interface StyleProviderComponentProps extends StyleProviderProps {
    theme: Theme
}

export interface StyleContext {
    themeNotifier: ThemeNotifier
}

export interface Theme {
    colors: ColorStyles
}

export type Shade = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

export interface ColorPalette {
    [shade: number]: string
}

export interface ColorStyles {
    primary: ColorPalette
    secondary: ColorPalette
    gray: ColorPalette
    success: ColorPalette
    warning: ColorPalette
    error: ColorPalette
}