"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = PHXLoadingIndicator;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const constant_1 = require("../MainWrapV4/constant");
const LoadingProvider_1 = require("../LoadingProvider");
const getLoginInfo_1 = tslib_1.__importDefault(require("../Func/getLoginInfo"));
function PHXLoadingIndicator() {
    const defaultColor = {
        from: '#CB1D63',
        to: '#621639',
    };
    const { progress } = (0, LoadingProvider_1.useLoading)();
    const [color, setColor] = (0, react_1.useState)(defaultColor);
    const userInfo = (0, getLoginInfo_1.default)();
    (0, react_1.useEffect)(() => {
        if (!userInfo)
            return;
        const savedSideBarType = localStorage.getItem(constant_1.LOCALSTORAGE_SHOW_SIDEBAR_TYPE);
        if (savedSideBarType === constant_1.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_1.default.createElement(react_1.default.Fragment, null, progress > 0 && (react_1.default.createElement("div", { className: ' fixed left-0 top-0 z-[9999] h-[3px] transition-all', style: { width: `${progress}%` } },
        react_1.default.createElement("div", { className: 'relative h-[3px] w-full', style: {
                backgroundColor: color.from,
            } },
            react_1.default.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_1.default.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