import { StylableComponent } from '.'

export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'

export interface FlexConfig {
    flexDirection?: FlexDirection,
    justifyContent?: JustifyContent,
    alignItems?: AlignItems,
}

export type FlexConfigKey = keyof FlexConfig;

export type JustifyContent = 'flex-start'
    | 'flex-end'
    | 'center'
    | 'space-between'
    | 'space-around'
    | 'around'
    | 'between'

export type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'between' | 'around'

export interface FlexShortcutProp {
    key: FlexConfigKey,
    propIsValue: boolean,
}

export interface FlexProps extends StylableComponent {
    children?: any
    justify?: JustifyContent
    align?: AlignItems
    width?: number
    onClick?: any
    fullWidth?: boolean
    xs?: FlexConfig
    sm?: FlexConfig
    md?: FlexConfig
    lg?: FlexConfig
    expand?: string
    tooltip?: string
    tooltipPos?: 'top' | 'right' | 'bottom' | 'left'
}

export interface FlexShortcutProps {
    justify: FlexShortcutProp
    align: FlexShortcutProp
}

export type FlexShortcutPropsKey = keyof FlexShortcutProps