import * as React from 'react'
import * as _ from 'lodash'
import StoreManager from './StoreManager'


export function connect(component: React.ComponentClass, storeSourceClasses: any[]): React.ComponentClass {
  const stores = storeSourceClasses.map(
    storeSourceClass => StoreManager.getStoreAndMetadataFor(storeSourceClass).store
  )

  const storeProps: {[key: string]: any} = {}
  for (let [storeSourceClass, store] of _.zip(storeSourceClasses, stores)) {
    storeProps[
      storeSourceClass.name[0].toLowerCase() + storeSourceClass.name.substring(1)
    ] = store
  }

  return class extends React.Component {
    constructor(props: any) {
      super(props)

      this.onStoreUpdate = this.onStoreUpdate.bind(this)
    }

    componentDidMount() {
      for (let storeSourceClass of storeSourceClasses) {
        StoreManager.getStoreAndMetadataFor(storeSourceClass).notifier.addListener(this.onStoreUpdate)
      }
    }

    componentWillUnmount() {
      for (let storeSourceClass of storeSourceClasses) {
        StoreManager.getStoreAndMetadataFor(storeSourceClass).notifier.removeListener(this.onStoreUpdate)
      }
    }

    render() {
      return React.createElement(component, {...storeProps, ..._.omit(this.props, 'children')}, this.props.children)
    }

    onStoreUpdate() {
      this.forceUpdate()
    }
  }
}