import {useState} from "react";
import { createChannel } from "../services/channel.service.js";


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

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

    const token = localStorage.getItem('token');
    const userStored = localStorage.getItem('user');
    const user = userStored ? JSON.parse(userStored) : {};

    const onSubmit = async (e) => {
        e.preventDefault();

        const body = {
            "name": name,
            "description": description,
            "owner": user.id
        }

        const data = await createChannel(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 px-5 lg:px-0" >
            <div className="glassmorphism p-4 w-full lg:w-1/4" >
                <h2 className="text-2xl text-white font-montserrat font-bold" >Créer une chaine</h2>
                <label htmlFor="name" className="block text-xl text-white font-montserrat font-semibold mt-2" >Nom de la chaine</label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    placeholder="Nom de la chaine"
                    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}
                />

                <label htmlFor="description" className="block text-xl text-white font-montserrat font-semibold mt-2" >Description</label>
                <textarea
                    id="description"
                    name="description"
                    placeholder="Description de votre chaine"
                    className="block glassmorphism text-lg text-white font-inter w-full py-3 px-2 focus:outline-none"
                    onChange={(e) => setDescription(e.target.value)}
                    value={description}
                >
                </textarea>
                <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>
    )

}