import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import { Card, Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
import ListGroup from 'reactstrap/es/ListGroup';
import ListGroupItem from 'reactstrap/es/ListGroupItem';
import { isIterableArray } from '../../helpers/utils';
import FalconCardHeader from '../common/FalconCardHeader';
import Notification from '../notification/JKNotification';

import { fetchNotifications } from '../../store/features/notificationSlice';
import { useDispatch, useSelector } from 'react-redux';
import { useAuth } from '../../context/UserAuth';

const JKNotificationDropdown = () => {
  const { currentUser, isAuthenticated } = useAuth();
  const dispatch = useDispatch();
  const notifications = useSelector(state => state.notification.notifications.slice(0, 5));

  const LIMIT = 5;
  const [page, setPage] = useState(0);

  const [isOpen, setIsOpen] = useState(false);
  const [isAllRead, setIsAllRead] = useState(false);

  // Handler
  const handleToggle = e => {
    e.preventDefault();
    setIsOpen(!isOpen);
  };

  const loadNotifications = async () => {
    try {
      const options = {
        userId: currentUser.id,
        offset: page * LIMIT,
        limit: LIMIT
      };
      await dispatch(fetchNotifications(options)).unwrap();
      //console.log('NOTIFICATIONS', notifications);
      //setPage(prev => prev + 1);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    if (isOpen) {
      loadNotifications();
    }
  }, [isOpen]);

  return (
    <>
    {isAuthenticated && 
    <Dropdown
      nav
      inNavbar
      className="mx-3"
      isOpen={isOpen}
      toggle={handleToggle}
      // onMouseOver={() => {
      //   let windowWidth = window.innerWidth;
      //   windowWidth > 992 && setIsOpen(true);
      // }}
      // onMouseLeave={() => {
      //   let windowWidth = window.innerWidth;
      //   windowWidth > 992 && setIsOpen(false);
      // }}
    >
      <DropdownToggle
        nav
        className={classNames('px-0', {
          'notification-indicator notification-indicator-primary': !isAllRead
        })}
      >
        <FontAwesomeIcon icon="bell" transform="shrink-6" className="fs-4" />
      </DropdownToggle>
      <DropdownMenu right className="dropdown-menu-card" data-testid="notificationDropdown">
        <Card className="card-notification shadow-none" style={{ maxWidth: '20rem' }}>
          <FalconCardHeader className="card-header" title="Notifications" titleTag="h6" light={false}>
            {/* <Link className="card-link font-weight-normal" to="#!">
              Mark all as read
            </Link> */}
          </FalconCardHeader>
          <ListGroup flush className="font-weight-normal fs--1">
            {isIterableArray(notifications) &&
              notifications.map(notification => (
                <ListGroupItem key={`notification-drop-item-${notification.notification_id}`} onClick={handleToggle}>
                  <Notification notification={notification} classNames="bg-200" flush />
                </ListGroupItem>
              ))}
          </ListGroup>
          <div className="card-footer text-center border-top" onClick={handleToggle}>
            <Link className="card-link d-block" to="/notifications">
              View all
            </Link>
          </div>
        </Card>
      </DropdownMenu>
    </Dropdown>
    }
    </>
  );
};

export default JKNotificationDropdown;
