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

const NewForm = () => {
  const addColumn = useMutation(({storage}, columnName) => {
    return storage.get('columns').push(new LiveObject({
      name: columnName,
      id: uniqid.time(),
      index: 9999,
    }))
  }, []) 

  function handleNewColumn(ev: FormEvent) {
    ev.preventDefault();
    const input = (ev.target as HTMLFormElement).querySelector("input");
    if(input){
      const columnName = input?.value;
      addColumn(columnName);
      input.value='';
    }      
  }



  return (
    <form onSubmit={handleNewColumn} className='max-w-xs'>
        <label className='block'>
            <span className='block'>Column name:</span>
            <input type="text" placeholder='New column' className='w-full outline-none p-2 border border-[#164863] rounded-md'/>
        </label>
        <button type="submit" className='mt-2 block w-full'>Create column</button>
    </form>
  )
}

export default NewForm