import "luxe: ui/label" for UILabel
import "luxe: ui/control" for Control
import "luxe: ui/image" for UIImage
import "luxe: render" for TextAlign
import "luxe: world" for UIBehave, UIContain, UI, UIEvent
import "luxe: assets" for Assets
import "luxe: asset" for Asset

import "math/util" for Util
import "blocks/ui/box" for UIBox
import "blocks/ui/clickable" for Clickable

class NumberField{

  static create(ent){
    var root = Control.create(ent)
   Control.set_contain(root, UIContain.row | UIContain.start)//|
    Control.set_size(root, 27, 10)

    var arrow = Assets.image("assets/wip/8Arrow")

    var leftArrow = UIImage.create(ent)
    UIImage.set_image(leftArrow, arrow)
    Control.set_size(leftArrow, 8, 8)
    Control.child_add(root, leftArrow)
    Control.set_margin(leftArrow, -1, 0, 0, 0)
    Clickable.make_clickable(leftArrow)
    Clickable.set_on_click(leftArrow){
      var data = Control.get_state_data(root)
      UI.events_emit(root, UIEvent.change, data["value"] - 1)
    }

    var label = UILabel.create(ent)
    Control.child_add(root, label)
    Control.set_size(label, 12, 10)
    UILabel.set_align_vertical(label, TextAlign.bottom)
    UILabel.set_align(label, TextAlign.center)
    UILabel.set_font(label, Asset.font("assets/fonts/BabyBlocks"))
    UILabel.set_text_size(label, 8)
    UILabel.set_text(label, "0")
    Control.set_margin(label, 1, 0, 0, 0)
    
    var rightArrow = UIImage.create(ent)
    UIImage.set_image(rightArrow, arrow)
    Control.set_size(rightArrow, 8, 8)
    Control.child_add(root, rightArrow)
    Control.set_margin(rightArrow, 0, 0, 0, 0)
    UIImage.set_uv(rightArrow, 1, 0, 0, 1)
    Clickable.make_clickable(rightArrow)
    Clickable.set_on_click(rightArrow){
      var data = Control.get_state_data(root)
      UI.events_emit(root, UIEvent.change, data["value"] + 1)
    }
    
    //input stuff
    Control.set_allow_input(root, true)
    Control.set_state_data(root, {"pressed": false, "value":0, "drag_start_mouse": -1, "drag_start_value":-1, "label": label})
    Control.set_process(root){|control, data, event, x,y,w,h|
      if(event.control != control) return
      if(!Util.valid_event(event, true)) return
      if(event.type == UIEvent.press){
        data["pressed"] = true
        data["drag_start_mouse"] = event.x
        data["drag_start_value"] = data["value"]
        UI.capture(control)
        UI.event_cancel(ent, event.id)
      }
      if(event.type == UIEvent.move && data["pressed"]){
        var diff = event.x - data["drag_start_mouse"]
        var value_change = diff / 3
        UI.events_emit(control, UIEvent.change, data["drag_start_value"] + value_change)
      }
      if(event.type == UIEvent.release){
        data["pressed"] = false
        UI.uncapture(control)
      }
    }

    return root
  }

  static set_value(field, value){
    var data = Control.get_state_data(field)
    data["value"] = value
    UILabel.set_text(data["label"], value.toString)
  }
}