import { useCallback, useEffect, useMemo, useState } from "react";
import { useTheme } from "styled-components";
import { useCountdown } from "../../../hooks/use-countdown";
import { getUtcDate } from "../../../utils/date";
var HEIGHT;
(function (HEIGHT) {
    HEIGHT["fullDesktop"] = "160px";
    HEIGHT["compactDesktop"] = "48px";
    HEIGHT["fullMobile"] = "244px";
    HEIGHT["compactMobile"] = "52px";
    HEIGHT["disabled"] = "0px";
})(HEIGHT || (HEIGHT = {}));
var CONTENT_FONT_SIZE;
(function (CONTENT_FONT_SIZE) {
    CONTENT_FONT_SIZE["compactDesktop"] = "20px";
    CONTENT_FONT_SIZE["fullMobile"] = "24px";
    CONTENT_FONT_SIZE["compactMobile"] = "16px";
})(CONTENT_FONT_SIZE || (CONTENT_FONT_SIZE = {}));
var MINOR_CONTENT_FONT_SIZE;
(function (MINOR_CONTENT_FONT_SIZE) {
    MINOR_CONTENT_FONT_SIZE["compactDesktop"] = "18px";
    MINOR_CONTENT_FONT_SIZE["fullMobile"] = "16px";
    MINOR_CONTENT_FONT_SIZE["compactMobile"] = "12px";
})(MINOR_CONTENT_FONT_SIZE || (MINOR_CONTENT_FONT_SIZE = {}));
const BASE_URL = "https://content.equilibrium.io";
const COUNTDOWN_TIMER_TAG = "COUNTDOWN_TIMER";
const isPageEnabled = (excludePages, currentPage) => !(excludePages ?? "")
    .replace(/\s/g, "")
    .toLowerCase()
    .split(",")
    .includes(currentPage);
const useBanner = ({ isMobile, cookie, background, countdownTo, enabled, promo, compact, currentPage, excludePages, hrefDesktop, hrefMobile, contentDesktopFull, contentDesktopCompact, contentMobileFull, contentMobileCompact, minorContentDesktopFull, minorContentDesktopCompact, minorContentMobileFull, minorContentMobileCompact, leftIconDesktopFull, rightIconDesktopFull, rightIconDesktopCompact, leftIconMobileFull, rightIconMobileFull, rightIconMobileCompact, }) => {
    const [isCompact, setIsCompact] = useState(compact);
    const theme = useTheme();
    const deadline = useMemo(() => getUtcDate(countdownTo), [countdownTo]);
    const countdownTimer = useCountdown(deadline);
    useEffect(() => {
        setIsCompact(compact);
    }, [compact]);
    useEffect(() => {
        if (!cookie)
            return;
        if (localStorage.getItem(cookie)) {
            setIsCompact(true);
        }
    }, [cookie]);
    const enabledOnPage = useMemo(() => {
        return enabled && isPageEnabled(excludePages, currentPage);
    }, [enabled, excludePages, currentPage]);
    const height = useMemo(() => {
        if (!enabledOnPage)
            return HEIGHT.disabled;
        if (isMobile && isCompact)
            return HEIGHT.compactMobile;
        if (isMobile && !isCompact)
            return HEIGHT.fullMobile;
        if (isCompact)
            return HEIGHT.compactDesktop;
        return HEIGHT.fullDesktop;
    }, [enabledOnPage, isCompact, isMobile]);
    const href = useMemo(() => {
        if (isMobile)
            return hrefMobile;
        return hrefDesktop;
    }, [isMobile, hrefDesktop, hrefMobile]);
    const content = useMemo(() => {
        if (isMobile && isCompact)
            return contentMobileCompact;
        if (isMobile && !isCompact)
            return contentMobileFull;
        if (!isMobile && isCompact)
            return contentDesktopCompact;
        return contentDesktopFull;
    }, [
        contentMobileFull,
        contentMobileCompact,
        contentDesktopCompact,
        contentDesktopFull,
        isMobile,
        isCompact,
    ]);
    const minorContent = useMemo(() => {
        if (isMobile && isCompact)
            return minorContentMobileCompact;
        if (isMobile && !isCompact)
            return minorContentMobileFull;
        if (!isMobile && isCompact)
            return minorContentDesktopCompact;
        return minorContentDesktopFull;
    }, [
        minorContentMobileFull,
        minorContentMobileCompact,
        minorContentDesktopCompact,
        minorContentDesktopFull,
        isMobile,
        isCompact,
    ]);
    const addCountdown = useCallback((content) => {
        if (!content)
            return;
        if (!countdownTimer)
            return content.replaceAll(COUNTDOWN_TIMER_TAG, "");
        const { days = "0", hours = "00", minutes = "00", seconds = "00", } = countdownTimer;
        return content.replaceAll(COUNTDOWN_TIMER_TAG, `${!!Number(days) ? `${days}d : ` : ""}${hours}h : ${minutes}m : ${seconds}s`);
    }, [countdownTimer]);
    const contentWithTimer = useMemo(() => {
        return addCountdown(content);
    }, [addCountdown, content]);
    const minorContentWithTimer = useMemo(() => {
        return addCountdown(minorContent);
    }, [addCountdown, minorContent]);
    const leftIconSrc = useMemo(() => {
        if (isMobile && !isCompact)
            return leftIconMobileFull?.url;
        if (!isMobile && !isCompact)
            return leftIconDesktopFull?.url;
        return undefined;
    }, [leftIconMobileFull, leftIconDesktopFull, isMobile, isCompact]);
    const rightIconSrc = useMemo(() => {
        if (isMobile && isCompact)
            return rightIconMobileCompact?.url;
        if (isMobile && !isCompact)
            return rightIconMobileFull?.url;
        if (!isMobile && isCompact)
            return rightIconDesktopCompact?.url;
        return rightIconDesktopFull?.url;
    }, [
        rightIconMobileFull,
        rightIconMobileCompact,
        rightIconDesktopCompact,
        rightIconDesktopFull,
        isMobile,
        isCompact,
    ]);
    const fontSize = useMemo(() => {
        if (!isMobile && isCompact)
            return CONTENT_FONT_SIZE.compactDesktop;
        if (isMobile && isCompact)
            return CONTENT_FONT_SIZE.compactMobile;
        if (isMobile && !isCompact)
            return CONTENT_FONT_SIZE.fullMobile;
        return undefined;
    }, [isCompact, isMobile]);
    const minorFontSize = useMemo(() => {
        if (!isMobile && isCompact)
            return MINOR_CONTENT_FONT_SIZE.compactDesktop;
        if (isMobile && isCompact)
            return MINOR_CONTENT_FONT_SIZE.compactMobile;
        if (isMobile && !isCompact)
            return MINOR_CONTENT_FONT_SIZE.fullMobile;
        return undefined;
    }, [isCompact, isMobile]);
    const textAlign = useMemo(() => {
        if (isMobile && isCompact)
            return "center";
        if (isMobile && !isCompact)
            return "center";
        if (!isMobile && isCompact)
            return "center";
        return "left";
    }, [isCompact, isMobile]);
    const minorTextAlign = useMemo(() => {
        if (isMobile && isCompact)
            return "center";
        if (isMobile && !isCompact)
            return "center";
        if (!isMobile && isCompact)
            return "center";
        return "left";
    }, [isCompact, isMobile]);
    const contentDirection = useMemo(() => {
        if (isMobile && isCompact)
            return "row";
        if (isMobile && !isCompact)
            return "column";
        if (!isMobile && isCompact)
            return "row";
        return "column";
    }, [isCompact, isMobile]);
    const contentMargin = useMemo(() => {
        if (isMobile && !isCompact)
            return "12px 0 10px 0";
        if (isMobile && isCompact)
            return "6px 0 6px 0";
        if (isCompact)
            return "0";
        return "0 0 12px 0";
    }, [isCompact, isMobile]);
    const minorContentMargin = useMemo(() => {
        if (isMobile && !isCompact)
            return "0 0 4px 0";
        if (isMobile && isCompact)
            return "0 0 4px 0";
        if (isCompact)
            return "0 0 0 40px";
        return "0";
    }, [isCompact, isMobile]);
    const handleCloseClick = useCallback((e) => {
        if (!cookie)
            return;
        e.preventDefault();
        e.stopPropagation();
        localStorage.setItem(cookie, "true");
        setIsCompact(true);
    }, [cookie]);
    const bannerBackground = useMemo(() => {
        if (background)
            return background;
        if (promo)
            return theme.new?.colors?.red700 ?? "#E6007A";
        return theme.new?.colors?.primary900 ?? "#1792FF";
    }, [promo, background, theme]);
    const justify = useMemo(() => {
        if (!isMobile && !isCompact)
            return "space-around";
        return "center";
    }, [isCompact, isMobile]);
    return {
        compact,
        enabled: enabledOnPage,
        background: bannerBackground,
        justify,
        height,
        href,
        content: contentWithTimer,
        minorContent: minorContentWithTimer,
        leftIconSrc: leftIconSrc ? `${BASE_URL}${leftIconSrc}` : undefined,
        rightIconSrc: rightIconSrc ? `${BASE_URL}${rightIconSrc}` : undefined,
        fontSize,
        minorFontSize,
        textAlign,
        minorTextAlign,
        contentDirection,
        minorContentMargin,
        contentMargin,
        handleCloseClick: isCompact ? undefined : handleCloseClick,
    };
};
export default useBanner;
//# sourceMappingURL=use-banner.js.map