import React, { PureComponent,Fragment } from 'react';
import { connect } from 'react-redux';

import * as config from '../config.js';

const DataTableTD = (props) => {
    const { tdData, columnsData,popups } = props;
    return (
        <Fragment>
            {
                columnsData.map((item,index) => {
                    return (
                    <td key={index}  >
                        {/* {tdData.get(item.get('dataKey'))}  (e) => popups(e, index) */}
                        {item.get('columnsValue')?<a onClick={(e) => popups(e)} href="#detail" data-toggle="modal" data-target="#detail">{tdData.get(item.get('dataKey'))}</a>:tdData.get(item.get('dataKey'))}
                        </td>
                    )
                })
            }
        </Fragment>
        );
}


class dataTable extends PureComponent {
    // constructor(props){
    //     super(props);
    //     this.handleColumnVisible=this.handleColumnVisible.bind(this);
    // }

    getListArea(list) {
        const { columnsData, companyList } = this.props;

        const newList = companyList;
        const pageList = [];
        let html = null;
        console.log(list); columnsData;
        if (newList.length) {
            for (let i = 0; i < newList.length; i++) {

                html = (<tr key={newList[i].DT_RowId} ></tr>);

                pageList.push(
                    <tr key={newList[i].DT_RowId}>

                        <td>123123123123123123</td>
                    </tr>

                )
            }
            console.log(pageList);
        }

        return pageList;
    }

    render() {
        const { columnsData, list,popups } = this.props;
        return (
            <div>
                <table ref={el => this.el = el} className="table table-bordered table-hover table-striped w-100">
                    {/* <thead dangerouslySetInnerHTML={{__html: this.props.thead}} />  */}
                    <thead>
                        <tr>
                            {
                                columnsData.map((item, index) => {
                                    return (<th key={index}>{item.get('columnsName')}</th>)
                                })
                            }
                        </tr>
                    </thead>
                    <tbody>

                        {

                            list.map((item) => {
                                return (
                                    <tr key={item.get('id')} >

                                        <DataTableTD tdData={item} columnsData={columnsData} popups={popups} />

                                    </tr>
                                )
                            })
                        }
                    </tbody>


                </table>

                <div className="d-flex justify-content-center">
                    <ul className="pagination pagination-sm">
                        <li className="page-item disabled">
                            <a className="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true"><i className="fal fa-chevron-left"></i></span>
                            </a>
                        </li>
                        <li className="page-item active" aria-current="page">
                            <span className="page-link">
                                1
                											<span className="sr-only">(current)</span>
                            </span>
                        </li>
                        <li className="page-item"><a className="page-link" href="#">2</a></li>
                        <li className="page-item"><a className="page-link" href="#">3</a></li>
                        <li className="page-item">
                            <a className="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true"><i className="fal fa-chevron-right"></i></span>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>
        );
    }

    componentDidMount() {

    }


}

const mapStateToProps = (state) => {
    return {
        companyList: state.getIn(['company', 'companyList']),
    }
}

const mapDispathToProps = (dispatch) => {
    return {

    }
}


export default connect(mapStateToProps, mapDispathToProps)(dataTable);
//export default dataTable;
