120 lines
6.3 KiB
TypeScript
120 lines
6.3 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import { Button } from '../../ui/button';
|
|
import { Input } from '../../ui/input';
|
|
import { X, Lock, Globe, Users, Image as ImageIcon } from 'lucide-react';
|
|
import { useToast } from '../../../context/ToastContext';
|
|
import { Playlist } from '../../../types';
|
|
|
|
interface EditPlaylistModalProps {
|
|
playlist: Playlist;
|
|
onClose: () => void;
|
|
onSave: (data: Partial<Playlist>) => void;
|
|
onDelete: () => void;
|
|
}
|
|
|
|
export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({ playlist, onClose, onSave, onDelete }) => {
|
|
const { addToast } = useToast();
|
|
const [name, setName] = useState(playlist.title);
|
|
const [description, setDescription] = useState(playlist.description || '');
|
|
const [isPublic, setIsPublic] = useState(playlist.isPublic ?? true);
|
|
const [isCollaborative, setIsCollaborative] = useState(playlist.isCollaborative ?? false);
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
|
|
const handleSubmit = () => {
|
|
if (!name) {
|
|
addToast("Playlist name cannot be empty", "error");
|
|
return;
|
|
}
|
|
onSave({ title: name, description, isPublic, isCollaborative });
|
|
onClose();
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
onDelete();
|
|
onClose();
|
|
};
|
|
|
|
if (showDeleteConfirm) {
|
|
return (
|
|
<div className="fixed inset-0 z-[110] flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={() => setShowDeleteConfirm(false)}></div>
|
|
<div className="relative w-full max-w-sm bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl animate-scaleIn p-6 text-center">
|
|
<h3 className="text-xl font-bold text-white mb-2">Delete "{playlist.title}"?</h3>
|
|
<p className="text-sm text-gray-400 mb-6">This action cannot be undone.</p>
|
|
<div className="flex gap-3 justify-center">
|
|
<Button variant="ghost" onClick={() => setShowDeleteConfirm(false)}>Cancel</Button>
|
|
<Button variant="primary" className="bg-red-600 hover:bg-red-700 border-red-500" onClick={handleDelete}>Delete</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={onClose}></div>
|
|
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
|
|
|
|
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
|
|
<h3 className="font-bold text-white">Edit Details</h3>
|
|
<button onClick={onClose}><X className="w-5 h-5 text-gray-400 hover:text-white" /></button>
|
|
</div>
|
|
|
|
<div className="p-6 flex flex-col md:flex-row gap-6">
|
|
<div className="w-40 h-40 bg-kodo-ink border border-kodo-steel rounded-lg flex flex-col items-center justify-center relative group overflow-hidden flex-shrink-0">
|
|
<img src={playlist.coverUrl} className="w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity" />
|
|
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100">
|
|
<ImageIcon className="w-8 h-8 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-4">
|
|
<Input placeholder="Playlist Name" value={name} onChange={(e) => setName(e.target.value)} />
|
|
|
|
<textarea
|
|
className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
|
|
placeholder="Description"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
/>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between p-2 rounded hover:bg-white/5 cursor-pointer" onClick={() => setIsPublic(!isPublic)}>
|
|
<div className="flex items-center gap-3">
|
|
{isPublic ? <Globe className="w-4 h-4 text-kodo-cyan" /> : <Lock className="w-4 h-4 text-kodo-gold" />}
|
|
<div className="text-sm">
|
|
<div className="text-white font-bold">{isPublic ? 'Public' : 'Private'}</div>
|
|
</div>
|
|
</div>
|
|
<div className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-gray-600'}`}>
|
|
<div className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isPublic ? 'left-4.5' : 'left-0.5'}`}></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-2 rounded hover:bg-white/5 cursor-pointer" onClick={() => setIsCollaborative(!isCollaborative)}>
|
|
<div className="flex items-center gap-3">
|
|
<Users className={`w-4 h-4 ${isCollaborative ? 'text-kodo-lime' : 'text-gray-400'}`} />
|
|
<div className="text-sm">
|
|
<div className="text-white font-bold">Collaborative</div>
|
|
</div>
|
|
</div>
|
|
<div className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-kodo-lime' : 'bg-gray-600'}`}>
|
|
<div className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isCollaborative ? 'left-4.5' : 'left-0.5'}`}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-between items-center">
|
|
<Button variant="ghost" className="text-kodo-red hover:bg-kodo-red/10" onClick={() => setShowDeleteConfirm(true)}>Delete Playlist</Button>
|
|
<div className="flex gap-3">
|
|
<Button variant="ghost" onClick={onClose}>Cancel</Button>
|
|
<Button variant="primary" onClick={handleSubmit}>Save</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|