import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { useParams } from "react-router-dom"
import DataTable from "../../data-table/data-table.component"
import {rowformatter, headers} from './datatable.intializers'
import { menuItems, ActionType } from "./default-menu-items"

import { decryptURIparams } from '../../utility/Utils'
import { getVisitorList, getVisitorIsFetching, getIsPatient, getErrorMessage, getSavedResult, getCurrentUserId } from '../../../redux/visitor/selectors'
import {fetchVisitorListStart, clearVisitorListState, deactivateVisitorStart, setSelectedVisitor,resetVisitorListState} from '../../../redux/visitor/visitor.action'
import ToastComponent from "../../utility/toast/toast.component"
import AddVisitorComponent from './child-views/add-visitor.component'
import WrapperPanelComponent from "../../utility/hoc/wrapper-panel/wrapper-panel.component";
import GenericModalComponent from '../../utility/hoc/modal-views/generic.modal.component'

import './all-visitor.styles.scss'

const AllVisitorComponent = (props) => {
    const {visitorList, loading, isPatient,currentUserId,  errorMessage,savedResult,
        //dispatchers
        clearAll, doFetchVisitors, doSelectedVisitor, doDeactivate,doReset,
        ...restProps} = props

    const [showAddVisitorModal, setShowAddVisitorModal ] = useState(false)
    const { patientId } = useParams()

    useEffect(() => {
        
        doFetchVisitors(decryptURIparams(patientId))
        return () =>{
            doReset()
        }
    },[])

    useEffect(() =>{
        if(!!savedResult){
            dismissAddVisitorModal()
            doFetchVisitors(decryptURIparams(patientId))
        }
    },[savedResult])

    const dismissAddVisitorModal = () => {        
        setShowAddVisitorModal(false)
        // clearAll()
    }

    const menuItemClicked = (identifier, wipIndex, actionType) => {
        if (actionType === ActionType.IS_DELETE) {
            doDeactivate(identifier)
        }else {
            doSelectedVisitor(identifier)
            setShowAddVisitorModal(true)
        }
    }

    return (
        <WrapperPanelComponent>
            <div className="tabbable-line">
                <DataTable showControlsPerRow={true} 
                    rowMenu={menuItems(visitorList, menuItemClicked)}
                    rowFormatters={rowformatter(visitorList, isPatient)}
                    data={visitorList}
                    headers={headers(isPatient)}
                    isLoading={loading}
                    idField="VisitorId"
                    totalItems={visitorList.length}
                    />  
            
                <div className="pt-4">
                    <button className="btn-login" onClick={e => setShowAddVisitorModal(true)}>+ Add Visitor</button>                                  
                </div>
            </div>
            { !!errorMessage && !showAddVisitorModal ? <ToastComponent message={errorMessage} onclose={clearAll}/> : null }

            <GenericModalComponent
                    show={showAddVisitorModal}
                    onHide={dismissAddVisitorModal}
                    title={"Add Visitor"}
                >
                  <AddVisitorComponent forPatient={isPatient ? currentUserId : decryptURIparams(patientId) }/>  
            </GenericModalComponent>
        </WrapperPanelComponent>
    
    )
}
 

const mapStateToProps = state => ({
    currentUserId: getCurrentUserId(state),
    visitorList: getVisitorList(state),
    loading: getVisitorIsFetching(state),
    isPatient: getIsPatient(state),
    errorMessage: getErrorMessage(state),
    savedResult: getSavedResult(state)
})

const mapDispatchToProps = dispatch => ({
    doFetchVisitors: (patientId) => dispatch(fetchVisitorListStart(patientId)),
    doDeactivate: (visitorId) => dispatch(deactivateVisitorStart({UserId: visitorId, IsActive: false})),
    clearAll: () => dispatch(clearVisitorListState()),
    doSelectedVisitor: (visitorId) => dispatch(setSelectedVisitor(visitorId)),
    doReset: ()=>dispatch(resetVisitorListState())
})
export default connect(mapStateToProps, mapDispatchToProps)(AllVisitorComponent)