let objectList = new Array();
let backgroundList = new Array();

const objectEle = $("#objectList");
const backgroundEle = $("#backgroundList");
const objectMax = 6;
const backgroundMax = 2;
const touchTime = 500;


var displayObjectUI = function () {
  objectEle.empty();
  let isEnd = false;

  for (let i = 0; i < objectMax; i++) {
    let ele = `<li><a href="javascript:;"></a></li>`;

    if (!!objectList[i]) {
      ele = `<li>
                        <a href="javascript:;">
                            <span class="touchObject"><img class='' src="${objectList[i]}" alt="object"></span>
                        </a>
                    </li>`;
    } else if (!objectList[i] && !isEnd) {
      ele = `<li onclick="contentPlus('content', '2');" class="content_plus"><a href="javascript:;"></a></li>`;
      isEnd = true;
    } else if (isEnd) {
      ele = `<li><a href="javascript:;"></a></li>`;
    }
    objectEle.append(ele);
    // longTouch('.longTouch', 1000, 'object');
  }
  // attach evt
  let touchTimer;
  let state = false;
  let src = "./images/object1_del.png";
  let element = "#objectList li";
  let isDone = false;
  $(element).on(`mousedown touchstart`, () => {
    if (isDone) {
      clickDeleteObject();
    } else {
      touchTimer = setTimeout(() => {
        $(element).find('img').closest('li').addClass('delete_mode');
        isDone = true;
      }, touchTime);
    }
  });
  $(element).on(`mouseup touchend touchmove`, () => {
    clearTimeout(touchTimer);
  });
};

var displayBackgroundUI = function () {
  backgroundEle.empty();
  let isEnd = false;
  for (let i = 0; i < backgroundMax; i++) {
    let ele = `<li><a href="javascript:;"></a></li>`;

    if (!!backgroundList[i]) {
      ele = `<li>
                        <a href="javascript:;">
                            <span><img class='touchBackground' src="${backgroundList[i]}" alt="object"></span>
                        </a>
                    </li>`;
    } else if (!backgroundList[i] && !isEnd) {
      ele = `<li onclick="contentPlus('background', '1');" class="content_plus"><a href="javascript:;"></a></li>`;
      isEnd = true;
    } else if (isEnd) {
      ele = `<li><a href="javascript:;"></a></li>`;
    }
    backgroundEle.append(ele);
    //longTouch(".longTouch", 1000, "background");
  }
  // attach evt
  let touchTimer;
  let state = false;
  let src = "./images/background_del.png";
  let element = "#backgroundList li";
  let isDone = false;
  // $(element).on('click', ()=>{

  // });
  $(element).on(`mousedown touchstart`, (event) => {
    if (isDone) {
      deleteBackground();
    } else {
      touchTimer = setTimeout(() => {
        // $(element).attr("src", src);
        $(element).find('img').closest('li').addClass('delete_mode');
        isDone = true;
      }, touchTime);
    }
  });
  $(element).on(`mouseup touchend touchmove`, () => {
    clearTimeout(touchTimer);
  });
};

var deleteObject = function () {
  objectList = [];
  setTimeout(() => {
    displayObjectUI();
    myDiagram.clear();
    $(".block_store").hide();
    $(".block_store").removeClass("on");
    $(".block_start").addClass("on");
    $('.tool_right>ul li').eq(0).find('img').attr('src','./images/tab_flag_white.png');
    $(".block_store").find("img").attr("src",'./images/tab_icon1.png');
    // $(".block_box_type")
    //   .find("div.box_type")
    //   .eq(0)
    //   .removeClass("active")
    //   .siblings()
    //   .addClass("active");
    $(".box_type1").addClass("active").siblings().removeClass("active");
  }, 200);

};

var deleteBackground = function () {
  backgroundList = [];
  initBackground();
  setTimeout(() => {
    displayBackgroundUI();
  }, 200);
};

var addObjectList = function (src) {
  objectList.push(src);
};

var addBackgroundList = function (src) {
  backgroundList.push(src);
};

var showBlockStore = function () {
  $(".block_store").show();
  ///블록 값 초기화
  mainPalette.model.nodeDataArray =
    mainPaletteData[project.data.projectSeq - 1];
};
var hideBlockStore = function () {
  $(".block_store").hide();
};

var showOverlay = function () {
  $(".overlay").show();
};
var hideOverlay = function () {
  $(".overlay").hide();
};

var changePlayIcon = function (isPlay) {
  if (isPlay) {
    playIcon.attr("src", "./images/play_icon.png");
  } else {
    //일시정지 아이콘으로 변경해야함
    playIcon.attr("src", "./images/play_icon.png");
  }
};

function playBtn() {
  if (!project.isPlaying) {
    $("#playIcon").attr("src", "./images/pause_icon.png");
    console.group("[Playing]");
    project.isPlaying = true;
    travelStart(project);
    showOverlay();
    console.groupEnd();
  }
}

var stopPlaying = function () {
  if (project.isPlaying) {
    $("#playIcon").attr("src", "./images/play_icon.png");
    console.group("[stopPlaying]");
    project.initCanvas();
    project.isPlaying = false;
    hideOverlay();
    console.groupEnd();
  }
};

var showTrash = function () {
  $(`.trash`).show();
};

var hideTrash = function () {
  $(`.trash`).hide();
};

var clickDeleteObject = function () {
  deleteObject();
  project.initObjects();
};

var clickDeleteBackground = function () {
  deleteBackground();
};

// let isFull = false;
function resizeContent(project) {
  if (!project.isFull) {
    $(".play_box ul li:nth-child(3) a img").attr(
      "src",
      "./images/small_icon.png"
    );
    $(".object_box").hide();
    $(".tool_left").css({ width: "80%" });
    $(".play_box").css({ height: "100%" });
    $(".play_view").css({ height: "85%" });
    $(".tool_right").css("width", "17%");
    $(".tool_right>ul").hide();
    $(".block_box").css({
      height: "100%",
      padding: "0",
      "border-top-left-radius": "15px",
    });
    $('.overlay').css('border-top-left-radius','15px');

    $(".block_box_type").hide();
    $(".block_canvas").css({
      width: "100%",
      "border-top-left-radius": "15px",
      "border-bottom-left-radius": "15px",
    });
  } else {
    $(".play_box ul li:nth-child(3) a img").attr(
      "src",
      "./images/full_icon.png"
    );
    setTimeout(() => {
      $(".object_box").fadeIn();
    }, 300);
    $(".tool_left").css({ width: "51%" });
    $(".tool_right").css("width", "47.5%");
    $(".play_box").css({ height: "64%" });
    $(".play_view").css({ height: "81%" });
    $(".tool_right>ul").show();
    $(".block_box").css({
      height: "90%",
      padding: "2%",
      "border-top-left-radius": "0px",
    });
    $('.overlay').css('border-top-left-radius','0px');
    $(".block_box_type").show();
    $(".block_canvas").css({
      width: "55%",
      "border-top-left-radius": "0",
      "border-bottom-left-radius": "0",
    });
  }
  setTimeout(() => {
    // resizeCanvas(data.isFull);
    resizeCanvas();
  }, 500);

  project.isFull = !project.isFull;

}

// function longTouch(ele, duration, type) {
//   let touchTimer;
//   let state = false;
//   let src;
//   let deleteFnc;
//   if (type == "object") {
//     src = "./images/object1_del.png";
//   } else {
//     src = "./images/background_del.png";
//   }
//   deleteFnc = null;

//   $(ele).on(`mousedown touchstart`, () => {
//     touchTimer = setTimeout(() => {
//       $(ele).attr("src", src);
//       state = true;
//     }, duration);
//   });

  // $(ele).on(`mouseup touchend`, ()=>{
  //     if(state){
  //         state = false;
  //         if(type=="object"){
  //         }else{
  //             deleteBackground();
  //         }
  //     }
  //     clearTimeout(touchTimer);
  // })
// }

// event & doc ready
$(function () {
  hideBlockStore();
  hideOverlay();

  displayObjectUI();
  displayBackgroundUI();

  //오버레이 터치
  $(".overlay").on("click", () => {
    stopPlaying();
  });

  //리사이즈 클릭
  $(".resizeBtn").on("click", () => {
    resizeContent(project);
  });

  //스타트 버튼
  $(".playBtn").on("click", () => {
    playBtn();
  });
  //스톱 버튼
  $(".stopBtn").on("click", () => {
    stopPlaying();
  });
  //미스터손's 이벤트
  let img = '<img src="./images/tab_icon1_white.png" alt="tab_icon" />';
  for(i=1; i < ($(".tool_right>ul li").length + 1 ); i++ ) {
    img = $(img).attr('src',`${project.data.tabIcon}`);
    $('.tool_right>ul li:nth-child(' + i + ') a').append(img);
    console.log(i);
  };
  
  $(".tool_right>ul li").on("click", function () {
    // console.log($(this));
    if (!$(this).hasClass("none")) {
      $(this).addClass("on").siblings().removeClass("on");
      $(".box_type" + ($(this).index() + 1))
        .addClass("active")
        .siblings()
        .removeClass("active");
    };
    
    let li_img = $(".tool_right>ul li");  
    if( $(this).index() == 0) {
      $('.tool_right>ul li').eq(0).find('img').attr('src','./images/tab_flag_white.png');
    } else {
      $('.tool_right>ul li').eq(0).find('img').attr('src','./images/tab_flag.png');
    };

    for(i=1; i < li_img.length; i++) {
      
      if( i == $(this).index()) {
        $(this).find('img').attr('src', project.data.tabIconWhite);
      } else {
        $('.tool_right>ul li').eq(i).find('img').attr('src',project.data.tabIcon);
      }
    };
  });

  $('.tool_right>ul li:first-child a').append('<img src="./images/tab_flag_white.png" alt="tab_icon" />');
});