import React from "react";
import { Link } from "react-router-dom";


const LinkItem = ( {texto, link, extraClase = "", faClass = "", target, onclic}) => (
    <Link
        to={link}
        className={` ${extraClase}`}
        target={target}
        onClick={onclic}
       >
        <span className={faClass}></span>
        {texto}
    </Link>
);

export default LinkItem;

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

import { applyMiddleware, createStore } from 'redux';
import { createLogger } from "redux-logger";
import promise from 'redux-promise-middleware'
import reducer from './reducers';
import thunk from 'redux-thunk';

const middleware = applyMiddleware(thunk, promise(), createLogger());

const store = createStore(
    reducer,
    middleware,
    // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;


------------------------------------------------------------------------------------------------
import Network from "../../constants/network";
import { API_URL } from "../../constants/constants";

export const getTransactions = () => (
    {
        type: "FETCH_TRANSACTIONS",
        payload: Network.GET(`${API_URL}transactions/type?sort=-date&from=2017-09-01&to=2017-09-10&description=Enrrollados&page=&per_page=`)
    }
);
------------------------------------------------------------------------------------------------
const initialState = {
    data: [],
    error: {
        message: null
    }
};



export default ( state = initialState, action)=>{
    switch (action.type) {

        case "FETCH_TRANSACTIONS_PENDING":
                return state;
        case "FETCH_TRANSACTIONS_FULFILLED":
                return {...state, data: state.data.concat(...action.payload.data)};


        default:
                return state;
    }
};
------------------------------------------------------------------------------------------------
import React from 'react';
import {Col, Row, Button, FormGroup, FormControl, ControlLabel} from 'react-bootstrap';
import FontAwesome from 'react-fontawesome';
import Card from '../components/Card';
import AvailableBalance from '../components/AvailableBalance';
import TableAdmin from '../components/TableAdmin';
import ModalDetails from '../components/ModalDetails';
import FormCustom from '../components/FormCustom';
import FileInput from 'react-simple-file-input';

import connect from "react-redux/es/connect/connect";
import {getTransactions} from "../redux/actions/TransactionsActions";



/*sección de resumen*/

class SummaryTransactions extends React.Component {
    state = {
        modalDetails: false,
        modalReport: false,
        id: 0,
    };

    openDetails = item => {
        console.log(item)
        this.setState({modalDetails: true})
        this.setState({id: item.id})
    }

    closeDetails = () => {
        this.setState({modalDetails: false})
    }

    openReport = item => {
        console.log(item)
        this.setState({modalReport: true})
        this.setState({id: item.id})
    }

    closeReport = () => {
        this.setState({modalReport: false})
    }

    render = ( ) => {
        const { modalDetails, modalReport, id } = this.state;
        const { transactions } = this.props;

        return [

            modalDetails && (<ModalDetails
                key={"modal1"}
                    elements ={[
                        <p className="card-title">Resumen de mis transacciones</p>
                    ]}
                    buttons =  {[
                        {
                            text: 'cancelar',
                            action: this.closeDetails,
                        }
                    ]}
                />),

            modalReport && (<ModalDetails
                nameClass={"summary-modal-report"}
                key={"modal2"}
                header={[<i>&#xe814;</i>, ` Reportar operación`]}
                elements ={[
                    <FormCustom type={'horizontal'}
                        className={'text-center'}
                        contents={[
                            <FormGroup controlId="formHorizontalEmail">
                                <Col componentClass={ControlLabel} sm={4}>
                                    Nro. de operación
                                </Col>
                                <Col sm={4}>
                                    <FormControl type="text" />
                                </Col>
                            </FormGroup>,

                            <FormGroup controlId="formHorizontalPassword">
                                <Col componentClass={ControlLabel} sm={4}>
                                    Asunto
                                </Col>
                                <Col sm={7}>
                                    <FormControl type="text" />
                                </Col>
                            </FormGroup>,

                            <FormGroup controlId="formHorizontalPassword">
                                <Col componentClass={ControlLabel} sm={4}>
                                    Descripción
                                </Col>
                                <Col sm={7}>
                                    <FormControl type="text" />
                                </Col>
                            </FormGroup>,

                            <FormGroup controlId="formHorizontalPassword">
                                <Col componentClass={ControlLabel} sm={4}>
                                    Adjuntar archivo
                                </Col>
                                <Col sm={8} className="input-container">
                                    <label >
                                        <FileInput
                                          readAs='binary'
                                          style={ { display : 'none' } }
                                          onLoad={this.handleFileSelected}
                                          className="input-file"
                                        />
                                        <span className="input-button"> Seleccionar archivo </span>
                                        <span className="input-name"></span>
                                    </label>
                                </Col>
                            </FormGroup>

                        ]}
                    />
                ]}
                buttons =  {[
                    {
                        text: 'Reportar',
                        className: 'transactions-summary-button',
                        action: this.closeReport,
                    }
                ]}
            />),

            <Col lg={8} md={12} xs={12} key={"summarycol1"}>
                <Card className="summary-transactions-table" text={'Resumen de mis transacciones'}
                    contents={[
                        <FormCustom type={'inline'}
                            className={'text-center'}
                            contents={[
                                <FormGroup>
                                    <ControlLabel>Desde</ControlLabel>{' '}
                                    <FormControl type="date"/>
                                    <ControlLabel>
                                        <FontAwesome
                                            className="icons hidden-xs hidden-sm"
                                            name='calendar-o'
                                            size='1x'
                                        />
                                    </ControlLabel>{' '}
                                </FormGroup>,
                                <FormGroup>
                                    <ControlLabel>Hasta</ControlLabel>{' '}
                                    <FormControl type="date"/>
                                    <ControlLabel>
                                        <FontAwesome
                                            className="icons hidden-xs hidden-sm"
                                            name='calendar-o'
                                            size='1x'
                                        />
                                    </ControlLabel>{' '}
                                </FormGroup>,
                                <FormGroup>
                                    <ControlLabel>Descripción</ControlLabel>{' '}
                                    <FormControl type="text"/>
                                </FormGroup>,
                                <Button type="submit">
                                    <FontAwesome
                                        className="icons"

                                        name='search'
                                        size='1x'
                                    />
                                </Button>
                            ]}
                        />,
                        <TableAdmin
                            nameClass = ""
                            buttons =  {
                                [
                                    {
                                        icon: 'eye',
                                        action: this.openDetails,
                                    },
                                    {
                                        icon: 'exclamation-circle',
                                        action: this.openReport,
                                    }
                                ]
                            }
                            headers = {['Fecha', 'Nombre', 'Tipo', 'Neto (Bs.F)','Monto (Bs.F)','Comisión (Bs.F)','Acciones',]}
                            fields = {['date', 'description', 'type', 'amount', 'amount', 'amount']}
                            contents = {
                                transactions
                            }
                        />,
                    ]}
                />
            </Col>,

            <Col lg={4} md={12} 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>
        ]
    };
} export default connect(
    state => {
            return {
               transactions: state.transactions.data,
               error: state.transactions.error
            }
    },
    dispatch => {
        return {
                getTransactions: _ => dispatch(getTransactions()),
        }
    },
    (stateProps, dispatchProps, ownProps) => Object.assign({}, ownProps, stateProps, {actions: dispatchProps})
)(SummaryTransactions);