import { SystemProp } from '@xstyled/system'
import * as CSS from 'csstype'

import { VuiTheme } from '../theme'
import { DisplayProps } from './layout'

type AlignItemsProp = SystemProp<CSS.Property.AlignItems, VuiTheme>
export type AlignItemsProps = {
  alignItems?: AlignItemsProp
}

type AlignContentProp = SystemProp<CSS.Property.AlignContent, VuiTheme>
export type AlignContentProps = {
  alignContent?: AlignContentProp
}

type JustifyContentProp = SystemProp<CSS.Property.JustifyContent, VuiTheme>
export type JustifyContentProps = {
  justifyContent?: JustifyContentProp
}

type JustifyItemsProp = SystemProp<CSS.Property.JustifyItems, VuiTheme>
export type JustifyItemsProps = {
  justifyItems?: JustifyItemsProp
}

type FlexWrapProp = SystemProp<CSS.Property.FlexWrap, VuiTheme>
export type FlexWrapProps = {
  flexWrap?: FlexWrapProp
}

type FlexGrowProp = SystemProp<CSS.Property.FlexGrow, VuiTheme>
export type FlexGrowProps = {
  flexGrow?: FlexGrowProp
}

type FlexShrinkProp = SystemProp<CSS.Property.FlexShrink, VuiTheme>
export type FlexShrinkProps = {
  flexShrink?: FlexShrinkProp
}

type FlexBasisProp = SystemProp<CSS.Property.FlexBasis, VuiTheme>
export type FlexBasisProps = {
  flexBasis?: FlexBasisProp
  hoverFlexBasis?: FlexBasisProp
}

type FlexDirectionProp = SystemProp<CSS.Property.FlexDirection, VuiTheme>
export type FlexDirectionProps = {
  flexDirection?: FlexDirectionProp
}

type FlexProp = SystemProp<CSS.Property.Flex, VuiTheme>
export type FlexProps = {
  flex?: FlexProp
  hoverFlex?: FlexProp
}

type JustifySelfProp = SystemProp<CSS.Property.JustifySelf, VuiTheme>
export type JustifySelfProps = {
  justifySelf?: JustifySelfProp
}

type AlignSelfProp = SystemProp<CSS.Property.AlignSelf, VuiTheme>
export type AlignSelfProps = {
  alignSelf?: AlignSelfProp
}

type OrderProp = SystemProp<CSS.Property.Order, VuiTheme>
export type OrderProps = {
  order?: OrderProp
}

export type FlexboxesProps = DisplayProps &
  AlignItemsProps &
  AlignContentProps &
  JustifyContentProps &
  JustifyItemsProps &
  FlexWrapProps &
  FlexGrowProps &
  FlexShrinkProps &
  FlexBasisProps &
  FlexDirectionProps &
  FlexProps &
  JustifySelfProps &
  AlignSelfProps &
  OrderProps
