import React, { useEffect, useState, useRef } from 'react';
import { UserMenu } from '../UserMenu';
import { IconApps } from '../Icon';

export interface IUniversalMenu {
    fullName: string;
    membership: string;
    profileImage: string;
    logoutUrl: string;
    className?: string;
    theme?: 'dark' | 'light';
    isFeatureFlagCommunityIconOn?: boolean;
    isFeatureFlagBRNIconOn?: boolean;
    isFeatureFlagGroupsIconOn?: boolean;
    [x: string]: any;
}

export const UniversalMenu: React.FC<IUniversalMenu> = (props) => {
    const { fullName = "", membership = "", profileImage = "", logoutUrl, className, theme = "dark", isFeatureFlagCommunityIconOn = false, isFeatureFlagBRNIconOn = false, isFeatureFlagGroupsIconOn = false, ...otherProps } = props;

    // State: Menus
    const [menuVisible, setMenuVisible] = useState(false);

    // Refs
    const menuRef = useRef(null);

    // #region Functions
    const handleMenuToggle = (e: React.MouseEvent) => {
        e.preventDefault();
        setMenuVisible(!menuVisible);
    };

    function addClassNames(propClassName: string, propTheme: string) {
        let classList = 'b-universal-menu';
        if (propClassName && propClassName.length) {
            classList = `${classList} ${propClassName}`;
        }
        if (propTheme) {
            classList = `${classList} b-universal-menu-${propTheme}`;
        }
        return classList;
    }

    function hasAccessToCommunityApp(): boolean {
        return (isFeatureFlagCommunityIconOn && (membership === 'RMCore' || membership === 'RMPro' || membership === 'One2One' || membership === 'Leadership'));
    }

    function hasAccessToBRNApp(): boolean {
        return (isFeatureFlagBRNIconOn && (membership === 'RMCore' || membership === 'RMPro' || membership === 'One2One' || membership === 'Leadership'));
    }

    function hasAccessToGroupsApp(): boolean {
        return (isFeatureFlagGroupsIconOn && (membership === 'RMPro' || membership === 'One2One' || membership === 'Leadership'));
    }
    // #endregion Functions

    // #region Effects
    useEffect(() => {
        const handleClickOutside = (e: Event) => {
            if (menuRef.current.contains(e.target)) {
                return;
            } else {
                setMenuVisible(false);
            }
        };

        if (menuVisible) {
            document.addEventListener('click', handleClickOutside);
        } else {
            document.removeEventListener('click', handleClickOutside);
        }
        return () => {
            document.removeEventListener('click', handleClickOutside);
        };
    }, [menuVisible, setMenuVisible]);
    // #endregion Effects

    return (
        <div className={addClassNames(className, theme)} {...otherProps}>
            <button type="button" className="b-universal-menu-icon-container" onClick={handleMenuToggle}>
                <IconApps size="xl" color="light" />
            </button>
            <div id="universalMenu" className={`b-universal-menu-dropdown ${menuVisible ? 'visible' : ''}`} ref={menuRef}>
                <div className="b-universal-menu-user-menu-container">
                    <UserMenu fullName={fullName} membership={membership} profileImage={profileImage} logoutUrl={logoutUrl} theme={theme} />
                </div>
                <a href="https://www.buffiniandcompany.com" target="_blank" className="b-universal-menu-item">
                    <img src="https://buffiniandcompany.blob.core.windows.net/global/images/icon-5c-blue.svg" width={35} />
                    <span className="b-universal-menu-item-title">Buffini &amp; Company</span>
                </a>
                <a href="http://www.itsagoodlife.com" target="_blank" className="b-universal-menu-item">
                    <img src="https://buffiniandcompany.blob.core.windows.net/global/images/icon-podcast.svg" width={35} />
                    <span className="b-universal-menu-item-title">It's a Good Life</span>
                </a>
                <hr className="b-universal-menu-divider" />
                <a href="https://member.buffiniandcompany.com" className="b-universal-menu-item">
                    <img src="https://buffiniandcompany.blob.core.windows.net/global/images/icon-members-area.svg" width={35} />
                    <span className="b-universal-menu-item-title">Members Area</span>
                </a>
                <a href="https://referralmaker.buffiniandcompany.com" className="b-universal-menu-item">
                    <img src="https://buffiniandcompany.blob.core.windows.net/global/images/icon-referral-maker.svg" width={30} />
                    <span className="b-universal-menu-item-title">Referral Maker</span>
                </a>
                <a href="https://training.buffiniandcompany.com" className="b-universal-menu-item">
                    <img src="https://buffiniandcompany.blob.core.windows.net/global/images/icon-training.svg" width={40} />
                    <span className="b-universal-menu-item-title">Training Center</span>
                </a>
                <a href="https://realstrengths.buffiniandcompany.com" className="b-universal-menu-item">
                    <img src="https://buffiniandcompany.blob.core.windows.net/global/images/icon-real-strengths.svg" width={38} />
                    <span className="b-universal-menu-item-title">REALStrengths</span>
                </a>
                {hasAccessToCommunityApp() && (
                    <a href="https://community.buffiniandcompany.com" className="b-universal-menu-item">
                        <img src="https://buffiniandcompany.blob.core.windows.net/global/images/icon-blitz.png" width={35} />
                        <span className="b-universal-menu-item-title">BLITZ Central</span>
                    </a>
                )}
                {hasAccessToBRNApp() && (
                    <a href="https://community.buffiniandcompany.com/network" className="b-universal-menu-item">
                        <img src="https://buffiniandcompany.blob.core.windows.net/global/images/new-brn-icon.svg" width={35} />
                        <span className="b-universal-menu-item-title">Buffini Referral Network</span>
                    </a>
                )}
                {hasAccessToGroupsApp() && (
                    <a href="https://community.buffiniandcompany.com/groups" className="b-universal-menu-item">
                        <img src="https://buffiniandcompany.blob.core.windows.net/global/images/icon-groups.svg" width={35} />
                        <span className="b-universal-menu-item-title">Buffini Groups</span>
                    </a>
                )}
            </div>
        </div>
    );
};