import React, { useEffect, useState } from 'react';
import { LOCALSTORAGE_SHOW_SIDEBAR_TYPE, SIDEBAR_TYPE } from '../MainWrapV4/constant';
import { useLoading } from '../LoadingProvider';
import PHXFuncGetLoggedInfo from '../Func/getLoginInfo';
export default function PHXLoadingIndicator() {
    const defaultColor = {
        from: '#CB1D63',
        to: '#621639',
    };
    const { progress } = useLoading();
    const [color, setColor] = useState(defaultColor);
    const userInfo = PHXFuncGetLoggedInfo();
    useEffect(() => {
        if (!userInfo)
            return;
        const savedSideBarType = localStorage.getItem(LOCALSTORAGE_SHOW_SIDEBAR_TYPE);
        if (savedSideBarType === SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL) {
            setColor(defaultColor);
            return;
        }
        const themeJson = localStorage.getItem(`saved_theme_${userInfo.id}`);
        if (themeJson) {
            const theme = JSON.parse(themeJson);
            setColor({
                from: theme.bgColorFrom,
                to: theme.bgColorTo,
            });
        }
    }, [progress]);
    return (React.createElement(React.Fragment, null, progress > 0 && (React.createElement("div", { className: ' fixed left-0 top-0 z-[9999] h-[3px] transition-all', style: { width: `${progress}%` } },
        React.createElement("div", { className: 'relative h-[3px] w-full', style: {
                backgroundColor: color.from,
            } },
            React.createElement("div", { className: 'absolute -right-1 -top-2.5 left-0 z-[80] h-4 rounded-r-2xl blur-[2px]', style: {
                    background: 'linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1))',
                    boxShadow: `
      0 0 10px rgba(255,255,255,1),
      0 0 30px rgba(255,255,255,0.8),
      0 0 60px rgba(255,255,255,0.6)
    `,
                } }),
            React.createElement("div", { className: 'pointer-events-none absolute right-0 h-[3px] w-full blur-[8px]', style: {
                    background: `radial-gradient(circle at right, ${color.from}, ${color.to})`,
                } }))))));
}
//# sourceMappingURL=loading-indicator.js.map