# frozen_string_literal: true
box
dragger = box({ width: 333, height: 16, top: 0 })
back = box({ width: 333, height: 222, top: dragger.height })
body = back.box({ top: 0, width: '100%', height: '100%', component: { size: 12 }, id: :poil })
code_runner = dragger.circle({ left: 3, top: 3, width: 12, height: 12, color: :red })
code_closer = dragger.circle({ left: :auto ,right: 3, top: 3, width: 12, height: 12, color: :black })

body.editor({ id: :the_ed, code: "def my_script\n
  return 100\n
end", width: 333, height: 192, color: :lightgray, top: 0 })

def create_editor(code_id)
  js_code = <<~JAVASCRIPT
    var editor = CodeMirror.fromTextArea(document.getElementById("#{code_id}"), {
        lineNumbers: true,
        mode: "ruby",
        theme: "monokai"
    });
    editor.getWrapperElement().id = "atome_editor_#{code_id}";
    document.getElementById("atome_editor_#{code_id}").CodeMirrorInstance = editor;

  JAVASCRIPT
  JS.eval(js_code)
end

def set_code(code_id, content)
  js_code = <<~JAVASCRIPT
    var editorWrapper = document.getElementById("atome_editor_#{code_id}");
                 var editorInstance = editorWrapper.CodeMirrorInstance;
                 var newContent = "#{content}";
                 editorInstance.setValue(newContent);
  JAVASCRIPT
  JS.eval(js_code)
end

def get_code(code_id)
  js_code = <<~JAVASCRIPT
    var editorWrapper = document.getElementById("atome_editor_#{code_id}");

               var editorInstance = editorWrapper.CodeMirrorInstance;
               return editorInstance.getValue();
  JAVASCRIPT
  JS.eval(js_code)
end

create_editor("the_ed")

wait 1 do
  editor_id = "the_ed"
  set_code(editor_id, "def new_script\\n  puts 'so cool'\\ncircle({top: rand(333), color: :red})\\nend\\nnew_script")
end

code_closer.touch(true) do
  back.delete(true)
  dragger.delete(true)
end

code_runner.touch(true) do
  editor_id = "the_ed"
  data_found = get_code("the_ed").to_s
  grab(:the_t).code(data_found.to_s)
  atome_before = Universe.user_atomes
  eval(data_found)
  code_editor = grab(editor_id)
  atome_to_delete = code_editor.data
  atome_to_delete.each do |atome_id_found|
    grab(atome_id_found).delete(false)
  end
  atome_after = Universe.user_atomes
  new_atomes = atome_after - atome_before
  code_editor.data(new_atomes)
end
dragger.drag(restrict: :view ) do |event|
  view = grab(:view)
  view_width = view.to_px(:width)
  view_height = view.to_px(:height)

  dx = event[:dx]
  dy = event[:dy]

  # Calculer les nouvelles positions
  x = (back.left || 0) + dx.to_f
  y = (back.top || 0) + dy.to_f

  # Contrainte de `x` entre 0 et `view_width`
  if x > 0 && x < view_width - back.width
    back.left(x)
  else
    # Contrainte si `x` dépasse les limites
    x = [0, [x, view_width - back.width].min].max
    back.left(x)
  end

  # Contrainte de `y` pour qu'il soit supérieur à une certaine valeur
  if y > 0 + dragger.height && y < view_height + dragger.height
    back.top(y)
  else
    # Contrainte si `y` dépasse les limites
    y = [0 + dragger.height, [y, view_height + dragger.height].min].max
    back.top(y)
  end
end
back.resize({ size: { min: { width: 120, height: 90 }, max: { width: 3000, height: 3000 } } }) do |event|
  dx = event[:dx]
  # dy = event[:dy]
  x = (dragger.width || 0) + dx.to_f
  # y = (back.top || 0) + dy.to_f
  dragger.width(x)
  # back.top(y)
end

back.shadow({ alpha: 0.6, blur: 16, left: 3, top: 16 })

back.drag(false)
dragger.touch(:double) do
  if back.display == :none
    back.display(:block)
  else
    back.display(:none)
  end
end

# a_list=[]
# Universe.atome_list.each  do |k, v|
#   a_list << k
# end
#
# alert a_list
#
# p_list=[]
#  Universe.particle_list.each  do |k, v|
#    p_list << k
#  end
#
# alert p_list
#
# box(id: :mon_carre, width: 300, height: 300)
alert "pseudo element and trigger absctrator"
def api_infos
  {
  "example": "Purpose of the example",
  "methods_found": [
    "6",
    "CodeMirrorInstance",
    "atome_list",
    "box",
    "circle",
    "data",
    "delete",
    "display",
    "drag",
    "each",
    "editor",
    "eval",
    "fromTextArea",
    "getElementById",
    "getValue",
    "getWrapperElement",
    "height",
    "left",
    "particle_list",
    "resize",
    "setValue",
    "shadow",
    "to_f",
    "to_px",
    "to_s",
    "top",
    "touch",
    "user_atomes",
    "width"
  ],
  "6": {
    "aim": "The `6` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `6`."
  },
  "CodeMirrorInstance": {
    "aim": "The `CodeMirrorInstance` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `CodeMirrorInstance`."
  },
  "atome_list": {
    "aim": "The `atome_list` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `atome_list`."
  },
  "box": {
    "aim": "The `box` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `box`."
  },
  "circle": {
    "aim": "The `circle` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `circle`."
  },
  "data": {
    "aim": "The `data` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `data`."
  },
  "delete": {
    "aim": "The `delete` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `delete`."
  },
  "display": {
    "aim": "The `display` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `display`."
  },
  "drag": {
    "aim": "The `drag` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `drag`."
  },
  "each": {
    "aim": "The `each` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `each`."
  },
  "editor": {
    "aim": "The `editor` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `editor`."
  },
  "eval": {
    "aim": "The `eval` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `eval`."
  },
  "fromTextArea": {
    "aim": "The `fromTextArea` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `fromTextArea`."
  },
  "getElementById": {
    "aim": "The `getElementById` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `getElementById`."
  },
  "getValue": {
    "aim": "The `getValue` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `getValue`."
  },
  "getWrapperElement": {
    "aim": "The `getWrapperElement` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `getWrapperElement`."
  },
  "height": {
    "aim": "The `height` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `height`."
  },
  "left": {
    "aim": "Controls the horizontal position of the object within its container.",
    "usage": "For example, `left(100)` moves the object 100 pixels from the left edge."
  },
  "particle_list": {
    "aim": "The `particle_list` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `particle_list`."
  },
  "resize": {
    "aim": "The `resize` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `resize`."
  },
  "setValue": {
    "aim": "The `setValue` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `setValue`."
  },
  "shadow": {
    "aim": "The `shadow` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `shadow`."
  },
  "to_f": {
    "aim": "The `to_f` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `to_f`."
  },
  "to_px": {
    "aim": "The `to_px` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `to_px`."
  },
  "to_s": {
    "aim": "The `to_s` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `to_s`."
  },
  "top": {
    "aim": "Defines the vertical position of the object in its container.",
    "usage": "For instance, `top(50)` sets the object 50 pixels from the top edge."
  },
  "touch": {
    "aim": "Handles touch or click events to trigger specific actions.",
    "usage": "Example: `touch(:tap) do ... end` triggers an action when tapped."
  },
  "user_atomes": {
    "aim": "The `user_atomes` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `user_atomes`."
  },
  "width": {
    "aim": "The `width` method's purpose is determined by its specific functionality.",
    "usage": "Refer to Atome documentation for detailed usage of `width`."
  }
}
end