import React, { Component } from 'react';
import {Col, Row} from 'react-bootstrap';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import Sidebar from './Sidebar';
import Summary from '../pages/Summary';
import SummaryTransactions from '../pages/SummaryTransactions';
import Transactions from '../pages/Transactions';
import Requests from '../pages/Requests';
import Invoices from '../pages/Invoices';
import Help from '../pages/Help';
import Login from '../pages/Login';
import Register from '../pages/Register';
import Payments from '../pages/Payments';
import Recharges from '../pages/Recharges';
import Retreats from '../pages/Retreats';
import Profile from '../pages/Profile';
import Directory from '../pages/Directory';
import Accounts from '../pages/Accounts';
import AccountAffiliation from '../pages/AccountAffiliation';
import RequestPayment from '../pages/RequestPayment';
import SendPayment from '../pages/SendPayment';
import RequestRetreats from '../pages/RequestRetreats';
import RequestRecharges from '../pages/RequestRecharges';
import Test from '../pages/Test';


import "../styles/components/App.css";
import "../styles/index.css";

const App = () => (
    <HashRouter>
        <div>
            <Row>
                <Header/>
            </Row>
            <Row style={{marginTop: '4em'}}>
                <Col md={2} xs={12}>
                    <Sidebar/>
                </Col>
                <Col md={10} xs={12}>
                    <Switch>
                        <Route exact path="/" component={Summary}/>
                        <Route exact path="/login" component={Login}/>
                        <Route exact path="/registro" component={Register}/>
                        <Route exact path="/resumen" component={Summary}/>
                        <Route exact path="/resumen-transacciones" component={SummaryTransactions}/>
                        <Route exact path="/pagos" component={Payments}/>
                        <Route exact path="/recargas" component={Recharges}/>
                        <Route exact path="/retiros" component={Retreats}/>
                        <Route exact path="/transacciones" component={Transactions}/>
                        <Route exact path="/solicitudes" component={Requests}/>
                        <Route exact path="/facturas" component={Invoices}/>
                        <Route exact path="/ayuda" component={Help}/>
                        <Route exact path="/perfil" component={Profile}/>
                        <Route exact path="/directorio" component={Directory}/>
                        <Route exact path="/cuentas" component={Accounts}/>
                        <Route exact path="/afiliacion-cuenta" component={AccountAffiliation}/>
                        <Route exact path="/solicitar-pago" component={RequestPayment}/>
                        <Route exact path="/enviar-pago" component={SendPayment}/>
                        <Route exact path="/solicitar-retiro" component={RequestRetreats}/>
                        <Route exact path="/solicitar-recarga" component={RequestRecharges}/>
                        <Route exact path="/test" component={Test}/>
                        <Route render={() => <div className="content-page"><span>404</span></div>}/>
                    </Switch>
                </Col>
            </Row>
            <Row>
                <Footer/>
            </Row>
        </div>
    </HashRouter>
);

export default App;
----------------------------------------------------------------------------------------------------

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

/*Card de acciones, recibe:
text: un título
nameClass= una clase
contents = un arreglo de contenidos
*/

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 {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 striped 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 FontAwesome from 'react-fontawesome';
import {Nav, NavItem, Button, Tooltip, OverlayTrigger} from 'react-bootstrap';
import LinkItem from "./LinkItem";


export default class Sidebar extends React.Component {

    render = () => {
        const send = (
            <Tooltip placement="top" id="send" className="hidden-lg">
                <strong>Enviar dinero</strong>
            </Tooltip>
        );
        const request = (
            <Tooltip placement="top" id="request"  className="hidden-lg">
                <strong>Solicitar pago</strong>
            </Tooltip>
        );
        const reload = (
            <Tooltip placement="top" id="reload"  className="hidden-lg">
                <strong>Recargar</strong>
            </Tooltip>
        );
        const retire = (
            <Tooltip placement="top" id="retire"  className="hidden-lg">
                <strong>Retirar</strong>
            </Tooltip>
        );
        return (
            <div className="sidebar">
                <div className="sidebar-title hidden-xs hidden-sm">
                    <span>
                        Elige una acción
                    </span>
                    <FontAwesome
                        name='angle-down'
                        size='1x'
                    />
                </div>

                <Nav bsStyle="pills" stacked className="sidebar-menu col-xs-12 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-2">

                    <OverlayTrigger placement="top" overlay={send}>
                        <NavItem className="send-money col-xs-4 col-md-12">
                            <LinkItem extraClase="link" texto={<i>&#xe808;</i>} link="/enviar-pago"/>
                        </NavItem>
                    </OverlayTrigger>

                    <OverlayTrigger placement="top" overlay={request}>
                        <NavItem className="request-money col-xs-4 col-md-12">
                            <LinkItem extraClase="link" texto={<i>&#xe811;</i>} link="/solicitar-pago"/>
                        </NavItem>
                    </OverlayTrigger>

                    <OverlayTrigger placement="top" overlay={reload}>
                        <NavItem className="reload-money col-xs-4 col-md-12">
                            <LinkItem extraClase="link" texto={<i>&#xe80c;</i>} link="/solicitar-recarga"/>
                        </NavItem>
                    </OverlayTrigger>

                    <OverlayTrigger placement="top" overlay={retire}>
                        <NavItem className="retire-money col-xs-4 col-md-12">
                            <LinkItem extraClase="link" texto={<i>&#xe80e;</i>} link="/solicitar-retiro"/>
                        </NavItem>
                    </OverlayTrigger>

                </Nav>

                <div className="divider hidden-xs hidden-sm col-md-4 col-md-offset-4"></div>

                <Nav bsStyle="pills" stacked className="sidebar-help hidden-sm hidden-xs col-md-10 col-md-offset-0">
                    <p className="title-help">Información adicional</p>
                    <NavItem className="items-help">
                        <FontAwesome
                            className="circle-items-help"
                            name='circle'
                            size='1x'
                        />
                        <span>  ¿Cómo recibir pagos?  </span>
                    </NavItem>
                    <NavItem className="items-help">
                        <FontAwesome
                            className="circle-items-help"
                            name='circle'
                            size='1x'
                        />
                        <span>  Tarifas y comisiones  </span>
                    </NavItem>
                    <NavItem className="items-help">
                        <FontAwesome
                            className="circle-items-help"
                            name='circle'
                            size='1x'
                        />
                        <span>  Preguntas frecuentes  </span>
                    </NavItem>
                </Nav>
            </div>
        )
    };
  }



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



import React from 'react';
import {Modal, Button, ButtonGroup} from 'react-bootstrap';

/*Componente Modal
Recibe un arreglo de contenidos y uno de botones
*/

export  default class ModalDetails extends  React.Component {

    state = {
        showModal: true,
    };

    changeState = () => {
        this.setState({showModal: false})
    }

    render() {
        const {header  = [] }= this.props;
        const {elements  = [] }= this.props;
        const {buttons  = [] }= this.props;
        const {nameClass }= this.props;
        const { showModal } = this.state;

        return (
           <Modal key show={showModal} className={nameClass} >
           <Modal.Header>{header}</Modal.Header>
            <Modal.Body>{elements}</Modal.Body>
            <Modal.Footer>
                <ButtonGroup>
                    { buttons.map((btn, i) => (
                        <Button className={btn.className} onClick={ () => btn.action() }>
                            {btn.text && `${btn.text}`}
                        </Button>
                        )
                    ) }
                </ButtonGroup>
            </Modal.Footer>
        </Modal>
        )
    }
};


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


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


/*sección de solicitud de recarga*/

export default class RequestRecharges extends React.Component {

    render = ( ) => {

        return [
            <Col lg={9} md={12} xs={12} key={"summarycol1"}>
                <Card className="request-recharges-card" text={'Hacer recargas'}
                        contents={[
                            <Tabs defaultActiveKey={1} className="recharges-tabs">
                                <Tab eventKey={1} title="TDC">
                                    <RechargesCreditCard />
                                </Tab>
                                <Tab eventKey={2} title="Transferencia">
                                    <RechargesTransfer />
                                </Tab>
                            </Tabs>
                        ]}
                    />
            </Col>,

            <Col lg={3} md={12} xs={12} key={"summarycol2"}>
                <Card text={'Saldo'} className="card-available" contents={[<AvailableBalance/>]} />
                <Card className="card-last-recharges" text={"Últimas recargas"}
                    contents={[
                        <Button className={'button-recharges'}>Ver todas</Button>
                    ]} />
                <Card className="request-recharges-actions" text={"Acciones"}
                    contents={[
                        <Button className={'recharges-actions'}>Ver recargas</Button>
                    ]} />
            </Col>
        ]
    };
}
----------------------------------------------------------------------------------------------------


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


/*Sección de cuentas registradas*/

export default class Accounts 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, banco: 'A', tipoCuenta:'Nerd', nroCuenta:1},
            {id: 1, banco: 'B', tipoCuenta:'Nerd', nroCuenta:1},
            {id: 2, banco: 'C', tipoCuenta:'Nerd', nroCuenta:1},
            {id: 3, banco: 'D', tipoCuenta:'Nerd', nroCuenta:1},
        ];

        const adminTable  = <TableAdmin
            nameClass = ""
            buttons =  {
                [
                    {
                        icon: 'edit',
                        action: this.confirmar
                    },
                    {
                        icon: 'eye',
                        action: this.confirmar
                    },
                    {
                        icon: 'trash',
                        action: this.confirmar
                    },
                ]
            }
            headers = {['Banco', 'Tipo de cuenta', 'Número de cuenta', 'Acciones']}
            fields = {['banco', 'tipoCuenta', 'nroCuenta']}
            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 lg={9} md={12} xs={12} key={"summarycol1"}>
                <Card className="accounts-table" text={'Mis cuentas bancarias'}
                        contents={[
                            adminTable
                        ]}
                    />
            </Col>,

            <Col lg={3} md={12} xs={12} key={"summarycol2"}>
                <Card className="card-actions" text={"Acciones"}
                    contents={[
                        <Link to={'afiliacion-cuenta'} >
                        <Button className={'button-account'}>Agregar contacto</Button>
                        </Link>
                    ]} />
            </Col>
        ]
    };
}