import React from 'react'
import { NO_OP } from 'exotic'
import {
  defaultRenderWrapper,
  defaultRenderHeaderView,
  defaultRenderListView,
} from './renderProps'
import { ShareProps, ItemProps } from './typings'
import { wording } from './fixture'
import { ShareWrapper, ShareHeader, SocialIconListContainer } from './styled'
import { shareContainer } from './container'

class Share extends React.Component<ShareProps> {
  static defaultProps = {
    className: '',
    productName: wording.productName,
    label: wording.label,
    onClick: NO_OP,
    renderWrapper: defaultRenderWrapper,
    renderHeaderView: defaultRenderHeaderView,
    renderListView: defaultRenderListView,
  }
  componentWillMount() {
    shareContainer.updateListFrom(this.props)
  }
  render() {
    const {
      renderWrapper,
      renderHeaderView,
      renderListView,
      //
      ...remainingProps
    } = this.props

    const props = { ...remainingProps, list: shareContainer.list }
    const headerView = renderHeaderView(props)
    const listView = renderListView(props)
    const children = (
      <React.Fragment>
        {headerView}
        {listView}
      </React.Fragment>
    )
    return renderWrapper({ ...props, children })
  }
}

export { Share }
export default Share