import { Trans } from "@lingui/react/macro";
import { CURRENT_VERSION } from "@utils/constants";
import { useDispatch, useSelector } from "react-redux";

import { canViewFeature } from "@components/FeatureFlag/config";
import { SettingsIcon } from "@components/common/Icons";
import { toggleSettingsModal } from "../../store/settingsSlice";
import type { ReduxStateType } from "../../store/types";
import { ModalHeader } from "../common/ModalHeader";
import { SlideInPanel } from "../common/SlideInPanel";
import { LanguageSetting } from "./Language";
import { ManualModeCheckbox } from "./ManualMode";
import { NotificationCheckbox } from "./Notifications";
import { SettingsItem } from "./SettingsItem";
import { Slippage } from "./Slippage";
import { SoundCheckbox } from "./Sound";

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

	const { slippage } = useSelector((state: ReduxStateType) => state.settings);

	const settingsChanged = slippage !== "dynamic";

	return (
		<button
			className="bn-relative 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"
		>
			<SettingsIcon />
			{settingsChanged && <Indicator />}
		</button>
	);
};

const Indicator = () => {
	return (
		<span className="bn-rounded-full bn-size-2 bn-absolute bn-top-0.5 bn-right-0.5 bn-flex bn-items-center bn-justify-center bn-bg-[#FF6631]/20">
			<span className="bn-size-1.5 bn-rounded-full bn-bg-[#FF6631]" />
		</span>
	);
};

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}
			trayClasses="bn-border-none"
		>
			<ModalHeader
				closeModal={closeModal}
				label="Settings"
				subText="Customize and set preference on Bungee"
			/>
			<div className="bn-p-4">
				{/* <RoutingTypeSetting /> */}

				<Slippage />

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

				<p className="bn-text-secondary bn-text-sm bn-font-normal bn-text-center bn-mt-4 bn-w-full">
					Bungee v{CURRENT_VERSION}
				</p>
			</div>
		</SlideInPanel>
	);
};

// Excluded slippage
const settingsItems = [
	{
		label: "Language",
		icon: "language",
		actionItem: <LanguageSetting />,
		featureEnabled: true,
	},
	{
		label: "Sound",
		icon: "volume_up",
		actionItem: <SoundCheckbox />,
		featureEnabled: false,
	},
	{
		label: "Notifications",
		icon: "notifications",
		actionItem: <NotificationCheckbox />,
		featureEnabled: false,
	},
	// {
	// 	label: "Manual Mode",
	// 	icon: "auto_transmission",
	// 	actionItem: <ManualModeCheckbox />,
	// 	featureEnabled: canViewFeature("MANUAL_MODE"),
	// },
];
