"use client"
import uniqid from 'uniqid'
import { Card, useMutation } from "@/app/liveblocks.config";
import { LiveObject } from "@liveblocks/client";
import { FormEvent } from "react";

const NewCardForm = ({columnId}: {columnId: string}) => {
    const addCard = useMutation(({storage}, cardName) => {
        return storage.get('cards').push(new LiveObject<Card>({
            name: cardName,
            id: uniqid.time(),
            columnId: columnId,
            index: 999,
        }))
    }, [columnId])

    function handleNewCardFormSubmit(ev: FormEvent){
        ev.preventDefault();
        const input = (ev.target as HTMLFormElement).querySelector("input");
        if(input){
            const cardName = input?.value;
            addCard(cardName)
            input.value='';
        }
    } 



  return (
    <form onSubmit={handleNewCardFormSubmit}>
        <input type="text" placeholder="card name" className='border my-2 p-1 rounded-sm bg-white w-48'/>
    </form>
  )
}

export default NewCardForm