function shouldShowDiscountBanner(): boolean {
    if (!isUserOnFreeTrial()) {
        return false;
    }

    if (doesUserHavePaymentCardAdded()) {
        return false;
    }

    // We'll use comparisons in seconds in this project
    const dateNow = Date.now() / 1000;

    // As well as UTC comparisons
    const firstDayTimestamp = new Date(`${firstDayFreeTrial} UTC`).getTime() / 1000;
    const lastDayTimestamp = new Date(`${lastDayFreeTrial} UTC`).getTime() / 1000;
    if (dateNow > lastDayTimestamp) {
        return false;
    }

    return dateNow <= firstDayTimestamp + 8 * CONST.DATE.SECONDS_PER_DAY * 1000;
}

function getEarlyDiscountInfo(firstDayFreeTrial: string) {
    const dateNow = Date.now() / 1000;
    const firstDayTimestamp = new Date(`${firstDayFreeTrial} UTC`).getTime() / 1000;

    let timeLeftInSeconds;
    const timeLeft24 = CONST.DATE.SECONDS_PER_DAY - (dateNow - firstDayTimestamp);
    if (timeLeft24 > 0) {
        timeLeftInSeconds = timeLeft24;
    } else {
        timeLeftInSeconds = firstDayTimestamp + 8 * CONST.DATE.SECONDS_PER_DAY - dateNow;
    }

    if (timeLeftInSeconds <= 0) {
        return null;
    }

    return {
        days: Math.floor(timeLeftInSeconds / CONST.DATE.SECONDS_PER_DAY),
        hours: Math.floor((timeLeftInSeconds % CONST.DATE.SECONDS_PER_DAY) / 3600),
        minutes: Math.floor((timeLeftInSeconds % 3600) / 60),
        seconds: timeLeftInSeconds % 60,
        discountType: timeLeft24 > 0 ? 50 : 25,
    };
}

function EarlyDiscountBanner({isSubscriptionPage}) {
    const {translate} = useLocalize();
    const styles = useThemeStyles();

    const [firstDayFreeTrial] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL);
    const [lastDayFreeTrial] = useOnyx(ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL);

    const initialDiscountInfo = getEarlyDiscountInfo();
    const [discountInfo, setDiscountInfo] = useState(initialDiscountInfo);
    const [isDismissed, setIsDismissed] = useState(false);

    useEffect(() => {
        const intervalID = setInterval(() => {
            setDiscountInfo(getEarlyDiscountInfo());
        }, 1000);

        return () => clearInterval(intervalID);
    }, [firstDayFreeTrial]);

    const title = isSubscriptionPage ? (
        <Text style={styles.textStrong}>
            {discountInfo?.discountType}% off your first year!&nbsp;
            <Text>Just add payment card and start an annual subscription!</Text>
        </Text>
    ) : (
        <Text style={styles.textStrong}>
            Limited time offer:&nbsp;
            <Text>{discountInfo?.discountType}% off your first year!</Text>
        </Text>
    );

    const formatTimeRemaining = useCallback(() => {
        if (discountInfo?.days === 0) {
            return `Claim within ${discountInfo?.hours}h : ${discountInfo?.minutes}m : ${discountInfo?.seconds}s`;
        }
        return `Claim within ${discountInfo?.days}d : ${discountInfo?.hours}h : ${discountInfo?.minutes}m : ${discountInfo?.seconds}s`;
    }, [discountInfo]);

    const {shouldUseNarrowLayout} = useResponsiveLayout();
    const rightComponent = useMemo(() => {
        const smallScreenStyle = shouldUseNarrowLayout ? [styles.flex0, styles.flexBasis100, styles.flexRow, styles.justifyContentCenter] : [];
        return (
            <View style={[styles.flexRow, styles.gap2, smallScreenStyle]}>
                <Button
                    success
                    text="Claim offer"
                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION)}
                />
                // Only allow dismissing the 25% discount
                {discountInfo?.discountType === 25 && (
                    <Button
                        text="No thanks"
                        onPress={() => setIsDismissed(true)}
                    />
                )}
            </View>
        );
    }, [shouldUseNarrowLayout, styles.flex0, styles.flexRow, styles.flexBasis100, styles.gap2, styles.justifyContentCenter, discountInfo]);

    if (!firstDayFreeTrial || !lastDayFreeTrial || !discountInfo) {
        return null;
    }


    // Banner is not dismissible in the subscription page
    if (isDismissed && !isSubscriptionPage) {
        return null;
    }

    return (
        <BillingBanner
            title={title}
            subtitle={formatTimeRemaining()}
            subtitleStyle={[styles.mt1, styles.mutedNormalTextLabel]}
            icon={Illustrations.TreasureChest}
            rightComponent={!isSubscriptionPage && rightComponent}
        />
    );
}

function HeaderView({report, parentReportAction, reportID, onNavigationMenuButtonClicked, ...)
    return (
        <>
            <View
                style={[shouldShowBorderBottom && styles.borderBottom]}
                dataSet={{dragArea: true}}
            >
                ...
            </View>
            // The component will be displayed either in the #admins room or concierge.
            // Depnding on which chat was used for onboarding
            {shouldShowDiscountBanner() && ReportUtils.isChatUsedForOnboarding(report) && <EarlyDiscountBanner />}
        </>
    );
}

if (SubscriptionUtils.shouldShowDiscountBanner()) {
    BillingBanner = <EarlyDiscountBanner isSubscriptionPage />;
} else if (SubscriptionUtils.shouldShowPreTrialBillingBanner()) {
    BillingBanner = <PreTrialBillingBanner />;
} else if (SubscriptionUtils.isUserOnFreeTrial()) {
    BillingBanner = <TrialStartedBillingBanner />;
} else if (SubscriptionUtils.hasUserFreeTrialEnded()) {
    BillingBanner = <TrialEndedBillingBanner />;
}