import React, { useState, useEffect } from 'react';
import { HeaderV3 } from './HeaderElement/HeaderV3';
import { ADDON_REGISTRY } from './Settings/v3/addonRegistry';

const Header = () => {
    const [TimerBadge, setTimerBadge] = useState(() => window.lazytasksTimeTracker?.headerTimer || null);
    const [NavLink, setNavLink] = useState(() => window.lazytasksTimeTracker?.navLink || null);
    const [GamificationNavLink, setGamificationNavLink] = useState(() => window.lazytasksPerformance?.navLink || null);

    useEffect(() => {
        const onTimeTrackerReady = () => {
            setTimerBadge(() => window.lazytasksTimeTracker?.headerTimer || null);
            setNavLink(() => window.lazytasksTimeTracker?.navLink || null);
        };
        const onPerformanceReady = () => {
            setGamificationNavLink(() => window.lazytasksPerformance?.navLink || null);
        };

        if (!window.lazytasksTimeTracker) {
            window.addEventListener('lazytasksTimeTrackerReady', onTimeTrackerReady);
        }
        if (!window.lazytasksPerformance) {
            window.addEventListener('lazytasksPerformanceReady', onPerformanceReady);
        }
        return () => {
            window.removeEventListener('lazytasksTimeTrackerReady', onTimeTrackerReady);
            window.removeEventListener('lazytasksPerformanceReady', onPerformanceReady);
        };
    }, []);

    return (
        <div className='header'>
            <HeaderV3
                headerTimer={TimerBadge && ADDON_REGISTRY.timeTracker.status === 'released' ? <TimerBadge /> : null}
                timeTrackerNavLink={NavLink && ADDON_REGISTRY.timeTracker.status === 'released' ? <NavLink /> : null}
                performanceNavLink={GamificationNavLink && ADDON_REGISTRY.performance.status === 'released' ? <GamificationNavLink /> : null}
            />
        </div>
    );
}

export default Header;