import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Button from '../../Button/index.js'

export default class TableRow extends Component{

  static propTypes = {
    cellTypes: PropTypes.array.isRequired,
    cellValues: PropTypes.array.isRequired
  }

  static defaultProps = {
    editing: false
  }

  state = {
    editing: this.props.editing,
    cellValues: this.props.cellValues
  }

  setDefaultCellValues = () => {
    return this.props.cellTypes.map(() => {return ""})
  }

  handleChange = (e, index) => {
    let cellValues = this.state.cellValues
    cellValues[index] = e.target.value
    this.setState({cellValues})
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.setState({editing: false})
  }

  setEditing = () =>{
    this.setState({editing: true})
  }

  render(){
    
    if(this.state.editing){
      
      const cells = this.props.cellTypes.map((type, index) => {
        return(
          <div className="tableCell" key={index}>
            <input
              key={index} 
              type={type} 
              value={this.state.cellValues[index]} 
              onChange={(e) => {this.handleChange(e, index)}}
            />
          </div>
        )
      })

      return(
        <div className="tableRow">
          <form onSubmit={this.handleSubmit}>
            {cells}
            <Button
              className="round"
              type="submit"
              buttonText="save"
              backgroundColor="#05a905"
            />
          </form>
        </div>
      )

    }else{
      
      const cells = this.state.cellValues.map((value, index) => {
        return(
          <div className="tableCell" key={index}>
            <p>{value}</p>
          </div>
        )
      })

      return(
        <div className="tableRow">
          {cells}
          <Button
            className="round"
            onClick={this.setEditing}
            buttonText="edit"
            backgroundColor="#a7a6a6"
          />
        </div>
      )

    }

  }

}
@@ -194,34 +194,204 @@
     
-cellTypes: PropTypes.array
+readOnly: PropTypes.bool,%0A    editing: PropTypes.bool,%0A    cells: PropTypes.arrayOf(PropTypes.shape(%7B%0A      value: PropTypes.oneOfType(%5B%0A        PropTypes.string,%0A        PropTypes.number%0A      %5D)
 .isR
@@ -403,26 +403,22 @@
 ed,%0A    
-cellValues
+  type
 : PropTy
@@ -421,21 +421,30 @@
 opTypes.
-array
+string%0A    %7D))
 .isRequi
@@ -496,16 +496,17 @@
 g: false
+,
 %0A  %7D%0A%0A  
@@ -556,21 +556,16 @@
     cell
-Value
 s: this.
@@ -578,113 +578,15 @@
 cell
-Value
 s%0A  %7D%0A%0A
-  setDefaultCellValues = () =%3E %7B%0A    return this.props.cellTypes.map(() =%3E %7Breturn %22%22%7D)%0A  %7D%0A%0A
   ha
@@ -622,21 +622,18 @@
     
-le
+cons
 t cell
-Value
 s = 
@@ -651,38 +651,72 @@
 cell
-Values%0A    
+s.map((cell, i) =%3E %7B%0A      return i === index ? %7B...
 cell
-V
+, v
 alue
-s%5Bindex%5D =
+:
  e.t
@@ -726,16 +726,31 @@
 et.value
+%7D : cell%0A    %7D)
 %0A    thi
@@ -765,21 +765,16 @@
 te(%7Bcell
-Value
 s%7D)%0A  %7D%0A
@@ -1007,33 +1007,29 @@
 his.
-props
+state
 .cell
-Type
 s.map((
-type
+cell
 , in
@@ -1170,16 +1170,21 @@
   type=%7B
+cell.
 type%7D %0A 
@@ -1207,36 +1207,18 @@
 ue=%7B
-this.state.
 cell
-V
+.v
 alue
-s%5Bindex%5D
 %7D %0A 
@@ -1457,32 +1457,65 @@
         %3CButton%0A
+              onClick=%7B() =%3E %7B%7D%7D%0A
               cl
@@ -1744,25 +1744,19 @@
 cell
-Value
 s.map((
-value
+cell
 , in
@@ -1847,16 +1847,21 @@
     %3Cp%3E%7B
+cell.
 value%7D%3C/

Change propType requirements