// output image class: one image to one layer
// 	* path:
// 	* image layer
// 	* viewer()
// 	* select()
// 	* isLayerValid()
// * init image class: has three layers
// 	* path :
// 	* init image group layer
// 	* init image layer
// 	* background layer
// 	* isLayerValid()
// * mask class:
// 	* path
// 	* mask group
// 	* white mask
// 	* balck layer
// 	* select()
// 	* viewe()
// 	* isLayerValid()

const psapi = require('./psapi')

const ViewerObjState = {
	Delete: "delete",
	Unlink: "unlink",

}

class ViewerImage {
  constructor () {
    this.img_html = null
    this.is_highlighted = false
    this.can_highlight = true
    this.is_active = false// active is a temporary highlight
    this.state = ViewerObjState["Delete"]
    
  }
  info(){
    console.log("state: ",this.state)
  }
  visible (visibleOn) {}
  select () {
    
  }
  active(isActive){
    if(isActive){
      //unlink it if it's active 
      this.state = ViewerObjState['Unlink']

      this.img_html.classList.add("viewerImgActive")

    }else{
      if(this.getHighlight() === false){// if it's not active and it's not highlighted
        
        this.state = ViewerObjState['Delete']
      }else{
        
        this.state = ViewerObjState['Unlink'] //it's not active but it's highlighted then keep it
      }
      this.img_html.classList.remove("viewerImgActive")
    }
    this.is_active = isActive
    
  }
  isLayerValid () {}
  isSameLayer (layer_id) {}
  setHighlight(is_highlighted){
    if(this.can_highlight){

      this.is_highlighted = is_highlighted
      if(this.is_highlighted)
      {
        this.state = ViewerObjState['Unlink']
        this.img_html.classList.add("viewerImgSelected")
        
      }else{
        this.img_html.classList.remove("viewerImgSelected")
        this.state = ViewerObjState["Delete"]
      }
    }
  }
  getHighlight(){
    return this.is_highlighted
  }
  toggleHighlight(){
    
    const toggle_value = !this.getHighlight()
    this.setHighlight(toggle_value)
    // this.is_highlighted = !this.is_highlighted  
    // this.img_html.classList.toggle("viewerImgSelected")
  }
  setImgHtml(){}
  async delete(){}
  unlink(){
    //keep the layer but unlink it from the ui
    try{

   
      this.img_html.remove()//delete the img html element
      
    }catch(e){
      console.warn(e)
    }
  }
}

class OutputImage extends ViewerImage {
  constructor (layer, path) {
    super()
    this.layer = layer
    this.path = path
    this.img_html = null;
  }
  visible (visibleOn) {
    super.visible(visibleOn)
    if (this.isLayerValid()) {
      this.layer.visible = visibleOn
    }
  }
  select () {
    super.select()
    if (this.isLayerValid()) {
      psapi.selectLayersExe([this.layer])
      //   console.log(`${this.layer.id} got selected`);
    }
  }
  isLayerValid () {
    super.isLayerValid()
    //check if layer is defined or not
    //true if the layer is defined
    //false otherwise
    let isValid = false
    if (typeof this.layer !== 'undefined') {
      isValid = true
    }
    return isValid
  }
  isSameLayer (layer_id) {
    super.isSameLayer(layer_id)
    const is_same = this.layer.id == layer_id
    return is_same
  }

  setImgHtml(img_html){
    super.setImgHtml()
    this.img_html = img_html
  }
  async delete(){
    try{

      await super.delete()
      this.img_html.remove()//delete the img html element
      
      await psapi.cleanLayers([this.layer])
    }catch(e){
      console.warn(e)
    }


  }
  info(){
    super.info()
  }
  // unlink(){
  //   //keep the layer but unlink it from the ui
  //   try{

  //     super.unlink()
  //     this.img_html.remove()//delete the img html element
      
  //   }catch(e){
  //     console.warn(e)
  //   }
  // }
}

class InitImage extends ViewerImage {
  constructor (init_group, init_snapshot, solid_layer, path) {
    super()
    this.init_group = init_group
    this.init_snapshot = init_snapshot
    this.solid_layer = solid_layer

    this.path = path
    this.can_highlight = false
  }
  visible (visibleOn) {
    super.visible(visibleOn)
    //   const isValid = this.isLayerValid()
    let visibleValues = []
    if (visibleOn) {
      visibleValues = [true, true, true]
    } else {
      visibleValues = [false, false, false]
    }

    if (this.isLayerValid(this.init_group)) {
      this.init_group.visible = visibleValues[0]
    }
    if (this.isLayerValid(this.init_snapshot)) {
      this.init_snapshot.visible = visibleValues[1]
    }
    if (this.isLayerValid(this.solid_layer)) {
      this.solid_layer.visible = visibleValues[2]
    }
  }

  select () {
    super.select()

    const selectLayers = []
    if (this.isLayerValid(this.init_group)) {
      
      selectLayers.push(this.init_group)
    }
    // if (this.isLayerValid(this.init_snapshot)) {
      
    //   selectLayers.push(this.init_snapshot)
    // }
    // if (this.isLayerValid(this.solid_layer)) {
    //   selectLayers.push(this.solid_layer)
    // }

    psapi.selectLayersExe(selectLayers)
    //   console.log(`${this.layer.id} got selected`);
  }

  isLayerValid (layer) {
    super.isLayerValid()
    //check if layer is defined or not
    //true if the layer is defined
    //false otherwise
    //   let isValid = [false,false,false]
    let isValid = false
    if (typeof layer !== 'undefined') {
      isValid = true
    }

    return isValid
  }
  isSameLayer (layer_id) {
    super.isSameLayer(layer_id)
    let is_same = false 
    if(this.isLayerValid(this.init_group)){
        is_same = this.init_group.id == layer_id

    }
    return is_same
  }
  setImgHtml(img_html){
    super.setImgHtml()
    this.img_html = img_html
  }
  async delete(){
    try{

      await super.delete()
      this.img_html.remove()//delete the img html element
      
      
      
      await psapi.cleanLayers([this.init_group,this.init_snapshot,this.solid_layer])
      
    }
    catch(e){
      console.warn(e)
    }
  }
}

class InitMaskImage extends ViewerImage {
    constructor (mask_group, white_mark, solid_black, path) {
      super()
      this.mask_group = mask_group 
      this.white_mark = white_mark
      this.solid_black = solid_black
  
      this.path = path
      this.can_highlight = false
    }
    visible (visibleOn) {
      super.visible(visibleOn)
      //   const isValid = this.isLayerValid()
      let visibleValues = []
      if (visibleOn) {
        visibleValues = [true, true, true]
      } else {
        visibleValues = [false, false, false]
      }
  
      if (this.isLayerValid(this.mask_group)) {
        this.mask_group.visible = visibleValues[0]
      }
      if (this.isLayerValid(this.white_mark)) {
        this.white_mark.visible = visibleValues[1]
      }
      if (this.isLayerValid(this.solid_black)) {
        this.solid_black.visible = visibleValues[2]
      }
    }
  
    select () {
      super.select()
  
      const selectLayers = []
      if (this.isLayerValid(this.mask_group)) {
        
        selectLayers.push(this.mask_group)
      }
      // if (this.isLayerValid(this.init_snapshot)) {
        
      //   selectLayers.push(this.init_snapshot)
      // }
      // if (this.isLayerValid(this.solid_layer)) {
      //   selectLayers.push(this.solid_layer)
      // }
  
      psapi.selectLayersExe(selectLayers)
      //   console.log(`${this.layer.id} got selected`);
    }
  
    isLayerValid (layer) {
      super.isLayerValid()
      //check if layer is defined or not
      //true if the layer is defined
      //false otherwise
      //   let isValid = [false,false,false]
      let isValid = false
      if (typeof layer !== 'undefined') {
        isValid = true
      }
  
      return isValid
    }
    isSameLayer (layer_id) {
      super.isSameLayer(layer_id)
      let is_same = false 
      if(this.isLayerValid(this.mask_group)){
          is_same = this.mask_group.id == layer_id
  
      }
      return is_same
    }
    setImgHtml(img_html){
      super.setImgHtml()
      this.img_html = img_html
    }
    async delete(){
      try{

        await super.delete()
        this.img_html.remove()//delete the img html element
        
        await psapi.cleanLayers([this.mask_group,this.white_mark, this.solid_black])
      }catch(e){
        console.warn(e)
      }
  
    }
  }
  

module.exports = {
  OutputImage,
  InitImage,
  InitMaskImage,
  ViewerObjState
}