import { Trans } from "@lingui/macro";
import { CURRENT_VERSION } from "@utils/constants";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import {
	enableNotifications,
	setSlippage,
	setSound,
	toggleAutoSlippage,
	toggleSettingsModal,
} from "../../store/settingsSlice";
import type { ReduxStateType } from "../../store/types";
import { MIcon } from "../common/MIcon";
import { ModalHeader } from "../common/ModalHeader";
import { RoundedCheckbox } from "../common/RoundedCheckbox";
import { Select, type SelectItem } from "../common/Select";
import { SlideInPanel } from "../common/SlideInPanel";
import { CustomSlippage } from "./CustomSlippage";
import { LanguageSetting } from "./LanguageSetting";
import { SettingsItem } from "./SettingsItem";

export const Settings = () => {
	const dispatch = useDispatch();
	function openModal() {
		dispatch(toggleSettingsModal(true));
	}

	return (
		<button
			className="bn-bg-transparent bn-h-9 bn-w-9 bn-flex bn-items-center bn-justify-center bn-border-none bn-cursor-pointer bn-text-primary"
			onClick={openModal}
			type="button"
		>
			<MIcon name="settings" />
		</button>
	);
};

export const SettingsModal = () => {
	const dispatch = useDispatch();
	const isModalOpen = useSelector(
		(state: ReduxStateType) => state.settings.isSettingsVisible,
	);
	function closeModal() {
		dispatch(toggleSettingsModal(false));
	}

	return (
		<SlideInPanel
			isVisible={isModalOpen}
			closePanel={closeModal}
			cardClasses="bn-h-full bn-relative"
		>
			<ModalHeader closeModal={closeModal} label="Settings" />
			<div className="bn-p-4">
				{/* <RoutingTypeSetting /> */}

				<h4 className="bn-text-sm bn-font-normal bn-text-secondary bn-mb-2.5">
					<Trans>Preference</Trans>
				</h4>

				{settingsItems.map((item) => (
					<SettingsItem label={item.label} key={item.label} icon={item.icon}>
						<Trans>{item.actionItem}</Trans>
					</SettingsItem>
				))}

				<span className="bn-text-secondary bn-text-sm bn-font-normal bn-text-center bn-absolute bn-bottom-4 bn-m-auto bn-left-0 bn-right-0">
					Bungee v{CURRENT_VERSION}
				</span>
			</div>
		</SlideInPanel>
	);
};

const SoundCheckbox = () => {
	const dispatch = useDispatch();
	const isSoundOn = useSelector((state: ReduxStateType) => state.settings.sound);

	function toggleSound(value: boolean) {
		dispatch(setSound(!value));
	}

	return (
		<RoundedCheckbox
			isChecked={isSoundOn}
			setIsChecked={() => toggleSound(isSoundOn)}
			id="settings-sound"
		/>
	);
};

const NotificationCheckbox = () => {
	const dispatch = useDispatch();
	const isNotificationsOn = useSelector(
		(state: ReduxStateType) => state.settings.notifications,
	);

	function toggleNotif(value: boolean) {
		dispatch(enableNotifications(value));
	}

	return (
		<RoundedCheckbox
			isChecked={isNotificationsOn}
			setIsChecked={() => toggleNotif(!isNotificationsOn)}
			id="settings-notification"
		/>
	);
};

const slippageOptions: SelectItem[] = [
	{
		id: "auto",
		label: "auto",
	},
	{
		id: "0.5",
		label: "0.5%",
	},
	{
		id: "1",
		label: "1%",
	},
];

const Slippage = () => {
	const dispatch = useDispatch();
	const currentSlippageId = useSelector(
		(state: ReduxStateType) => state.settings.slippage,
	);
	const currentSlippageItem = slippageOptions.filter(
		(item) => item.id === currentSlippageId,
	)[0];

	function setItem(_value: string) {
		const isAuto = _value === "auto";
		dispatch(toggleAutoSlippage(isAuto));
		dispatch(setSlippage(_value));
	}

	// biome-ignore format:
	const customSlippageItem = {
		id: Number(currentSlippageId),
		label: `${currentSlippageId}%`,
	};

	return (
		<Select
			items={slippageOptions}
			activeItem={currentSlippageItem ?? customSlippageItem}
			setItem={setItem}
			customItem={
				<CustomSlippage
					setItem={setItem}
					item={currentSlippageItem ? undefined : customSlippageItem}
				/>
			}
		/>
	);
};

const settingsItems = [
	{
		label: "Language",
		icon: "language",
		actionItem: <LanguageSetting />,
	},
	{
		label: "Slippage Tolerance",
		icon: "surfing",
		actionItem: <Slippage />,
	},
	{
		label: "Sound",
		icon: "volume_up",
		actionItem: <SoundCheckbox />,
	},
	{
		label: "Notifications",
		icon: "notifications",
		actionItem: <NotificationCheckbox />,
	},
];
