import { useState } from "react";
import { createPlaylist } from "../services/playlist.service.js";

export default function CreatePlaylistModal({ isOpen, onClose, addAlert }) {

    const [name, setName] = useState('');

    const onSubmit = async (e) => {
        e.preventDefault();
        const token = localStorage.getItem("token");
        const body = { name };
        await createPlaylist(body, token, addAlert);
        onClose();
    };

    return isOpen && (

        <div className="bg-[#00000080] fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center" >
            <div className="glassmorphism p-4 w-1/4" >
                <h2 className="text-2xl text-white font-montserrat font-bold" >Créer une playlist</h2>
                <label htmlFor="name" className="block text-xl text-white font-montserrat font-semibold mt-2" >Nom de la playlist</label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    placeholder="Nom de la playlist"
                    className="block glassmorphism text-lg text-white font-inter w-full py-3 px-2 focus:outline-none"
                    onChange={(e) => setName(e.target.value)}
                    value={name}
                />
                <button
                    className="bg-primary mt-2 py-2 px-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer"
                    onClick={(e) => onSubmit(e) }
                >
                    Valider
                </button>
                <button
                    className="bg-red-500 ml-2 mt-2 py-2 px-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer"
                    onClick={onClose}
                >
                    Annuler
                </button>
            </div>
        </div>
    )
}