import Lottie from "react-lottie";

import { Rays } from "@components/common/Icons";
import { TokenIcon } from "@components/common/TokenIcon";

import searchAnimationData from "@assets/lottie/inflight/confetti.json";
import { RefuelInfo } from "@components/Review/ReviewSection";
import { MIcon } from "@components/common/MIcon";
import { Tooltip } from "@components/common/Tooltip";
import type { AutoRefuel, ManualRefuel } from "@hooks/apis/common/quote/types";
import { getTimeInMins } from "@utils/getTimeInMins";

const confettiOptions = {
	loop: false,
	autoplay: true,
	animationData: searchAnimationData,
	renderSettings: {
		preserveAspectRatio: "xMidyMid slice",
	},
};

export const CompletedState = ({
	tokenUrl,
	time,
	refuel,
}: {
	tokenUrl: string;
	time?: number;
	refuel: ManualRefuel | AutoRefuel | null;
}) => {
	return (
		<div className="bn-w-full bn-h-full bn-relative bn-flex bn-items-center bn-justify-center bn-overflow-hidden">
			<Rays className="bn-absolute bn-left-0 bn-top-0 bn-w-full bn-h-full" />
			<TokenIcon url={tokenUrl} classNames="bn-size-[54px]" />

			<div className="bn-absolute bn-top-0 bn-right-0 bn-overflow-hidden bn-h-full bn-w-full bn-scale-[2]">
				<Lottie options={confettiOptions} />
			</div>

			{/* time */}
			{time ? (
				<div className="bn-size-fit bn-absolute bn-right-3 bn-bottom-2">
					<span className="bn-bg-layer-1 bn-rounded-full bn-text-sm bn-aeonik-font bn-font-medium bn-text-accent-1 bn-px-2.5 bn-py-[5px]">
						{getTimeInMins(time).full}
					</span>
				</div>
			) : (
				<></>
			)}

			{/* refuel */}
			<RefuelDetail refuel={refuel} />
		</div>
	);
};

const RefuelDetail = ({
	refuel,
}: { refuel: AutoRefuel | ManualRefuel | null }) => {
	if (!refuel?.output) return <></>;

	const TooltipContent = () => {
		return (
			<div className="bn-flex bn-items-center bn-text-primary">
				<span className="bn-px-1.5">Refuel: </span> <RefuelInfo refuel={refuel} />
			</div>
		);
	};

	return (
		<div className="bn-absolute bn-bottom-2 bn-left-3 bn-w-fit bn-h-fit">
			<Tooltip content={<TooltipContent />}>
				<div className="bn-size-6 bn-rounded-full bn-flex bn-items-center bn-justify-center bn-bg-layer-2 bn-cursor-pointer">
					<MIcon name="local_gas_station" classNames="bn-text-base bn-text-theme" />
				</div>
			</Tooltip>
		</div>
	);
};
