import { Trans } from "@lingui/macro";
import React, { useContext, useEffect, useState } from "react";
import {
	type BoosterItemType,
	useFetchQuote,
} from "../../hooks/apis/useFetchQuote";
import { Button } from "../common/Button";
import { ModalHeader } from "../common/ModalHeader";
import { SlideInPanel } from "../common/SlideInPanel";
import { BoosterItem } from "./BoosterItem";
import { BoosterContext } from "./BoosterProvider";

const addOns: BoosterItemType[] = [
	{
		id: "batching",
		label: "Batching",
		description: "Get more token with 5-10 minutes swap time",
		icon: "https://media.socket.tech/lite/batching.svg",
	},
	// {
	// 	id: "refuel",
	// 	label: "Refuel",
	// 	description: "Get mall amount of Matic token",
	// 	icon: "",
	// },
];

export const BoosterModal = ({
	isVisible,
	closePanel,
}: { isVisible: boolean; closePanel: () => void }) => {
	const boosterContext = useContext(BoosterContext);
	const [activeBoosters, setBoosters] = useState<Record<string, boolean>>({});
	const { data: quoteData } = useFetchQuote();
	const coupons = quoteData?.boosters?.coupons;

	function addBooster(key: string, value: boolean) {
		setBoosters({
			...activeBoosters,
			[key]: value,
		});
	}

	const boosterSelected = Object.keys(activeBoosters)?.length > 0;

	function upliftBoosters() {
		boosterContext?.setBoosters(activeBoosters);
		closePanel();
	}

	useEffect(() => {
		isVisible && setBoosters(boosterContext.boosters);
	}, [boosterContext, isVisible]);

	return (
		<SlideInPanel
			isVisible={isVisible}
			closePanel={closePanel}
			cardClasses="bn-overflow-y-hidden"
		>
			<ModalHeader label="Add Bungee Boosters" closeModal={closePanel} />

			<div className="bn-flex bn-flex-col bn-flex-1 bn-overflow-hidden bn-px-4 bn-py-5 bn-space-y-5">
				<div className="bn-flex-1 bn-overflow-y-auto bn-space-y-4">
					{!!addOns?.length && (
						<div>
							<p className="bn-text-secondary bn-text-sm bn-font-medium">
								<Trans>Add-Ons</Trans>
							</p>

							{addOns.map((item) => {
								const { label, description, icon, id } = item;
								const isActive = !!activeBoosters?.[id];
								return (
									<BoosterItem
										label={label}
										description={description}
										active={isActive}
										setActive={(_value) => addBooster(id, _value)}
										key={label}
										icon={icon}
									/>
								);
							})}
						</div>
					)}

					{!!coupons?.length && (
						<div>
							<p className="bn-text-secondary bn-text-sm bn-font-medium">
								<Trans>Coupons</Trans>
							</p>
							{coupons.map((item) => {
								const { label, description, icon, id } = item;
								const isActive = !!activeBoosters?.[id];
								return (
									<BoosterItem
										label={label}
										description={description}
										active={isActive}
										setActive={(_value) => addBooster(id, _value)}
										icon={icon}
										key={label}
									/>
								);
							})}
						</div>
					)}
				</div>

				<div className="bn-flex-shrink-0">
					<Button
						label="Confirm Selection"
						disabled={!boosterSelected}
						onClick={upliftBoosters}
					/>
				</div>
			</div>
		</SlideInPanel>
	);
};
