import React, {Component} from 'react';
import {connect} from "react-redux";

import {
    retrieveUser,
    selectionUser,
    getAllUsers
} from "../../actions/users";

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

//import { Grid, Col } from 'react-bootstrap';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import { Glyphicon, Button } from 'react-bootstrap';
import PropTypes from "prop-types";

const mapStateToProps = state => {
    console.log('mapStateToProps - USERS:', state.currentUser, 'state', state);
    return {
        //selectedUser: this.state.selectedUser
        //selectedUser: state.users,
        allUsers: state.users
    };
};

const mapDispatchToProps = dispatch => {
    // qui non penso ci vada, non ha conseguenze sul db
    return {
        selectedUser: user_id => dispatch(selectionUser(user_id)),
        fetchAllUsers: () => dispatch(getAllUsers({}))
        //userSelected: this.state.selectedUser => dispatch()
    }
    /*
    *         fetchData: () => dispatch(getAllGroups({})),
    * */
    /*
            addUser: user => dispatch(createUser(user)),
        updateUser: user => dispatch(updateUser(user.DN, user)),
        resetSelection: () => dispatch(resetSelection()),
        updateUserPassword: (id,password) => dispatch(updatePasswordUser(id,password))
    };
    * */
};
class ListUsers extends Component {

    constructor(props) {

        super(props);

        this.state = {...this.props};

        this.state = {selectedUser: null, users: []};

    }

    componentDidMount() {

        console.log('componentDidMount() - listUsers.jsx - carico i dati');
        this.props.fetchAllUsers();

    }

    render() {
        const handleClick = (event, row) => {
            console.log(event.currentTarget);
            console.log('The link was clicked ar row: ', row);
            //console.log('The link was clicked: ', event.currentTarget.getAttribute('data-key'));
            console.log(event.currentTarget.getAttribute('data-key'));
            //this.setState({...this.state, selectedUser: event.currentTarget.getAttribute('data-key')});
            this.state.selectedUser = event.currentTarget.getAttribute('data-key');
            //this.props.selectedUser = this.state.selectedUser;
            this.props.selectedUser(this.state.selectedUser);
            console.log('Stato modificato dopo il click [o l editing]: ', this.state);
        };

        const Info = (row) => (
            <FontAwesomeIcon icon="info-circle" onClick={(event, row) => handleClick(event, row)} />
        );

        const Edit = () => (
            <FontAwesomeIcon icon="pencil-alt" />
        );

        const { SearchBar } = Search;

        // <span><Glyphicon glyph="zoom-in"/>cell</span>
        {/*<Button data-key={this.props.Uid} > Info </Button>*/}
        {/*<Button data-key={this.props} onClick={(e) => handleClick(e)}> Edit </Button>*/}

        const formatWithIcon = (cell, row, d, da) => {
            console.log('formatWithIcon - cell: ', cell);
            console.log('formatWithIcon - row: ', row);
            console.log('formatWithIcon - d: ', d);
            console.log('formatWithIcon - da: ', da);
            return (
                <div>
                    {Info(row)}
                    {Edit(cell)}
                </div>
            );
        };

        const rowEvents = () => {
            onClick: {
                console.log('asdasdasdsdasdaaaaaaaaaaaaaaaaaaaa');
            };
        };

        const columns = [{
            dataField: 'Uid',
            text: 'Username',
            isKey: true
        }, {
            dataField: 'Sn',
            text: 'Sn'
        }, {
            dataField: 'asd',
            text: 'Product Price',
            formatter: formatWithIcon
        }];

        console.log('ALLUSERS:', this.props);
        return (
            <div>
                <ToolkitProvider
                    keyField="Uid"
                    data={ this.props.allUsers }
                    columns={ columns }
                    search
                >
                    {
                        props => (
                            <div>
                                <h2>Lista utenti</h2>
                                <SearchBar { ...props.searchProps } />
                                <hr />
                                <BootstrapTable
                                    { ...props.baseProps }
                                    keyField="Uid"
                                    pagination={ paginationFactory() }
                                />
                            </div>
                        )
                    }
                </ToolkitProvider>
                <ul className="users">
                    <li data-key="a" onClick={(e) => handleClick(e)}>Utente 1</li>
                </ul>
            </div>
        );
    }
}

// ListUsers.propTypes = {
//     fetchAllUsers: PropTypes.func.isRequired
//     //,groups: PropTypes.array,
//     //hasErrored: PropTypes.bool.isRequired,
//     //isLoading: PropTypes.bool.isRequired
// };

const UsersList = connect(mapStateToProps, mapDispatchToProps)(ListUsers);
export default UsersList;