import Lottie, { type Options as LottieOptions } from "react-lottie";

import animationData from "@assets/lottie/refresh30-new.json";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { useMemo } from "react";

export const RefreshButton = ({
	onClick,
	isPaused = false,
}: {
	onClick: () => void;
	isPaused: boolean;
}) => {
	const { isLoading, isRefetching } = useActiveRoute();
	const animationOptions: LottieOptions = useMemo(() => {
		return {
			loop: !isPaused,
			autoplay: true,
			animationData: animationData,
			rendererSettings: {
				preserveAspectRatio: "xMidyMid slice",
			},
		};
	}, [isPaused]);

	const style = `bn-size-8 bn-bg-transparent bn-p-0 bn-flex bn-items-center bn-justify-center bn-cursor-pointer bn-border-[1.5px] bn-border-solid bn-border-subtle bn-rounded-full hover:bn-bg-layer-2 ${
		isLoading || isRefetching ? "bn-animate-spin" : ""
	}`;

	return (
		<button className={style} type="button" onClick={onClick}>
			<Lottie
				options={animationOptions}
				width={20}
				height={20}
				isClickToPauseDisabled
				isStopped={isRefetching || isLoading}
				isPaused={isPaused}
			/>
		</button>
	);
};
