class PhotoViewAPP{
    constructor(){
        this.context = new PhotoViewContext()
        this.canvas = this.setCanvasFromID()
        this.canvasContext =this.setCanvasContext()
        this.canvasCRect = this.setCanvasCRect()
        console.log(this.context.getstate())
    }
    setCanvasFromID() {
        return document.querySelector('#PhotoView')    
    }
    setCanvasContext(){
         this.canvasContext = this.canvas.getContext('2d')
    }
    setCanvasCRect(){
        this.canvasCRect = this.canvas.getBoundingClientRect()
    
    }
    setCanvasClickEvent(){
        this.canvas.addEventListener('click',(e)=>{this.context.clickEvent(e)})
    }
    initalizePhotoViewApp(){
        this.setCanvasClickEvent()
    }
}

class PhotoViewContext{
    #state = null
    #stateList = {}
    constructor(state){
        this.#state = state
        

    }
    addToStateList(state,statename){
        this.#stateList[statename] = new state();
    }
    getStateByName(statename){
        return this.#stateList[statename]
    }

    getstate(){
        return this.#state
    }
    
}


class abstractStateClass{
    #parentClass = null
    constructor(){
        if (this.constructor == abstractStateClass){
            throw new Error("Abstract Class  not should not be instatiated")
        }
    }
    setParentClass(parentclass){
        this.#parentClass = parentclass
    }
}

class thumbnailView extends abstractStateClass{
    constructor(){

    }
}

function contextGetter(){
    var c = document.querySelector("#PhotoView")
    

    return c.getContext('2d')
}


async function GetImages(){
    var file = await fetch('imgs/imgs.json')
    var data = await file.json()
    var imgArray = []
    var numberImgs = data.images.length
    data.images.forEach(element => {
        var img = new Image(192,108)
        img.src = 'imgs/'+element
        imgArray.push(img)
    });
    return imgArray

    
}


async function LoadImages(Context,ListOfImages){
    var  ImgObjList = []
    var currentX = 672
    var currentY = 378
    var MaxRows = 3
    var MaxCols = 3
    var CurrentRow = 0
    var CurrentCol = 0
    await Promise.all(ListOfImages.map((element)=>{
        return new Promise(resolve => {
            element.onload = function() {
                
                Context.drawImage(element,currentX,currentY,192,108)
                ImgObjList.push({"img":element,
                    "pos":{
                        "x":{
                            "start":currentX,
                            "end": currentX + 192
                        },
                        "y":{
                            "start":currentY,
                            "end": currentY + 108
                        }
                    }
                })
                
                if (CurrentRow == MaxRows - 1 ){
                    CurrentCol++
                    currentY += 110
                    CurrentRow = 0
                    currentX = 672
                }else{
                    currentX += 194
                    CurrentRow++

                }
                resolve();
            }
        });
         
    }));

    
 
}
 
function PositionImages(ListOfImages){
    var  ImgObjList = []
    var CurrentRow = 0
    var CurrentCol = 0
    var MaxCols = 3
    var MaxRows = 3
    var CurrentX = 672
    var CurrentY = 378
    var ImgWidth = ListOfImages[0].width
    var ImgHeight = ListOfImages[0].height
    ListOfImages.map((element)=>{
        ImgObjList.push({
            "img":element,
            "pos":{
                "x":{
                    "start":CurrentX,
                    "end":CurrentX + 192
                },
                "y":{
                    "start":CurrentY,
                    "end":CurrentY + 108
                }
            }
        })
        if (CurrentRow == MaxRows - 1){
            CurrentCol++
            CurrentY += 110
            CurrentRow = 0
            CurrentX = 672
        }
        else{
            CurrentX += 194
            CurrentRow++
        }

    })
    return ImgObjList
}    


function CanvasClickEvent(e,canvasSize,ListOfImages) {
    var mouseX = (e.clientX - canvasSize.left)
    var mouseY = (e.clientY - canvasSize.top)
    //console.log(Math.floor((mouseX-672)/194))
    //console.log(Math.floor((mouseY-378)/110))
    
    if (( mouseX >= 672) && (mouseX <= ((194 * 3)+672)) && (( mouseY >= 378 ) && (mouseY <= ((110 * 3) + 378) ) )){
        ListOfImages.forEach(element=>{
            if ((mouseX >= element.pos.x.start) && (mouseX <= element.pos.x.end)){
                console.log(element)
            }
        })
        alert( mouseX + "\n" + mouseY)
    }
    
}

export  async function InitializePhotoViewApp(){
    
    var APP = new PhotoViewAPP();
    APP.initalizePhotoViewApp();

    var context = contextGetter();
    var arrayOfImages = await GetImages()
    LoadImages(context,arrayOfImages)
    var PositionedImages = PositionImages(arrayOfImages)
    var canvas = document.querySelector('#PhotoView')
    var cRect = canvas.getBoundingClientRect()

    canvas.addEventListener('click',(e)=>{CanvasClickEvent(e,cRect,PositionedImages)})
    

    

}