import React, { useEffect } from 'react'
import { useParams } from "react-router-dom"
import { connect } from "react-redux"
import {  getAllUserNotifcations, updateNotificationAsync, notificationDetailClearErrors } from "../../../redux/dashboard/notification-detail/notification-detail.action";
import DataTable from "../../data-table/data-table.component"
import {rowformatter, headers} from './notification-detail.datatable.intializers'
import { menuItems } from "./default-menu-items"
import WrapperPanelComponent from "../../utility/hoc/wrapper-panel/wrapper-panel.component"
import ToastComponent from "../../utility/toast/toast.component"

import {MettaSvr_Common} from '../../../redux/helpers/action-enums'
import { getCurrentUserId, getNotificationList, getNotificationListFetchInProgress, getNotificationItempWorkInProgressIndex,
    getNotificationDetailSubmissionInProgress, getNotificationDetailSubmittedStatus, getNotificationDetailTotalItems,
    getErrorMessage
} from './selectors'
import {getIsSuperAdmin, getDoctorId} from '../../../redux/user/selectors'

import './notification-detail.styles.scss'

const NotificationDetailComponent = ({userId, result, updateNotification, wipIndex,
    doctorId, isSuperAdmin, 
    fetchNotifications, loading, isSubmitting, totalItems, submitted, errorMessage, clearError}) => {
    const { notificationType } = useParams()
    // console.log(`noti ${notificationType}`)

    useEffect(()=>{
        if(!!notificationType){
            fetchNotifications( notificationType, isSuperAdmin ? doctorId : userId)
        }
    }, [notificationType])

    const doPageChanged = (pageNumber) => {
        fetchNotifications(notificationType, isSuperAdmin ? doctorId : userId, pageNumber)
    }

    return (  
        <WrapperPanelComponent>
            <DataTable showControlsPerRow={true} 
                    rowMenu={menuItems(result, updateNotification)}
                    rowFormatters={rowformatter(result)}
                    data={result}
                    headers={headers}
                    showRowLoading={isSubmitting}
                    isLoading={loading}
                    workingAtRow={wipIndex}
                    idField="NotificationId"
                    totalItems={totalItems}
                    itemsPerPage={ MettaSvr_Common.ITEMS_PER_PAGE }
                    onPageChangeHandler={doPageChanged}
                />              
            { !!errorMessage ? 
                    <ToastComponent message={errorMessage } onclose={clearError}/> : null}     
        </WrapperPanelComponent>
    )
}
 
const mapStateToProps = state => ({
    userId: getCurrentUserId(state),
    result: getNotificationList(state),
    loading: getNotificationListFetchInProgress(state),
    wipIndex: getNotificationItempWorkInProgressIndex(state),
    
    isSubmitting: getNotificationDetailSubmissionInProgress(state),
    submitted: getNotificationDetailSubmittedStatus(state),
    totalItems: getNotificationDetailTotalItems(state),
    errorMessage: getErrorMessage(state),
    isSuperAdmin: getIsSuperAdmin(state),
    doctorId: getDoctorId(state)
})

const mapDispatchToProps = dispatch => ({
    fetchNotifications: (notificationType, userId, page = 1) => dispatch(getAllUserNotifcations(notificationType, userId, page)),
    updateNotification: (notificationId, isRead, isDeleted, indexOfRecord, deletionRequest) => dispatch(updateNotificationAsync({
        notificationId, IsRead: isRead, IsDelete: isDeleted, indexOfRecord, deletionRequest
    })),
    clearError: () => dispatch(notificationDetailClearErrors())
})


export default connect(mapStateToProps, mapDispatchToProps)(NotificationDetailComponent)