export interface IPage1Props {
    appContext: AppContext,
    appMode: PropTypes.numeric.isRequired,
    actions: PropTypes.object.isRequired,
    requestsList: PropTypes.object.isrequired,
}


class Page1 extends React.Component<IPage1Props, any> {
    _columns: Object[]

    constructor(props: IPage1Props, any) {
        super(props)

        this._columns = [{
            Header: 'ID',
            accessor: "id"
        }, {
            Header: 'Requestor',
            accessor: "requestor"
        }, {
            Header: 'Request Date',
            accessor: "requestDate"
        }, {
            Header: 'Last Updated',
            accessor: "lastUpdated"
        }, {
            Header: 'Locked',
            accessor:"lockedBy"
        }]
    }

    requestRaw(request, index) {
        let newDate = new Date(request.lastUpdated);
        let rDate = newDate.toISOString()
        return <div key={index}>{request.id} | {request.requestor} | {rDate} | {request.lockedBy}</div>;
    }

    render() {
        var listTitle = this.props.appMode ? 'All requests' : 'My Requests'

        var currentUsername = this.props.appContext.username
        let listText = "Loading..."
        let objList = this.props.requestsList
        let gridPageSize = Math.min(50, 5 + 5*Math.floor(objList.requests.length/5))

        let rList = this.props.appMode ? objList.requests : objList.requests.filter(request => request.requestor === currentUsername )
        listText =  rList.map(this.requestRaw)

        return (
            <Fabric className="page1-container">
                <Fabric className="page1-contentArea">
                    <h2>{listTitle}</h2>
                    {listText}

                    <ReactTable
                        showPagination={false}
                        className="-striped -highlight"
                        defaultPageSize={gridPageSize}
                        data={rList}
                        columns={this._columns}
                    />

                </Fabric>
            </Fabric>
        )
    }
}
//

const mapStateToProps = (state, ownProps) => {
    return {
        appMode: state.appMode,
        requestsList: state.requestsList,
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        actions: {
            appModeActions: bindActionCreators(appModeActions, dispatch),
            requestsActions: bindActionCreators(requestsActions, dispatch)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Page1)