"use client"
import { Column, useMutation, useStorage } from "@/app/liveblocks.config"
import {default as BoardColumn} from "./Column"
import NewForm from "./forms/NewForm"
import { ReactSortable } from "react-sortablejs"
import { LiveList, LiveObject, shallow } from "@liveblocks/client"


const Columns = () => {
  const columns = useStorage(root => root.columns.map(c => ({...c})), shallow);
  const updateColumns = useMutation(({storage}, columns:LiveObject<Column>[]) => {
    storage.set('columns', new LiveList(columns))
  }, [])
  
  function setColumnsOrder(sortedColumns: Column[]){
    const newColumns:LiveObject<Column>[] = [];
    sortedColumns.forEach((sortedColumn, newIndex) => {
      const newSortedColumn = {...sortedColumn};
      newSortedColumn.index = newIndex;
      newColumns.push(new LiveObject(newSortedColumn))
    });
    updateColumns(newColumns)
  }

  if(!columns){
    return;
  }

  return (
    <div className='block lg:flex gap-4'>
      <ReactSortable group={'board-column'} list={columns} setList={setColumnsOrder} className="flex gap-4" ghostClass="opacity-40">
        {columns?.length >0 && columns.map(column => (
            <BoardColumn key={column.id} {...column} />
            )
        )}
      </ReactSortable>  
      <NewForm/>
    </div>
  )
}

export default Columns