import React from 'react';
import PropTypes from 'prop-types';
import Form from './tableParts/Form';
import MainTableForm from './tableParts/MainTableForm';
import FloatingPanel from './../Panel/FloatingPanel';

class CrudTableForm extends React.Component {
  /* componentDidMount(){
    this.props.fetchData(this.props.dataInit, this.props.branch);
  } */

  componentDidUpdate(previousProps) {
    if (previousProps.dataInit !== this.props.dataInit) {
      //console.log("en el FORM",this.props.dataInit)}
      this.props.fetchData(this.props.dataInit, this.props.branch);
    }
  }
  
  renderData(){
    this.props.dispatch(this.props.getDataAPI()).then((res) => {
      if (res) {
        this.props.fetchData(res.data, this.props.branch);  
      }
    })
  }6


  sendValues = (values) => {
    setTimeout(() => {
      this.props.submit(values, this.props.branch);
    }, 500);
    if (this.props.editingId === this.props.initValues.get('id')) {
      this.props.dispatch(this.props.editRowAPI(values)).then((res) => {
        if (res) {
            console.log("EDIT RO ", res)
        }
      })
    } else {
      this.props.dispatch(this.props.addNewAPI(values)).then((res) => {
        if (res) {
            this.renderData();
        }
      })
    }
    
  }

  getTitle( ){
    if (this.props.editingId === this.props.initValues.get(this.props.anchor[0].name)) {
      return "Editar"
    } 
    return "Añadir nuevo"
  }

  render() {
    const {
      title,
      dataTable,
      openForm,
      closeForm,
      removeRow,
      addNew,
      editRow,
      anchor,
      children,
      branch,
      initValues,
      removeRowAPI
    } = this.props;
    return (
      <div>
        
        <FloatingPanel openForm={openForm} branch={branch} closeForm={closeForm} title = {this.getTitle()}>
          <Form onSubmit={this.sendValues} initValues={initValues} branch={branch}>
            {children}
          </Form>
        </FloatingPanel>
        <MainTableForm
          title={title}
          addNew={addNew}
          items={dataTable}
          removeRow={removeRow}
          editRow={editRow}
          anchor={anchor}
          branch={branch}
          removeRowAPI={removeRowAPI}
        />
      </div>
    );
  }
}

CrudTableForm.propTypes = {
  title: PropTypes.string.isRequired,
  anchor: PropTypes.array.isRequired,
  dataInit: PropTypes.array.isRequired,
  dataTable: PropTypes.object.isRequired,
  fetchData: PropTypes.func.isRequired,
  submit: PropTypes.func.isRequired,
  addNew: PropTypes.func.isRequired,
  openForm: PropTypes.bool.isRequired,
  closeForm: PropTypes.func.isRequired,
  removeRow: PropTypes.func.isRequired,
  editRow: PropTypes.func.isRequired,
  children: PropTypes.node.isRequired,
  initValues: PropTypes.object.isRequired,
  branch: PropTypes.string.isRequired,
};

export default CrudTableForm;