Tarokka/components/Settings.tsx

'use client';

import { useState } from 'react';
import { Settings as Gear } from 'lucide-react';
import { Cinzel_Decorative } from 'next/font/google';

import { useAppContext } from '@/app/AppContext';
import BuyMeACoffee from '@/components/BuyMeACoffee';
import CopyButton from '@/components/CopyButton';
import GitHubButton from '@/components/GitHubButton';
import Scrim from '@/components/Scrim';
import Switch from '@/components/Switch';

import { LOCAL_SETTINGS, SPECTATOR_SETTINGS } from '@/constants';
import type { CardStyle, LocalSettings } from '@/types';

const cinzel = Cinzel_Decorative({
	variable: '--font-cinzel',
	subsets: ['latin'],
	weight: '400',
});

const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];

export default function Settings() {
	const [open, setOpen] = useState(false);
	const { gameData, isDM, settings, emitSettings, setLocalSettings } = useAppContext();

	const togglePermission = (key: keyof LocalSettings) => {
		if (LOCAL_SETTINGS.includes(key)) {
			setLocalSettings((prev) => ({ ...prev, [key]: !prev[key] }));
		} else if (isDM) {
			emitSettings({
				...gameData,
				settings: {
					...gameData.settings,
					[key]: !gameData.settings[key],
				},
			});
		}
	};

	const tuneRadio = (cardStyle: CardStyle) => {
		emitSettings({
			...gameData,
			settings: {
				...gameData.settings,
				cardStyle,
			},
		});
	};

	const Icon = () => (
		<button
			className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
			onClick={() => setOpen((prev) => !prev)}
		>
			<Gear className="w-5 h-5" />
		</button>
	);

	const Links = () => (
		<>
			{isDM && (
				<CopyButton
					title="Copy DM link"
					copy={`${location.origin}/${gameData.dmID}`}
					tooltip={`${location.origin}/${gameData.dmID}`}
					className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
				/>
			)}
			<CopyButton
				title="Copy Spectator link"
				copy={`${location.origin}/${gameData.spectatorID}`}
				tooltip={`${location.origin}/${gameData.spectatorID}`}
				className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
			/>
		</>
	);

	const Permissions = () => (
		<>
			{Object.entries(settings)
				.filter(([_key, value]) => typeof value === 'boolean')
				.filter(([key]) => isDM || SPECTATOR_SETTINGS.includes(key))
				.map(([key, value]) => (
					<Switch key={key} label={key} value={value} toggleAction={() => togglePermission(key)} />
				))}
		</>
	);

	const CardStyle = () =>
		isDM ? (
			<fieldset className="flex flex-col w-full">
				<div className="text-xs my-1">Card style:</div>
				<div className="inline-flex overflow-hidden rounded-md w-full">
					{cardStyleOptions.map((option, index) => (
						<label
							key={option}
							className={`flex justify-center items-center cursor-pointer w-full px-4 py-2 text-sm font-medium transition
                    ${settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
                    ${index === 0 ? 'rounded-l-md' : ''}
                    ${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
                    ${index !== 0 && 'border-l border-gray-600'}
                    border border-yellow-500 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
                  `}
						>
							<input
								type="radio"
								name="cardStyle"
								value={option}
								checked={settings.cardStyle === option}
								onChange={() => tuneRadio(option)}
								className="sr-only"
							/>
							{option}
						</label>
					))}
				</div>
			</fieldset>
		) : null;

	return (
		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
			<Scrim
				clickAction={() => setOpen((prev) => !prev)}
				className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
			>
				<div
					className={`
						fixed top-4 right-4
						flex flex-col items-center justify-evenly
						bg-slate-800 text-yellow-400
						rounded-lg border border-yellow-400
						h-full py-3 px-4
						transition-all duration-250
						${open ? `opacity-100 ${isDM ? 'w-[350px] max-h-[375px]' : 'w-[300px] max-h-[150px]'}` : 'opacity-0 w-0 max-h-0'}
					`}
				>
					<Links />
					<Permissions />
					<CardStyle />
					<span className={`w-full flex flex-row ${isDM ? 'justify-evenly' : 'justify-between'}`}>
						<GitHubButton className="h-[35px] w-[125px]" />
						<BuyMeACoffee className="h-[35px] w-[125px]" />
					</span>
				</div>
			</Scrim>
			<Icon />
		</div>
	);
}