import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import css from 'ba-styles/Table.scss';
import DeleteIcon from '@material-ui/icons/Delete';
import EditIcon from '@material-ui/icons/BorderColor';
import { etiqueta } from 'ba-components/Odipar/common';

import { TableCell, IconButton, LinearProgress } from '@material-ui/core';
import { connect } from 'react-redux';

const styles = theme => ({
  button: {
    margin: theme.spacing(1),
  },
});

class RowReadOnly extends React.Component {
  render() {
    const {
      anchor,
      classes,
      item,
      removeRow,
      editRow,
      branch,
      removeRowAPI
    } = this.props;
    const eventDel = () => {
      removeRow(item, branch);
      this.props.dispatch(removeRowAPI(item.get('id'))).then((res) => {
        if (res) {
            console.log("REMOVE READ ONLY ", res)
        }
      })
    };
    const eventEdit = () => {
      editRow(item, branch);
    };
    const renderCell = dataArray => dataArray.map((itemCell, index) => {
      if (itemCell.name !== 'action' && !itemCell.hidden) {
        const inputType = anchor[index].type;
        switch (inputType) {
          case 'etiq_pedido':
          case 'etiq_camion':
          case 'etiq_bloqueo': 
          case 'etiq_alma':
          case 'etiq_ruta':
          case 'etiq_tipoAveria':
          case 'etiq_estadoAveria':
            return (
              <TableCell padding="none" key={index.toString()}>
                {etiqueta(inputType, item.get(itemCell.name))}
              </TableCell>
            );
          case 'texto':
            return (
              <TableCell padding="none" key={index.toString()}>
                {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''}
              </TableCell>
            );
          case 'averia_ubicacion':
            return (
              <TableCell padding="none" key={index.toString()}>
                Longitud: {item.get('longitud') !== undefined ? item.get('longitud').toString() : ''}
                {'\u00A0'} Latitud: {item.get('latitud') !== undefined ? item.get('latitud').toString() : ''}
              </TableCell>
            );
        }
      }
      return false;
    });
    return (
      <tr>
        {renderCell(anchor)}
        <TableCell padding="none">
          <IconButton
            onClick={() => eventEdit(this)}
            className={classNames((item.get('edited') ? css.hideAction : ''), classes.button)}
            aria-label="Edit"
          >
            <EditIcon />
          </IconButton>
          <IconButton
            onClick={() => eventDel(this)}
            className={classes.button}
            aria-label="Delete"
          >
            <DeleteIcon />
          </IconButton>
        </TableCell>
      </tr>
    );
  }
}

RowReadOnly.propTypes = {
  anchor: PropTypes.array.isRequired,
  classes: PropTypes.object.isRequired,
  item: PropTypes.object.isRequired,
  removeRow: PropTypes.func.isRequired,
  editRow: PropTypes.func.isRequired,
  branch: PropTypes.string.isRequired,
};
const mapDispatchToProps = dispatch => ({
  dispatch
});

const RowReadOnlyMapped = connect(
  mapDispatchToProps
)(RowReadOnly);
export default withStyles(styles)(RowReadOnlyMapped);