import getDisplayName from './utils/get-display-name'
import invariant from 'invariant'
import React from 'react'

function getSelectorsNotInStylesheet(cssProps, stylesheet) {
  const propKeys = Object.keys(cssProps)
  const cssKeys = Object.keys(stylesheet)
  return propKeys.filter(prop => cssKeys.indexOf(prop) === -1)
}

function isPropsAnOverride(cssProps, stylesheet) {
  return getSelectorsNotInStylesheet(cssProps, stylesheet).length <= 0
}

function hasDefinedStyles(stylesheet) {
  return stylesheet && Object.keys(stylesheet).length > 0
}

function stylesAreOverrides(cssProps, stylesheet) {
  return hasDefinedStyles(stylesheet) ? isPropsAnOverride(cssProps, stylesheet) : true
}

function isClass(Comp) {
  // :( try/catch flow control -- want something better
  try {
    Comp()
  } catch (e) {
    return e && e.message && /Cannot call a class as a function/.test(e.message)
  }
  return false
}

export default function styleable(stylesheet) {
  if (!stylesheet)
    stylesheet = {}

  if (typeof stylesheet !== 'object' || Array.isArray(stylesheet))
    throw new Error('stylesheet must be an object (eg, export object from a css module)')

  return function decorateSource(DecoratedComponent) {
    if (!isClass(DecoratedComponent))
      return function styledFn(props) {
        return DecoratedComponent({ ...props, css: { ...stylesheet, ...props.css }})
      }
    else
      return class Styleable extends React.Component {
        static displayName = `Styleable(${getDisplayName(DecoratedComponent)})`;
        static defaultProps = {
          css: {}
        };
        static propTypes = {
          css: React.PropTypes.object
        };
        getCss() {
          invariant(
            stylesAreOverrides(this.props.css, stylesheet),
            'Expected "this.props.css" to provide only overrides to the given stylesheet.  Selectors "%s" not included in the stylesheet keys, "%s".',
            getSelectorsNotInStylesheet(this.props.css, stylesheet),
            Object.keys(stylesheet)
          )
          return { ...stylesheet, ...this.props.css }
        }
        render() {
          return <DecoratedComponent ref="wrapped" {...this.props} css={this.getCss()} />
        }
      }
  }
}

@@ -1323,25 +1323,103 @@
 nt(%7B
- ...props, css: %7B
+%0A          ...DecoratedComponent.defaultProps,%0A          ...props,%0A          css: %7B%0A           
  ...
@@ -1425,24 +1425,36 @@
 .stylesheet,
+%0A           
  ...props.cs
@@ -1458,12 +1458,32 @@
 .css
+%0A          %7D%0A       
  
-%7D
 %7D)
+;
 %0A   

Fix issue with missing defaultProps