import React from 'react'
import { Provider, Consumer } from './tableContext'

const omit = (obj, omitProps) =>
  Object.keys(obj)
    .filter(key => omitProps.indexOf(key) === -1)
    .reduce((returnObj, key) => ({ ...returnObj, [key]: obj[key] }), {})

const allowed = props => omit(props, ['inHeader', 'columnKey', 'headers'])

export class Table extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      headers: {},
    }
  }
  render() {
    const { headers } = this.state
    const classes = (this.props.className || '') + ' responsiveTable'
    return (
      <Provider value={headers}>
        <table {...allowed(this.props)} className={classes} />
      </Provider>
    )
  }
}

export const Thead = props => (
  <thead {...allowed(props)}>
    {React.cloneElement(props.children, { inHeader: true })}
  </thead>
)

class TrInner extends React.Component {
  constructor(props) {
    super(props)
    const { headers } = props
    if (headers && props.inHeader) {
      React.Children.map(props.children, (child, i) => {
        if (child) {
          headers[i] = child.props.children
        }
      })
    }
  }
  render() {
    const { children } = this.props
    return (
      <tr {...allowed(this.props)}>
        {children &&
          React.Children.map(
            children,
            (child, i) =>
              child &&
              React.cloneElement(child, {
                key: i,
                columnKey: i,
              })
          )}
      </tr>
    )
  }
}

export const Tr = props => (
  <Consumer>{headers => <TrInner {...props} headers={headers} />}</Consumer>
)

export const Th = props => <th {...allowed(props)} />
export const Tbody = props => <tbody {...allowed(props)} />

class TdInner extends React.Component {
  render() {
    if (this.props.colSpan) {
      return <td {...allowed(this.props)} />
    }
    const { headers, children, columnKey } = this.props
    const classes = (this.props.className || '') + ' pivoted'
    return (
      <td {...allowed(this.props)} className={classes}>
        <div className="tdBefore">{headers[columnKey]}</div>
        {children || <div>&nbsp;</div>}
      </td>
    )
  }
}

export const Td = props => (
  <Consumer>{headers => <TdInner {...props} headers={headers} />}</Consumer>
)

@@ -635,16 +635,56 @@
   %3Ctable
+%0A          data-testid=%22table%22%0A         
  %7B...all
@@ -692,32 +692,42 @@
 wed(this.props)%7D
+%0A         
  className=%7Bclas
@@ -730,16 +730,24 @@
 classes%7D
+%0A       
  /%3E%0A    
@@ -813,16 +813,36 @@
   %3Cthead
+ data-testid=%22thead%22
  %7B...all
@@ -1299,16 +1299,33 @@
      %3Ctr
+ data-testid=%22tr%22
  %7B...all
@@ -1755,16 +1755,33 @@
 s =%3E %3Cth
+ data-testid=%22th%22
  %7B...all
@@ -1832,16 +1832,36 @@
 %3E %3Ctbody
+ data-testid=%22tbody%22
  %7B...all
@@ -1972,24 +1972,41 @@
   return %3Ctd
+ data-testid=%22td%22
  %7B...allowed
@@ -2168,16 +2168,33 @@
      %3Ctd
+ data-testid=%22td%22
  %7B...all
@@ -2244,16 +2244,40 @@
     %3Cdiv
+ data-testid=%22td-before%22
  classNa
@@ -2290,16 +2290,27 @@
 Before%22%3E
+%0A          
 %7Bheaders
@@ -2321,16 +2321,25 @@
 umnKey%5D%7D
+%0A        
 %3C/div%3E%0A 

add test ids