import type { ReduxStateType } from "@store/types";
import { useDispatch, useSelector } from "react-redux";

import { MIcon } from "@components/common/MIcon";
import { RoundedCheckbox } from "@components/common/RoundedCheckbox";
import { Tooltip } from "@components/common/Tooltip";
import { toggleSmartBatching } from "@store/settingsSlice";

export const SmartBatching = () => {
	const { smartBatching } = useSelector(
		(state: ReduxStateType) => state.settings,
	);
	const dispatch = useDispatch();

	return (
		<RoundedCheckbox
			isChecked={smartBatching}
			setIsChecked={() => dispatch(toggleSmartBatching(!smartBatching))}
			id="settings-smart-batching"
		/>
	);
};

export const SmartBatchingLabel = () => {
	const { routingMode } = useSelector(
		(state: ReduxStateType) => state.settings,
	);
	const isAuto = routingMode === "auto";
	const tooltipText = isAuto
		? "Batch approval and requests. The first tx is on-chain; others on the same network and token only need a signature."
		: "Batch approval and requests.";

	return (
		<div className="bn-flex bn-items-center bn-space-x-1">
			<span>Smart Batching</span>
			<Tooltip content={tooltipText}>
				<MIcon name="info" classNames="bn-text-secondary bn-text-base" />
			</Tooltip>
		</div>
	);
};
