import React from 'react'
import {Link} from 'react-router-dom'
import { NavDropdown, Badge } from 'react-bootstrap'
import './notification-popover.styles.scss'
import { dashboardComponentRoutes } from "../../inside-dashboard/all-routes"
import { MettaSvr_Common } from "../../../redux/helpers/action-enums"

const NotificationPopoverContent = ({systemCount, healthCount, workingCount, ...props}) => {

    // console.log('rendering......')
    return ( 

        <ul className="list-unstyled">
            {/* 
            //not needed for now
            <li>
                <Link to={`/dashboard/${dashboardComponentRoutes.NOTIFICATION_DETAIL.route}/${MettaSvr_Common.NotificationTypeEnum.Working}`} className="dropdown-item">
                    <div className="d-flex justify-content-between">
                        
                    <div className="mr-3">

                        <p className="task-details">Working</p>
                    </div>
                    <div>
                        <Badge pill variant="success">{workingCount}</Badge>
                        </div>
                    </div>
                </Link>
            </li>
            <NavDropdown.Divider />                     */}
            <li>
                <Link to={`/dashboard/${dashboardComponentRoutes.NOTIFICATION_DETAIL.route}/${MettaSvr_Common.NotificationTypeEnum.HealthStatus}`} className="dropdown-item">
                <div className="d-flex justify-content-between">
                
                    <div className="mr-3">

                        <p className="task-details">Health Status</p>
                    </div>
                    <div>

                        <Badge pill variant="warning">{healthCount}</Badge>
                    </div>
                    </div>
                </Link>
            </li>
            <NavDropdown.Divider />
            <li>
                <Link to={`/dashboard/${dashboardComponentRoutes.NOTIFICATION_DETAIL.route}/${MettaSvr_Common.NotificationTypeEnum.System}`} className="dropdown-item">
                <div className="d-flex justify-content-between">
                    <div className="mr-3">
                        <p className="task-details">System</p>

                    </div>
                    <div>

                    <Badge pill variant="danger">{systemCount}</Badge>
                    </div>
                    
                    </div>
                </Link>
            </li>
        </ul>    
        
        )
}

export default NotificationPopoverContent
