import React from 'react'
 
import Reserver, { Bar, useReserver, reserverReducer, createBar, getPosition, resizeBars} from 'react-reserver'
 
 
function App(){
 
   const { bars, addBar, setBars } = useReserver(reserverReducer, [])
  
    return <Reserver       
        mouseDownCell={(props) => {
            const newbar = createBar(props.dimension, props.cell);
            addBar(newbar)
        }}
 
        mouseEnterCell={(props) => {
            const nBars = resizeBar(bars, props)
            setBars(nBars)
        }}
 
        mouseUpCell={() => {  
            const dBars = bars.map((bar) => {
                if (bar.editing) {
                    return { ...bar, editing: false }
                }
                return bar;
            })
            setBars(dBars)
        }}
 
    >
        {
 
            bars.map((bar) => { return <Bar key={bar.id} {...bar} style={{ ...getPosition(bar.row, bar.column, bar.dimension) }} /> })
        }
    </Reserver>
}