import React from 'react';
import {Well, Table, ButtonGroup, Button, DropdownButton, Modal, NavDropdown, MenuItem} from 'react-bootstrap';
import FontAwesome from 'react-fontawesome';
import ModalDetails from './ModalDetails';

/*
TableAdmin:
buttons = un arreglo de botones que tienen que pueden ser icons o dropdowns, tienen un texto, un icono y una acción
headers = un arregloque contiene las cabeceras de la tabla
nameClass= una clase
contents = un arreglo de contenidos

ObjectRow:
rows: un arreglo que contiene los campos de una fila
icons: un arreglo que contiene los iconos de una fila, se transforman en un elemento     button que accede a los datos de su fila

*/

const ObjectRow = ({  idField='id', fields = [],  item = {} , buttons = []}) => {
    const botones = buttons.filter( btn => !btn.dropdown);
    const dropdowns = buttons.filter( btn => btn.dropdown);
    return (
        <tr>
            {fields.map((field, i) => <td key={`field${i}`}>{item[field]}</td>)}
            <td>
            <ButtonGroup>
                { botones.map((btn, i) => (
                    <Button onClick={ () => btn.action( item ) }>
                        { btn.icon && <FontAwesome name={btn.icon}  />}
                        {btn.text && `${btn.text}`}
                    </Button>
                    )
                ) }
                {
                    dropdowns.length ? (
                        <DropdownButton pullRight className="select" noCaret title={<FontAwesome name={'ellipsis-h'}/>}>
                        {
                            dropdowns.map((option, i) => <MenuItem key={`option${i}`} onClick={() => option.action( item )   }><FontAwesome name={option.icon}/>{option.text}</MenuItem>)
                         }
                        </DropdownButton>
                    ) : null
                }
                </ButtonGroup>
            </td>
        </tr>
    );
};
/*
buttons = [
    {
        icon,
        text,
        classname,
        action,
        dropdown: true|false
    }
]
*/
const TableAdmin = ({ idField='id', fields = [], headers = [], buttons = [], nameClass, contents = []}) => {
    return (<Table responsive className={nameClass}>
                <thead>
                    <tr>
                        { headers.map((header, i) => <th key={`header${i}`}> {header} </th>) }
                    </tr>
                </thead>
                <tbody>
                    {
                        contents.map((content, i) => <ObjectRow idField={idField} fields={fields} item={content} buttons={buttons} /> )
                    }
                </tbody>
            </Table>
    );
};

export default TableAdmin;
-----------------------------------------------------------------------------------

import React from 'react';
import {Well, Button} from 'react-bootstrap';
import * as classnames from 'classnames';

/*Card de acciones, recibe:
buttons = un arreglo de botones que tienen los parámetros ['text, href, className']
text: un título
nameClass= una clase
contents = un arreglo de contenidos que tienen los parámetros ['text, className']
*/

const Card = ({ text = null, contents = [], className = '', ...props }) => {
    return [
        <Well {...props} className={classnames("card", className)}>
            { text && <p className="card-title">{text}</p> }
            {contents}
        </Well>
    ];
};

export default Card;


-------------------------------------------------------------------


import React from 'react';
import {Modal,Col, Row, Well, Button} from 'react-bootstrap';
import AvailableBalance from '../components/AvailableBalance';
import Card from '../components/Card';
import TableAdmin from '../components/TableAdmin';
import ModalDetails from '../components/ModalDetails';


/*sección de resumen*/

export default class Summary extends React.Component {
    state = {
        showModal: false,
        id: 0,
    };

    confirmar = item => {
        console.log(item)
        this.setState({showModal: true})
        this.setState({id: item.id})
    }

    testing = () => {
        console.log("testing here")
    }
    changeState = () => {
        this.setState({showModal: false})
    }

    render = ( ) => {
        const { showModal } = this.state;
        const { id } = this.state;
        const contentsTable = [
                    {id: 0,fecha: '2018-02-24', nombre: 'A', tipo:'Nerd', cantidad:1,comision:1.2,saldo: 500},
                    {id: 1,fecha: '2018-02-24', nombre: 'B', tipo:'Nerd', cantidad:1,comision:1.2,saldo: 500},
                    {id: 2,fecha: '2018-02-24', nombre: 'C', tipo:'Nerd', cantidad:1,comision:1.2,saldo: 500},
                    {id: 3,fecha: '2018-02-24', nombre: 'D', tipo:'Nerd', cantidad:1,comision:1.2,saldo: 500},
                ];

        const adminTable  = <TableAdmin
                    nameClass = ""
                    buttons =  {
                        [
                            {
                                icon: 'edit',
                                action: this.confirmar,
                            },
                            {
                                icon: 'trash',
                                text: 'Eliminar',
                                action: this.confirmar,
                                dropdown: true
                            },
                            {
                                icon: 'eye',
                                text: 'Eliminar',
                                action: this.confirmar,
                                dropdown: true
                            },
                            {
                                icon: 'search',
                                text: 'Eliminar',
                                action: this.confirmar,
                                dropdown: true
                            }
                        ]
                    }
                    headers = {['Fecha', 'Nombre', 'Tipo', 'Neto (Bs.F)','Comisión (Bs.F)','Saldo',]}
                    fields = {['fecha', 'nombre', 'tipo', 'cantidad','comision','saldo']}
                    contents = {
                        contentsTable
                    }
                />;

        return [

            showModal && (<ModalDetails
                    elements ={[
                        <p className="card-title">Últimas transacciones</p>,
                        <p>{contentsTable[this.state.id].nombre}</p>
                    ]}
                    buttons =  {[
                        {
                            text: 'cancelar',
                            action: this.changeState,
                        }
                    ]}
                />),

                <Col md={8} xs={12} key={"summarycol1"}>
                    <Card className="summary-table"
                            contents={[
                                <p className="card-title">Últimas transacciones</p>,
                                adminTable
                            ]}
                        />
                </Col>,

                <Col md={4} xs={12} key={"summarycol2"}>
                    <Card text={'Saldo'} className="card-available" contents={[<AvailableBalance/>]} />
                    <Card className="card-accounts" text={"Cuentas bancarias"}
                        contents={[
                            <p className="description">Descubre cómo puedes aprovechar al máximo tu cuenta DigiPagos.</p>,
                            <Button>Asociar cuenta bancaria</Button>
                        ]} />
                </Col>
        ]
    };
}