import { ObjectWrapper } from 'src/types/stores/kanvaso';
import {
  COLOR_LIGHT,
  COLOR_PRIMARY,
  COLOR_DARK,
  DefaultDepth,
  DragObjectDepth,
} from '../kanbans/Const';
import { EndlessCanvas } from 'src/types/kanban_types';

const CreateItem = (
  scene: EndlessCanvas,
  card: ObjectWrapper,
  registry: Phaser.Data.DataManager,
) => {
  const item = scene.rexUI.add.label({
    //@ts-ignore

    background: scene.rexUI.add.roundRectangle({
      radius: 10,
      color: COLOR_PRIMARY,
    }),
    text: scene.add.text(0, 0, card.name, {
      fontSize: 18,
    }),
    align: 'center',
    space: {
      left: 5,
      right: 5,
      top: 5,
      bottom: 5,
    },
  });
  //@ts-ignore
  item.payload = card.name;
  SetDraggable(item);
  registry.events.on('changedata', (parent, key, data, previousData) => {
    if (data.uuid === card.uuid) {
      item.setText(data.name);
    }
  });
  return item;
};

const SetDraggable = (item): void => {
  item
    .setDraggable({
      sensor: item,
      target: item,
    })
    .on('sizer.dragstart', () => OnItemDragStart.call(item))
    .on('sizer.dragend', () => OnItemDragEnd.call(item));
};

const OnItemDragStart = function (this): void {
  this.setDepth(DragObjectDepth);
  this.getElement('background').setStrokeStyle(3, 0xff0000);
};

const OnItemDragEnd = function (this): void {
  this.setDepth(DefaultDepth);
  this.getElement('background').setStrokeStyle();
  // console.log(this);
  // console.log(this.getParentSizer());
};

export default CreateItem;
