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

import { MIcon } from "@components/common/MIcon";
import { useTheme } from "@hooks/useTheme";
import { setOriginalRoutingMode, setRoutingMode } from "@store/settingsSlice";
import { getBorderRadius } from "@utils/getBorderRadius";

const autoModeFeatures = [
	"Smart routing based on your swap preferences",
	"Optimised slippage and protection",
	"Swap any token across any chain",
	"Swap tokens with a signature only",
];

const manualModeFeatures = [
	"Manual control over routing and execution",
	"No automated refunds for some bridges",
	"Limited token pair availability",
	"Requires gas to execute transactions",
];

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

	const isAuto = routingMode === "auto";

	return (
		<div className="bn-w-full">
			<h3 className="bn-text-secondary bn-text-xs bn-font-medium bn-mb-2 bn-uppercase">
				SWAP MODE
			</h3>
			<div className="bn-flex bn-gap-2 bn-mb-4">
				<ModeButton
					isSelected={isAuto}
					onClick={() => {
						dispatch(setRoutingMode("auto"));
						dispatch(setOriginalRoutingMode(null));
					}}
					label="Auto"
					subtitle="Optimized Execution"
				/>
				<ModeButton
					isSelected={!isAuto}
					onClick={() => {
						dispatch(setRoutingMode("manual"));
						dispatch(setOriginalRoutingMode(null));
					}}
					label="Manual"
					subtitle="Custom Routing"
				/>
			</div>
			<div className="bn-flex bn-flex-col bn-space-y-[18px]">
				{(isAuto ? autoModeFeatures : manualModeFeatures).map((feature) => {
					const isManualFirstItem =
						!isAuto && feature === manualModeFeatures[0];
					const showCheck = isAuto || isManualFirstItem;

					return (
						<div key={feature} className="bn-flex bn-items-center bn-gap-2">
							<MIcon
								name={showCheck ? "check" : "cancel"}
								classNames={`bn-text-[20px] bn-flex-shrink-0 ${showCheck ? "bn-text-accent-3" : "bn-text-accent-4"}`}
							/>

							<span className="bn-text-primary bn-text-sm bn-leading-[19px] bn-font-medium">
								{feature}
							</span>
						</div>
					);
				})}
			</div>
		</div>
	);
};

type ModeButtonProps = {
	isSelected: boolean;
	onClick: () => void;
	label: string;
	subtitle: string;
};

const ModeButton = ({
	isSelected,
	onClick,
	label,
	subtitle,
}: ModeButtonProps) => {
	const theme = useTheme();

	return (
		<button
			type="button"
			onClick={onClick}
			className={`bn-border bn-border-solid bn-flex-1 bn-px-4 bn-py-3 bn-flex bn-flex-col bn-items-start bn-justify-start bn-cursor-pointer bn-transition-all ${
				isSelected
					? "bn-border-accent-1 bn-bg-layer-2"
					: "bn-border-transparent bn-bg-layer-3"
			}`}
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
		>
			<span
				className={`bn-text-base bn-font-semibold bn-mb-0.5 bn-leading-[21px] ${
					isSelected ? "bn-text-accent-1" : "bn-text-primary"
				}`}
			>
				{label}
			</span>
			<span className="bn-text-sm bn-font-medium bn-leading-[18px] bn-text-secondary">
				{subtitle}
			</span>
		</button>
	);
};
