import { Trans } from "@lingui/macro";
import { motion } from "framer-motion";
import React, { useContext, useState } from "react";

import { DiscountPercentage } from "../common/Icons";
import { MIcon } from "../common/MIcon";
import { BoosterModal } from "./BoosterModal";
import { BoosterContext } from "./BoosterProvider";

export const Boosters = () => {
	const boosterContext = useContext(BoosterContext);
	const boostersEnabled = !!Object.values(boosterContext.boosters)?.filter(
		(item) => item,
	)?.length;

	const [showBoosters, setShowBoosters] = useState<boolean>(false);

	// biome-ignore format:
	const subTextStyle= `bn-font-normal bn-text-xs bn-leading-[14.4px] ${boostersEnabled ? 'bn-text-accent' : 'bn-text-secondary'}`
	return (
		<>
			<motion.div
				layout
				className="bn-flex bn-items-center bn-justify-between bn-py-2.5"
			>
				<div className="bn-flex bn-items-center">
					<div className="bn-size-9 bn-bg-layer-3 bn-mr-2 bn-rounded-full bn-flex bn-items-center bn-justify-center bn-drop-shadow-[0_0_8px_rgba(251,190,98,0.30)]">
						<DiscountPercentage />
					</div>
					<div>
						<p className="bn-text-primary bn-font-medium bn-text-base bn-mb-0.5 bn-leading-[19.2px]">
							{boostersEnabled ? (
								<Trans>Added Bungee Boosters</Trans>
							) : (
								<Trans>Add Bungee Boosters</Trans>
							)}
						</p>

						<p className={subTextStyle}>
							{boostersEnabled ? (
								<Trans>Apply coupons and add-ons to save on fees</Trans>
							) : (
								<Trans>Apply coupons and add-ons to save on fees</Trans>
							)}
						</p>
					</div>
				</div>

				<button
					className="bn-w-8 bn-h-8 bn-rounded-full bn-border-none bn-bg-layer-2 bn-flex bn-items-center bn-justify-center bn-p-0 bn-cursor-pointer bn-text-primary"
					type="button"
					onClick={() => setShowBoosters(true)}
				>
					<MIcon name="chevron_right" />
				</button>
			</motion.div>

			<BoosterModal
				isVisible={showBoosters}
				closePanel={() => setShowBoosters(false)}
			/>
		</>
	);
};
