import Konva from "konva";

export default function (width,height){
  const _width=width*0.5,_height=120

  const container=function (){
    const x=20,y=45

    const layer=new Konva.Layer({
      x:x,
      y:y,
      width:_width,
      height:_height
    })
    layer.clipFunc(function(ctx) {
      ctx.rect(0, 0, _width, _height);
    });

    const rect=new Konva.Rect({
      x:0,
      y:0,
      width:_width,
      height:_height,
      stroke:'black',
      strokeWidth:1,
    })

    layer.add(rect)

    const group=new Konva.Group({
      x:0,
      y:0,
      width:_width,
      height:_height,
      draggable: true,
      dragBoundFunc:function (pos){
        return {
          x:pos.x,
          y:y
        }
      },
    })
    layer.add(group)


    return {layer,group}
  }

  let currentWork=null;

  const getCurrentWorker=function (){
    return currentWork
  }

  const person=function (index,persons={}){

    const width=120,height=110
    const x=index*120+(index+1)*5,y=5
    const group=new Konva.Group({
      x:x,
      y:y,
      width:width,
      height:height
    })

    group.on('click touchstart',function (){
      currentWork=persons
    })

    const rect=new Konva.Rect({
      x:0,
      y:0,
      width:width,
      height:height,
      stroke:'black',
      strokeWidth:1,
    })
    group.add(rect)

    const text=new Konva.Text({
      x:0,
      y:0,
      width:width,
      height:height,
      text: persons.userName,
      align: 'center',
      verticalAlign:'middle',
      fontSize:12
    })
    group.add(text)

    return group
  }

  return{
    container,person,getCurrentWorker
  }
}