import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {
  fetchAction,
  addAction,
  closeAction,
  submitAction,
  removeAction,
  editAction,
  closeNotifAction
} from 'ba-actions/CrudTbFrmActions';
import { CrudTableForm2, Notification } from 'ba-components';
import {
  Paper,
  RadioGroup,
} from '@material-ui/core';
import { anchorTable, dataApi } from './sampleData';
import FormPedido from './FormPedido';
//actions
import { getPedidos } from '../../../../actions/pedido';
const branch = 'crudPedido';

const renderRadioGroup = ({ input, ...rest }) => (
  <RadioGroup
    {...input}
    {...rest}
    valueselected={input.value}
    onChange={(event, value) => input.onChange(value)}
  />
);


const styles = ({
  root: {
    flexGrow: 1,
  }
});

class CrudPedido extends Component {

  render() {
    //console.log("render ps")
    const {
      classes,
      fetchData,
      addNew,
      closeForm,
      submit,
      removeRow,
      editRow,
      dataTable,
      openForm,
      initValues,
      closeNotif,
      messageNotif,
      title,
      dataReal,
      dispatch,
      editingId
    } = this.props;
    
    //console.log("render ps DATA", dataReal)
    //console.log("original", dataApi)
    
    return (
      <div>
        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
        <Paper className={classes.root}>
          <CrudTableForm2
            dataTable={dataTable}
            openForm={openForm}
            dataInit={dataReal}
            anchor={anchorTable}
            title={title}
            fetchData={fetchData}
            addNew={addNew}
            closeForm={closeForm}
            submit={submit}
            removeRow={removeRow}
            editRow={editRow}
            branch={branch}
            initValues={initValues}
            addNewAPI={getPedidos}
            removeRowAPI={getPedidos}
            editRowAPI={getPedidos}
            dispatch = {dispatch}
            editingId = {editingId}
          >
            {/* Create Your own form, then arrange or custom it as You like */}
            <FormPedido/>
            {/* No need create button or submit, because that already made in this component */}
          </CrudTableForm2>
        </Paper>
      </div>
    );
  }
}

renderRadioGroup.propTypes = {
  input: PropTypes.object.isRequired,
};

CrudPedido.propTypes = {
  dataTable: PropTypes.object.isRequired,
  openForm: PropTypes.bool.isRequired,
  classes: PropTypes.object.isRequired,
  fetchData: PropTypes.func.isRequired,
  addNew: PropTypes.func.isRequired,
  closeForm: PropTypes.func.isRequired,
  submit: PropTypes.func.isRequired,
  removeRow: PropTypes.func.isRequired,
  editRow: PropTypes.func.isRequired,
  initValues: PropTypes.object.isRequired,
  closeNotif: PropTypes.func.isRequired,
  messageNotif: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
};


const mapStateToProps = state => ({
  force: state, // force state from reducer
  initValues: state.getIn([branch, 'formValues']),
  dataTable: state.getIn([branch, 'dataTable']),
  openForm: state.getIn([branch, 'showFrm']),
  messageNotif: state.getIn([branch, 'notifMsg']),
  editingId: state.getIn([branch, 'editingId']),
  pedidosLista : state.getIn(['pedido','pedidos']),
});

const mapDispatchToProps = dispatch => ({
  fetchData: bindActionCreators(fetchAction, dispatch),
  addNew: bindActionCreators(addAction, dispatch),
  closeForm: bindActionCreators(closeAction, dispatch),
  submit: bindActionCreators(submitAction, dispatch),
  removeRow: bindActionCreators(removeAction, dispatch),
  editRow: bindActionCreators(editAction, dispatch),
  closeNotif: bindActionCreators(closeNotifAction, dispatch),
  dispatch
});

const CrudPedidoMapped = connect(
  mapStateToProps,
  mapDispatchToProps
)(CrudPedido);

export default withStyles(styles)(CrudPedidoMapped);