require 'js'
require 'js/require_remote'

module Kernel
  def require_relative(path) = JS::RequireRemote.instance.load(path)
end

require_relative 'jsrb'
require_relative 'mojibake'

@document = JSrb.document
@body = @document.query_selector('body')

@component = []

def create_pair
  m = Mojibake.new

  t = @document.create_element('textarea')
  t.cols = 50
  t.rows = 5
  @body.append_child(t)
  @body.append_child(@document.create_element('br'))
  b = @document.create_element('input')
  b.type = 'button'
  b.value = '復元'
  @body.append_child(b)
  @body.append_child(@document.create_element('br'))

  t2 = @document.create_element('textarea')
  t2.cols = 50
  t2.rows = 5
  @body.append_child(t2)
  h = @document.create_element('div')
  @body.append_child(h)
  b2 = @document.create_element('input')
  b2.type = 'button'
  b2.value = '文字化け'
  @body.append_child(b2)
  @body.append_child(@document.create_element('br'))

  i = @component.size
  @component.push(mtext: t, dbutton: b, dtext: t2, mbutton: b2, hint: h)

  b.add_event_listener('click') do
    conv = m.decode(@component[i][:mtext].value)
    @component[i][:dtext].value = conv
    @component[i][:hint].innerHTML = m.hint.map{|k, v| "<dt><code>#{k}</code>:<dd>#{v.join(" / ")}"}.join
  end

  b2.add_event_listener('click') do
    create_pair unless @component[i+1]
    @component[i][:dtext].value = m.code_to_char(@component[i][:dtext].value)
    m.encode(@component[i][:dtext].value)
    @component[i+1][:mtext][:value] = m.encode(@component[i][:dtext].value)
  end
end

create_pair
@component[0][:mtext].value = '繧ゅ§縺ｰ縺代ｒ縺ｵ縺上￡繧薙☆繧九ｈ'