import { Dropdown } from '../Dropdown';
import React, { useEffect, useState } from 'react';
import { IconChevronRight, IconNotification, IconRemove } from '../Icon';
import { Fade } from '../Transition/Fade';
import { http } from '../../utils/http';

export interface INotifications {
  apiBaseUrl: string;
  className?: string;
  userGuid: string;
  children?: React.ReactNode;
  style?: React.CSSProperties;
  theme?: 'light' | 'dark';
  [x: string]: any;
}

export interface INotification {
  notificationID: number;
  userGuid: string;
  notificationName: string;
  recipientUserGuid: string;
  notificationTypeID: number;
  notificationURL: string;
  notificationDate: string;
}

export const Notifications: React.FC<INotifications> = (props) => {
  const { className = '', children, style, theme = 'dark', apiBaseUrl, userGuid, ...otherProps } = props;
  const [dropdownVisible, setDropdownVisible] = useState(false);
  const [count, setCount] = useState(0);
  const [countVisible, setCountVisible] = useState(false);
  const [hasError, setHasError] = useState(false);
  const [data, setData] = useState<INotification[]>([]);
  const [notificationCenterUrl, setNotificationCenterUrl] = useState("https://member.buffiniandcompany.com/notification-center");
  const [notificationCenterUrlFetched, setNotificationCenterUrlFetched] = useState(false);
  const [notificationListFetched, setNotificationListFetched] = useState(false);

  
  const notificationDropdownContentContainer = (visible: boolean): string => {
    let classList = 'b-notification-dropdown-content-container';
    if (visible) classList += ` is-fetched`;
    return classList;
  };

	async function handleGetAndSetNotificationList()
	{
		var response = await http.get(`${apiBaseUrl}/notifications/getNotificationBellList`, {
      headers: {
        userguid: userGuid,
      },
    });
		if (response != null && response.length >= 1)
		{
			setData(response);
		}
	}

  async function handleNotificationItemClick(n: INotification) {
    try {
      await http.put(`${apiBaseUrl}/notifications/dismissNotificationBellList/${n.notificationID}`, {
        headers: {
          userguid: userGuid,
        },
      });
    } catch (error) {
      await error;
      console.error({ error });
      return error;
    }
    location.href = `${n.notificationURL}`;
  }
  
  async function handleDismissNotificationClick(notifi: INotification) {
    const statusRead = -1;
    var newCount = count - 1;
    var dataFiltered = data.filter((d) => d.notificationID !== notifi.notificationID);
    let needToFetchMoreNotifications = dataFiltered.length === 1 && dataFiltered.length !== newCount;

    setData(dataFiltered);
    setCount(newCount);
    if (newCount === 0) {
      setCountVisible(false);
    }

    try {
      await http.put(`${apiBaseUrl}/notifications/updateNotificationStatus`, {
        headers: {
          userguid: userGuid,
        },
        body: {
          userGuid: notifi.userGuid,
          NotificationID: notifi.notificationID,
          StatusID: statusRead,
        },
      });

      if (needToFetchMoreNotifications) {
        await handleGetAndSetNotificationList();
      }

    } catch (error) {
      await error;
      console.error({ error });
      return error;
    }
  }

  async function handleNotificationBellClick() {
    var newDropdownVisibleState = !dropdownVisible;
    setDropdownVisible(newDropdownVisibleState);
    if (newDropdownVisibleState === false) return;
    
    try {
      await handleGetAndSetNotificationList();
      await getNotificationCenterUrl();
      setNotificationListFetched(true);
    } catch (error) {
      await error;
      console.error({ error });
      return error;
    }
  }

  async function getNotificationCenterUrl() {
    try
		{
			if (notificationCenterUrlFetched == false)
			{
				var responseNotificationCenterUrl = await http.get(`${apiBaseUrl}/notifications/getNotificationCenterUrl`);
				if (responseNotificationCenterUrl != null)
				{
					setNotificationCenterUrl(responseNotificationCenterUrl);
					setNotificationCenterUrlFetched(true);
				}
			}
		}
		catch (error)
		{
      await error;
      console.error({ error });
      return error;
		}
  }

  

  useEffect(() => {
    async function init() {
      try {
        var countResult = await http.get(`${apiBaseUrl}/notifications/getNotificationCount`, {
          headers: {
            userguid: userGuid,
          },
        });
      } catch (error) {
        await error;
        setHasError(true);
        console.error({ error });
        return error;
      }
      setCount(countResult);
      if (countResult > 0) {
        setCountVisible(true);
      }
    }
    init();
  }, []);

  if (hasError) return null;

  return (
    <Dropdown {...otherProps}>
      <Dropdown.Toggle as="span" onClick={() => handleNotificationBellClick()} className={`b-notification-toggle ${className}`}>
        <IconNotification size="xl" color={theme == 'light' ? 'primary' : 'light'} />
        {countVisible == true && (
          <div className="b-notification-count">
            {count}
          </div>
        )}
      </Dropdown.Toggle>
      <div className={notificationDropdownContentContainer(notificationListFetched)}>
        <Dropdown.Content placement="bottom" className="b-notifications-dropdown-content" onOutsideClick={() => setDropdownVisible(false)}>
          <Dropdown.Menu className="b-notification-dropdown-menu">
            <React.Fragment>
              {data.map((notifi, index) => (
                <div key={index}>
                  <Dropdown.Item id={notifi.notificationID} className="b-notification-item">
                    <div onClick={() => handleNotificationItemClick(notifi)} className="b-notification-item-title">
                      <div>{notifi.notificationName}</div>
                      {/* <div className="b-notification-item-datetime">{notifi.notificationDate}</div> */}
                    </div>
                    <div onClick={() => handleDismissNotificationClick(notifi)} className="b-notification-item-remove">
                      <IconRemove size="sm" />
                    </div>
                  </Dropdown.Item>
                </div>
              ))}
            </React.Fragment>
            <Dropdown.Item href={notificationCenterUrl} className="b-notification-item-view-all">
              View Notification Center
              <IconChevronRight size="sm" />
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown.Content>
      
      </div>
    </Dropdown>
  );
};