import { ModalCloseBtn } from "@components/common/ModalHeader";
import { SlideInPanel } from "@components/common/SlideInPanel";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { setApprovalData } from "@store/approvalSlice";
import type { ReduxStateType } from "@store/types";
import { useDispatch, useSelector } from "react-redux";
import { ApprovalModalLayout } from "./layout";

export const Approval = () => {
	const dispatch = useDispatch();
	const { isVisible, approvalType } = useSelector(
		(state: ReduxStateType) => state.approval,
	);

	function closePanel() {
		dispatch(setApprovalData({ isVisible: false, data: null }));
	}

	const { data } = useActiveRoute();

	if (!data) return;

	return (
		<SlideInPanel
			isVisible={isVisible}
			closePanel={closePanel}
			cardClasses="bn-px-4 bn-py-[26px] bn-flex bn-flex-col bn-justify-center bn-h-fit"
			trayClasses="bn-h-full"
		>
			<ModalCloseBtn
				closeModal={closePanel}
				classNames="bn-absolute bn-right-4 bn-top-4"
			/>
			<ApprovalModalLayout
				token={data?.primaryInput.token}
				subtext="Approve this token once and trade gasless with just your signature."
				closePanel={closePanel}
				permit2Approval={approvalType === "permit2"}
			/>
		</SlideInPanel>
	);
};
