import React, { useEffect, useState } from 'react'
import { connect } from "react-redux"

import {fetchEducatorListAsync, clearEducatorListErrorState, postEducatorStateAsync } from '../../../redux/dashboard/educator-list/educator-list.action'

import { MettaSvr_Common } from "../../../redux/helpers/action-enums"
import WrapperPanelComponent from "../../utility/hoc/wrapper-panel/wrapper-panel.component";
import DataTable from "../../data-table/data-table.component"
import { rowformatter, headers } from './datatable.intializers'
import {menuItems, ActionType} from './default-menu-items'
import ToastComponent from "../../utility/toast/toast.component";
import './all-educators.styles.scss'


const AllEducatorsComponent = ({ educators, loading, errorMessage, totalItems,wipIndex,isSubmitting,
    doFetchEducatorList, doClearList, doUpdateEducator
}) => {

    
    useEffect(() => {
        doFetchEducatorList()
        return () => {
            doClearList()
        }
    }, [])

    const doPageChanged = (pageNumber) => {
        doFetchEducatorList(pageNumber)
    }

    const submitEducatorStateUpdate = (actionType, userId, isActive, updateIndex) => {
        if(actionType === ActionType.VIEW_PROFILE){

        }else{
            doUpdateEducator(userId, isActive, updateIndex)
        }
    }

    return (
            <WrapperPanelComponent>
                <div>
                    <DataTable showControlsPerRow={true} 
                                rowMenu={menuItems(educators, submitEducatorStateUpdate)}
                                rowFormatters={rowformatter(educators)}
                                data={educators}
                                headers={headers}
                                isLoading={loading}
                                idField="EducatorPublicId"
                                workingAtRow={wipIndex}
                                showRowLoading={isSubmitting}
                                totalItems={totalItems}
                                itemsPerPage={ MettaSvr_Common.ITEMS_PER_PAGE }
                                onPageChangeHandler={doPageChanged}
                            />                  
                    
                { !!errorMessage ? <ToastComponent message={errorMessage} onclose={doClearList}/> : null }
            </div>
        </WrapperPanelComponent>
    )
}

const mapStateToProps = ({  educatorList}) => ({
    educators: educatorList.result,
    loading: educatorList.inProgress,
    errorMessage: educatorList.errorMessages,
    totalItems: educatorList.recordCount,
    wipIndex: educatorList.updateIndex,
    isSubmitting: educatorList.submissionInProgress,
   
})

const mapDispatchToProps = dispatch => ({
    doFetchEducatorList: (page=1) => dispatch(fetchEducatorListAsync(page)),
    doUpdateEducator: (userId, activated, indexOfRecord) => dispatch(postEducatorStateAsync({UserId: userId, IsActive: activated, indexOfRecord})),
    doClearList:() => dispatch(clearEducatorListErrorState())
})


export default connect(mapStateToProps, mapDispatchToProps)(AllEducatorsComponent)
