"use strict";

const generator = new Generator("#interactiveArea")


const actList = new ActionList('actionList')

// const addCircButton = actList.addButton('Add Circle', 'actionButton')
// addCircButton.addEventListener('mouseup', generator.makeCircle)
// addCircButton.addEventListener('mousedown', () => drag(generator.makeCircle()))

// const addRectButton = actList.addButton('Add Rectangle', 'actionButton')
// addRectButton.addEventListener('mouseup', generator.makeRect)
// addRectButton.addEventListener('mousedown', () => drag(generator.makeRect()))


// const list = document.getElementById('actionList')


// document.addEventListener('mousedown', wrapper)

// function wrapper(e){
//     const element = e.target
//     drag(element)
// }

// const addCustButton = actList.addButton('Add Custom Shape', 'actionButton')
// addCustButton.addEventListener('mousedown', () => drag(generator.makeCustom("div")))

const interactArea = document.getElementById("interactiveArea")
// interactArea.appendChild(list)
// interactArea.addEventListener('dblclick', remove)

// const dummyButton = actList.addButton('Remove Button Above', 'actionButton')
// dummyButton.addEventListener('mousedown', () => actList.remButton(addCustButton))
const demobox1 = document.getElementById("ibar")
const demobox2 = document.getElementById("text1")
const demobox3 = document.getElementById("image")
const demobox4 = document.getElementById("example1")

const box = document.getElementById("dragExample")
const box2 = document.getElementById("snapExample")
const box3=document.getElementById("resizeExample")
const box4=document.getElementById("removeExample1")
const box5=document.getElementById("removeExample2")
const box6=document.getElementById("alignExample1")
const box7=document.getElementById("alignExample2")


function demo(){
    const menu1 = new PopupMenu("ibar")
    const resized1 = new Resizer("ibar")
    menu1.bindPopup()
    resized1.buildBorders()
    menu1.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    demobox1.addEventListener('click', togglePopup)
    demobox1.addEventListener("mousedown", drag)

    const menu2 = new PopupMenu("text1")
    const resized2 = new Resizer("text1")
    menu2.bindPopup()
    resized2.buildBorders()
    menu2.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    demobox2.addEventListener('click', togglePopup)
    demobox2.addEventListener("mousedown", drag)


    const menu3 = new PopupMenu("image")
    const resized3 = new Resizer("image")
    menu3.bindPopup()
    resized3.buildBorders()
    menu3.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    demobox3.addEventListener('click', togglePopup)
    demobox3.addEventListener("mousedown", drag)
    
    const menu4 = new PopupMenu("example1")
    const resized4 = new Resizer("example1")
    menu4.bindPopup()
    resized4.buildBorders()
    menu4.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    demobox4.addEventListener('click', togglePopup)
    demobox4.addEventListener("mousedown", drag)



}

function examples(){
    const menu = new PopupMenu("dragExample")
    const resized = new Resizer("dragExample")
    menu.bindPopup()
    resized.buildBorders()
    menu.addButtons(["draggable"])
    box.addEventListener('click', togglePopup)
    box.addEventListener("mousedown", drag)

    const menu2 = new PopupMenu("snapExample")
    menu2.bindPopup()
    menu2.addButtons(["draggable", "snapping70"])
    box2.addEventListener('click', togglePopup)
    box2.addEventListener("mousedown", drag)


    const menu3 = new PopupMenu("resizeExample")
    const resized3 = new Resizer("resizeExample")
    menu3.bindPopup()
    resized3.buildBorders()
    menu3.addButtons(["resizable"])
    box3.addEventListener('click', togglePopup)

    // const menu3 = new PopupMenu("image")
    // const resized3 = new Resizer("image")
    // menu3.bindPopup()
    // resized3.buildBorders()
    // menu3.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    // box3.addEventListener('click', togglePopup)
    // box3.addEventListener("mousedown", drag)

    const menu4 = new PopupMenu("removeExample1")
    menu4.bindPopup()
    menu4.addButtons(["remove"])
    box4.addEventListener('click', togglePopup)

    const menu5 = new PopupMenu("removeExample2")
    menu5.bindPopup()
    menu5.addButtons(["remove"])
    box5.addEventListener('click', togglePopup)
    
    const menu6 = new PopupMenu("alignExample1")
    menu6.bindPopup()
    menu6.addButtons(["draggable","select"])
    box6.addEventListener('click', togglePopup)
    box6.addEventListener("mousedown", drag)

    const menu7 = new PopupMenu("alignExample2")
    menu7.bindPopup()
    menu7.addButtons(["draggable", "select"])
    box7.addEventListener('click', togglePopup)
    box7.addEventListener("mousedown", drag)

    // const savebutton = document.createElement("button")
    // savebutton.appendChild(document.createTextNode("toggle save"))
    // savebutton.addEventListener("click", (e)=>toggleSaver(e,"interactiveArea"))
    // document.body.appendChild(savebutton)
}
demo()
examples()

// const borders = document.querySelectorAll(".border")
// for(let i = 0 ; i < borders.length ; i++){
//     borders[i].addEventListener("mousedown", resize)
// }



// const box = document.getElementById("dragExample")
// const menu = new PopupMenu("dragExample")
// menu.bindPopup()
// const resized = new Resizer("dragExample")
// resized.build()
// const resize_button = document.createElement("button")
// resize_button.appendChild(document.createTextNode("resizable"))
// const drag_button = document.createElement("button")
// drag_button.appendChild(document.createTextNode("draggable"))
// const remove_button = document.createElement("button")
// remove_button.appendChild(document.createTextNode("remove"))
// menu.addButton(resize_button)
// menu.addButton(drag_button)
// menu.addButton(remove_button)
// box.addEventListener('click', togglePopup)
// drag_button.addEventListener("click", toggleDraggable)
// resize_button.addEventListener("click", toggleResizable)
// remove_button.addEventListener("click", remove)
// box.addEventListener("mousedown", drag)

// const box2 = document.getElementById("text1content")
// const menu2 = new PopupMenu("text1content")
// menu2.bindPopup()
// const resized2 = new Resizer("text1content")
// resized2.build()
// const resize_button2 = document.createElement("button")
// resize_button2.appendChild(document.createTextNode("resizable"))
// const drag_button2 = document.createElement("button")
// drag_button2.appendChild(document.createTextNode("draggable"))
// menu2.addButton(resize_button2)
// menu2.addButton(drag_button2)
// box2.addEventListener('click', togglePopup)
// drag_button2.addEventListener("click", toggleDraggable)
// resize_button2.addEventListener("click", toggleResizable)
// box2.addEventListener("mousedown", drag)

// const box3=document.getElementById("image")
// const menu3 = new PopupMenu("image")
// menu3.bindPopup()
// const resize_button3 = document.createElement("button")
// const resized3 = new Resizer("image")
// resized3.build()
// resize_button3.appendChild(document.createTextNode("resizable"))
// const drag_button3 = document.createElement("button")
// drag_button3.appendChild(document.createTextNode("draggable"))
// menu3.addButton(resize_button3)
// menu3.addButton(drag_button3)
// box3.addEventListener('click', togglePopup)
// drag_button3.addEventListener("click", toggleDraggable)
// resize_button3.addEventListener("click", toggleResizable)
// box3.addEventListener("mousedown", drag)
// const box4=document.getElementById("resizing")
// const menu4 = new PopupMenu("resizing")
// menu4.bindPopup()
// const resized4 = new Resizer("resizing")
// resized4.build()
// const resize_button4 = document.createElement("button")
// resize_button4.appendChild(document.createTextNode("resizable"))
// const drag_button4 = document.createElement("button")
// drag_button4.appendChild(document.createTextNode("draggable"))
// const snap_button4 = document.createElement("button")
// snap_button4.appendChild(document.createTextNode("snapping"))
// const select_button4 = document.createElement("button")
// select_button4.appendChild(document.createTextNode("select"))
// menu4.addButton(resize_button4)
// menu4.addButton(drag_button4)
// menu4.addButton(snap_button4)
// menu4.addButton(select_button4)
// box4.addEventListener('click', togglePopup)
// drag_button4.addEventListener("click", toggleDraggable)
// resize_button4.addEventListener("click", toggleResizable)
// snap_button4.addEventListener("click", (e)=>{toggleSnapping(e, 50)})
// select_button4.addEventListener("click", toggleSelect)
// box4.addEventListener("mousedown", drag)
// const borders = document.querySelectorAll(".border")
// for(let i = 0 ; i < borders.length ; i++){
//     borders[i].addEventListener("mousedown", resize)
// }





// const loadbutton = document.createElement("button")
// loadbutton.appendChild(document.createTextNode("load"))
// loadbutton.addEventListener("click", loader)
// interactArea.appendChild(loadbutton)
//might need to change *.addEventListener to document.addEventListener (in javaScript too) for faster response