import "luxe: ui/control" for Control
import "luxe: world" for UI, World, UIEvent
import "luxe: draw" for PathStyle
import "luxe: assets" for Assets
import "luxe: render" for Image
import "luxe: math" for Math

import "globals" for Globals
import "math/rect" for AABB
import "math/math" for M
import "blocks/debug" for DrawDebug

class UiSlider{

  static create(ent){
    var compass = Control.create(ent)
    var style = PathStyle.new()
    style.color = [1,1,1,1]
    style.thickness = 1
    Control.set_allow_input(compass, true)
    Control.set_state_data(compass, {"value": 0.5, "style": style, "pressed": false}) //angle is in radians between 0 and tau
    Control.set_render(compass) {|control, state, x, y, w, h|
      var depth = UI.draw_depth_of(control, 0) 
      UI.draw_rect(control, x+0.5, y+0.5, depth, w-1, h-1, 0, state["style"])
      UI.draw_line(control, x + h/2, y + h/2, x + w - h/2, y + h/2, depth, state["style"])
      var image = Assets.image("assets/wip/SliderHandle")
      var img_size = [Image.get_width(image), Image.get_height(image)]
      UI.draw_image(control, (M.lerp(x+h/2, x+w-h/2, state["value"]) - img_size.x/2).round, 
          y+h/2-img_size.y/2, depth, img_size.x, img_size.y, 
          0, [1,1,1,1], [0, 0, 1, 1], image, true)
    }
    Control.set_process(compass){|control, state, event, x,y,w,h|
      if(event.control != control) return
      if(event.type == UIEvent.press){
        state["pressed"] = true
        UI.capture(control)
      } else if(event.type == UIEvent.release){
        state["pressed"] = false
        UI.uncapture(control)
      } else if(event.type == UIEvent.move && state["pressed"]){
        var abs_x = Control.get_pos_x_abs(control)
        var rel_pos = M.inv_lerp(abs_x+h/2, abs_x+w-h/2, event.x)
        rel_pos = M.clamp(rel_pos, 0, 1)
        UI.events_emit(control, UIEvent.change, rel_pos)
      }
    }
    return compass
  }

  static set_value(slider, value){
    var data = Control.get_state_data(slider)
    data["value"] = value
  }

}