import React, { useState, useRef, useEffect } from 'react'; import ToggleSwitch from './ToggleSwitch'; import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'; import { Server, Wallpaper } from '../types'; import { Trash } from 'lucide-react'; import Dropdown from './Dropdown'; import { baseWallpapers } from './utils/baseWallpapers'; interface ConfigurationModalProps { onClose: () => void; onSave: (config: any) => void; currentConfig: any; } const ConfigurationModal: React.FC = ({ onClose, onSave, currentConfig }) => { const [config, setConfig] = useState({ ...currentConfig, titleSize: currentConfig.titleSize || 'medium', subtitleSize: currentConfig.subtitleSize || 'medium', alignment: currentConfig.alignment || 'middle', tileSize: currentConfig.tileSize || 'medium', horizontalAlignment: currentConfig.horizontalAlignment || 'middle', wallpaperBlur: currentConfig.wallpaperBlur || 0, wallpaperBrightness: currentConfig.wallpaperBrightness || 100, wallpaperOpacity: currentConfig.wallpaperOpacity || 100, serverWidget: { enabled: false, pingFrequency: 15, servers: [], ...currentConfig.serverWidget, }, clock: { enabled: true, size: 'medium', font: 'Helvetica', format: 'h:mm A', ...currentConfig.clock, }, }); const [activeTab, setActiveTab] = useState('general'); const [newServerName, setNewServerName] = useState(''); const [newServerAddress, setNewServerAddress] = useState(''); const [newWallpaperName, setNewWallpaperName] = useState(''); const [newWallpaperUrl, setNewWallpaperUrl] = useState(''); const [userWallpapers, setUserWallpapers] = useState([]); const menuRef = useRef(null); const fileInputRef = useRef(null); const [isVisible, setIsVisible] = useState(false); useEffect(() => { const storedUserWallpapers = localStorage.getItem('userWallpapers'); if (storedUserWallpapers) { setUserWallpapers(JSON.parse(storedUserWallpapers)); } }, []); useEffect(() => { // A small timeout to allow the component to mount before starting the transition const timer = setTimeout(() => { setIsVisible(true); }, 10); return () => clearTimeout(timer); }, []); const handleClose = () => { setIsVisible(false); setTimeout(() => { onClose(); }, 300); // This duration should match the transition duration }; const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; if (name.startsWith('serverWidget.')) { const field = name.split('.')[1]; setConfig({ ...config, serverWidget: { ...config.serverWidget, [field]: value }, }); } else if (name.startsWith('clock.')) { const field = name.split('.')[1]; setConfig({ ...config, clock: { ...config.clock, [field]: value }, }); } else { setConfig({ ...config, [name]: value }); } }; const handleClockToggleChange = (checked: boolean) => { setConfig({ ...config, clock: { ...config.clock, enabled: checked } }); }; const handleServerWidgetToggleChange = (checked: boolean) => { setConfig({ ...config, serverWidget: { ...config.serverWidget, enabled: checked }, }); }; const handleAddServer = () => { if (newServerName.trim() === '' || newServerAddress.trim() === '') return; const newServer: Server = { id: Date.now().toString(), name: newServerName, address: newServerAddress, }; setConfig({ ...config, serverWidget: { ...config.serverWidget, servers: [...config.serverWidget.servers, newServer], }, }); setNewServerName(''); setNewServerAddress(''); }; const handleRemoveServer = (id: string) => { setConfig({ ...config, serverWidget: { ...config.serverWidget, servers: config.serverWidget.servers.filter((server: Server) => server.id !== id), }, }); }; const onDragEnd = (result: any) => { if (!result.destination) return; const items = Array.from(config.serverWidget.servers); const [reorderedItem] = items.splice(result.source.index, 1); items.splice(result.destination.index, 0, reorderedItem); setConfig({ ...config, serverWidget: { ...config.serverWidget, servers: items, }, }); }; const handleAddWallpaper = () => { if (newWallpaperName.trim() === '' || newWallpaperUrl.trim() === '') return; const newWallpaper: Wallpaper = { name: newWallpaperName, url: newWallpaperUrl, }; const updatedUserWallpapers = [...userWallpapers, newWallpaper]; setUserWallpapers(updatedUserWallpapers); localStorage.setItem('userWallpapers', JSON.stringify(updatedUserWallpapers)); setConfig({ ...config, backgroundUrl: newWallpaperUrl }); setNewWallpaperName(''); setNewWallpaperUrl(''); }; const handleFileUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { if (file.size > 4 * 1024 * 1024) { alert('File size exceeds 4MB. Please choose a smaller file.'); return; } const reader = new FileReader(); reader.onload = () => { const base64 = reader.result as string; if (base64.length > 4.5 * 1024 * 1024) { alert('The uploaded image is too large. Please choose a smaller file.'); return; } const updatedUserWallpapers = userWallpapers.filter(w => !w.base64); const newWallpaper: Wallpaper = { name: file.name, base64, }; setUserWallpapers([...updatedUserWallpapers, newWallpaper]); localStorage.setItem('userWallpapers', JSON.stringify([...updatedUserWallpapers, newWallpaper])); setConfig({ ...config, backgroundUrl: base64 }); }; reader.readAsDataURL(file); } }; const handleDeleteWallpaper = (wallpaper: Wallpaper) => { const updatedUserWallpapers = userWallpapers.filter(w => w.name !== wallpaper.name); setUserWallpapers(updatedUserWallpapers); localStorage.setItem('userWallpapers', JSON.stringify(updatedUserWallpapers)); if (config.backgroundUrl === (wallpaper.url || wallpaper.base64)) { const nextWallpaper = baseWallpapers[0] || updatedUserWallpapers[0]; if (nextWallpaper) { setConfig({ ...config, backgroundUrl: nextWallpaper.url || nextWallpaper.base64 }); } } }; const allWallpapers = [...baseWallpapers, ...userWallpapers]; return ( ); }; export default ConfigurationModal;