define([

'./api.js'

, './constData.js'

], function ( api, constData ) {

const { MapTypeToName } = api;

const { BLOCK_DIRECTION

, BLOCK_CODELINE_TYPE

, NUM_INDENT_DEPTH_PX

, NUM_SHADOWBLOCK_OPACITY

, STR_BLOCK

, STR_DIV

, STR_OPACITY

, STR_WIDTH

, STR_MARGIN_LEFT

, STR_DISPLAY

, VP_CLASS_PREFIX

, VP_CLASS_BLOCK_SHADOWBLOCK_CONTAINER

, VP_CLASS_SELECTED_SHADOWBLOCK } = constData;

var ShadowBlock = function(blockContainerThis, type, realBlock) {

this.type = type;

this.name = MapTypeToName(type);

this.direction = -1;

this.rootBlockUuid = '';

this.blockContainerThis = blockContainerThis;

this.width = blockContainerThis.getBlockMaxWidth();

this.realBlock = realBlock;

this.rootDepth = 0;

this.rootDom = null;

this.containerDom = null;

this.selectBlock = null;

this.childListDom = null;

this.childBlockList = [];

this.init();

}

ShadowBlock.prototype.init = function() {

var blockContainerThis = this.blockContainerThis;

/** root container 생성 */

var shadowContainerDom = document.createElement(STR_DIV);

$(shadowContainerDom).css(STR_DISPLAY,STR_BLOCK);

$(shadowContainerDom).addClass(VP_CLASS_BLOCK_SHADOWBLOCK_CONTAINER);

$(shadowContainerDom).addClass(VP_CLASS_SELECTED_SHADOWBLOCK);

/** 블럭을 이동할 때 */

if (this.realBlock) {

this.childListDom = [];

this.childBlockList = this.realBlock.getBlockList_thisBlockArea();

/* 첫번째 블럭이 node 블럭이고

* toggle 된 상태면 두번째 이후 블럭 생성 안함

*/

if (this.realBlock.getBlockType() == BLOCK_CODELINE_TYPE.NODE

|| this.realBlock.getBlockType() == BLOCK_CODELINE_TYPE.TEXT

|| this.realBlock.isGroupBox) {

var blockMainDom = blockContainerThis.makeShadowBlockDom(this.realBlock);

$(blockMainDom).css(STR_OPACITY, NUM_SHADOWBLOCK_OPACITY);

this.childListDom.push(blockMainDom);

$(shadowContainerDom).append(blockMainDom);

} else {

this.childBlockList.forEach(block => {

var blockMainDom = blockContainerThis.makeShadowBlockDom(block);

$(blockMainDom).css(STR_OPACITY, NUM_SHADOWBLOCK_OPACITY);

this.childListDom.push(blockMainDom);

$(shadowContainerDom).append(blockMainDom);

});

}

/** Logic(Define, Control, Execute) 이동할 때 */

} else {

this.childListDom = [];

var blockMainDom = blockContainerThis.makeShadowBlockDom(this);

$(blockMainDom).css(STR_OPACITY, NUM_SHADOWBLOCK_OPACITY);

this.childListDom.push(blockMainDom);

$(shadowContainerDom).append(blockMainDom);

}

this.setBlockContainerDom(shadowContainerDom);

}

ShadowBlock.prototype.reRender = function() {

var rootDepth = this.getRootDepth();

var blockMaxWidth = this.blockContainerThis.getBlockMaxWidth();

/** 블럭을 이동할 때 */

if (this.realBlock) {

var firstShadowDomDepth = this.childBlockList[0].getDepth();

this.childListDom.forEach( (childDom, index) => {

var childBlockDepth = this.childBlockList[index].getDepth();

var _childBlockDepth = childBlockDepth - firstShadowDomDepth + rootDepth;

var blockwidth = blockMaxWidth - (_childBlockDepth * NUM_INDENT_DEPTH_PX);

$(childDom).css(STR_WIDTH, blockwidth );

$(childDom).css(STR_MARGIN_LEFT, _childBlockDepth * NUM_INDENT_DEPTH_PX);

});

/** Logic(Define, Control, Execute) 이동할 때 */

} else {

this.childListDom.forEach( (childDom) => {

var blockwidth = blockMaxWidth - (rootDepth * NUM_INDENT_DEPTH_PX);

$(childDom).css(STR_WIDTH, blockwidth);

$(childDom).css(STR_MARGIN_LEFT, rootDepth * NUM_INDENT_DEPTH_PX);

});

}

}

/** Logic(Define, Control, Execute)이나 블럭이 이동할 때,

* shadow를 생성하고 그 shadow를 block container dom에 insert하는 메소드

*/

ShadowBlock.prototype.insertShadowDomToBlockDom = function( thisBlock, direction, asGroup=false) {

// var thisBlock = this;

// console.log('depth',depth);

var blockContainerThis = this.getBlockContainerThis();

var depth = thisBlock.getDepth();

var indentPxNum = thisBlock.getIndentNumber();

if (direction == BLOCK_DIRECTION.INDENT) {

indentPxNum += NUM_INDENT_DEPTH_PX;

depth++;

}

var blockMaxWidth = blockContainerThis.getBlockMaxWidth() - indentPxNum;

var shadowContainerDom = this.getBlockContainerDom();

$(shadowContainerDom).css(STR_WIDTH, blockMaxWidth);

$(shadowContainerDom).css(STR_DISPLAY,STR_BLOCK);

// show line number for group block's shadow

// if (asGroup) {

// $(shadowContainerDom).first('.vp-block-num-info').css(STR_OPACITY, 1);

// } else {

// $(shadowContainerDom).first('.vp-block-num-info').css(STR_OPACITY, 0);

// }

this.setSelectBlock(thisBlock);

this.setRootDepth(depth);

this.reRender();

var containerDom = blockContainerThis.getBlockContainerDom();

containerDom.insertBefore(shadowContainerDom, thisBlock.getBlockMainDom().nextSibling);

}

ShadowBlock.prototype.insertShadowDomToBlockDomAsGroup = function(thisBlock, direction) {

var blockContainerThis = this.getBlockContainerThis();

var depth = thisBlock.getDepth();

var indentPxNum = thisBlock.getIndentNumber();

if (direction == BLOCK_DIRECTION.INDENT) {

indentPxNum += NUM_INDENT_DEPTH_PX;

depth++;

}

var blockMaxWidth = blockContainerThis.getBlockMaxWidth() - indentPxNum;

var shadowContainerDom = this.getBlockContainerDom();

$(shadowContainerDom).css(STR_WIDTH, blockMaxWidth);

$(shadowContainerDom).css(STR_DISPLAY, STR_BLOCK);

// show line number for group block's shadow

$(shadowContainerDom).first('.vp-block-num-info').css(STR_OPACITY, 1);

this.setSelectBlock(thisBlock);

this.setRootDepth(depth);

this.reRender();

var containerDom = blockContainerThis.getBlockContainerDom();

containerDom.insertBefore(shadowContainerDom, thisBlock.getBlockMainDom().nextSibling);

}

ShadowBlock.prototype.getBlockContainerThis = function() {

return this.blockContainerThis;

}

ShadowBlock.prototype.setRootDepth = function(rootDepth) {

this.rootDepth = rootDepth;

}

ShadowBlock.prototype.getRootDepth = function() {

return this.rootDepth;

}

ShadowBlock.prototype.getBlockName = function() {

return this.name;

}

ShadowBlock.prototype.setBlockName = function(name) {

this.name = name;

}

ShadowBlock.prototype.getBlockType = function() {

return this.type;

}

ShadowBlock.prototype.getBlockContainerDom = function() {

return this.containerDom;

}

ShadowBlock.prototype.setBlockContainerDom = function(containerDom) {

this.containerDom = containerDom;

}

ShadowBlock.prototype.setSelectBlock = function(selectBlock) {

this.selectBlock = selectBlock;

}

ShadowBlock.prototype.getSelectBlock = function() {

return this.selectBlock;

}

/** insertShadowDomToBlockDom메소드에서

* block container dom에 insert된 Shadow 블럭 dom을 제거하는 메소드 */

ShadowBlock.prototype.deleteShadowBlock = function() {

var blockContainerThis = this.blockContainerThis;

var rootBlockContainerDom = blockContainerThis.getBlockContainerDom();

$(rootBlockContainerDom).find(VP_CLASS_PREFIX + VP_CLASS_BLOCK_SHADOWBLOCK_CONTAINER).remove();

}

return ShadowBlock;

});