// @flow

import React from "react"

import Hoverable from "../../modules/Hoverable"
import Focusable from "../../modules/Focusable"
import Touchable from "../../modules/Touchable"

type PropsType = {
  children?: React$Element<any>,

  // hoc
  hovered: boolean,
  focused: boolean,
  touched: boolean,

  // users
  component: Class<React$Component<*,*,*>>,
  style?: any,
  hoveredStyle?: any,
  focusedStyle?: any,
  touchedStyle?: any,
  hoveredOrFocusedStyle?: any,
}

const Stylable = (props: PropsType): React$Element<any> => {
  const {
    component: Component,
    hovered,
    focused,
    touched,
    style,
    hoveredStyle,
    focusedStyle,
    touchedStyle,
    hoveredOrFocusedStyle,
    children,
    ...othersProps,
  } = props

  return (
    <Component
      { ...othersProps }
      style={ [
        style,
        hovered && hoveredStyle,
        focused && focusedStyle,
        (hovered || focused) && hoveredOrFocusedStyle,
        touched && touchedStyle,
      ] }
    >
      { children }
    </Component>
  )
}

export default Hoverable(Focusable(Touchable(Stylable)))