import {
  animation,
  backgroundColor,
  borders,
  color,
  compose,
  effects,
  flexboxes,
  flexboxGrids,
  grids,
  interactivity,
  layout,
  sizing,
  space,
  tables,
  transforms,
  transitions,
  typography,
} from '@xstyled/styled-components'

import type { AnimationsProps } from './animations'
import type { BackgroundColorProps } from './backgrounds'
import type { BordersProps } from './borders'
import type { IsTruncatedProps, MaxLinesProps, WordBreakProps } from './custom'
import { isTruncated, maxLines, wordBreak } from './custom'
import type { EffectsProps } from './effects'
import type { FlexboxesProps } from './flexboxes'
import type { FlexboxGridsProps } from './flexboxGrids'
import type { GridsProps } from './grids'
import type { InteractivityProps } from './interactivity'
import type { LayoutProps } from './layout'
import type { SizingProps } from './sizing'
import type { SpaceProps } from './space'
import type { TablesProps } from './tables'
import type { TransformsProps } from './transforms'
import type { TransitionsProps } from './transitions'
import type { TypographyProps } from './typography'

export type SystemProps = AnimationsProps &
  BackgroundColorProps &
  BordersProps &
  EffectsProps &
  FlexboxesProps &
  FlexboxGridsProps &
  GridsProps &
  InteractivityProps &
  IsTruncatedProps &
  LayoutProps &
  MaxLinesProps &
  SizingProps &
  SpaceProps &
  TablesProps &
  TransformsProps &
  TransitionsProps &
  TypographyProps &
  WordBreakProps

export const system = compose(
  animation,
  backgroundColor,
  borders,
  color,
  effects,
  flexboxes,
  flexboxGrids,
  grids,
  interactivity,
  isTruncated,
  layout,
  maxLines,
  sizing,
  space,
  tables,
  transforms,
  transitions,
  typography,
  wordBreak,
)

export default system
