class Elem {
  constructor(tag, attrs, close = true) {
    this.tag = '<' + tag
    if (close) {
      this.tag += '></' + tag + '>'
    } else {
      this.tag += '/>'
    }
    this.attrs = attrs
    this.children = []
  }
  addChild(child) {
    if (typeof child != 'object' || typeof child.tag == 'undefined') {
      return this
    }
    this.children.push(child)
    return this
  }
  html(text) {
    this.text = text
    return this
  }
  build() {
    let obj = $(this.tag)
    $.each(this.attrs, (key, el) => {
      obj.attr(key, el)
    })
    $.each(this.children, (i, el) => {
      obj.append(el.build())
    })
    if (typeof this.text !== 'undefined') {
      obj.html(this.text)
    }
    return obj
  }
}
var imagenes = {
  imagenes: [],
  url: '',
  evento: '',
  setup: () => {
    $('#agregar_imagen').css('cursor', 'pointer').click(() => {
      imagenes.add()
    })
    $('#imagenes .trash.icon').css('cursor', 'pointer').click(function() {
      let i = $(this).attr('data-media')
      imagenes.deleteImage(i)
    })
  },
  buildForm: () => {
    let form = new Elem('form', {class: 'ui form', id: 'add_image'}).addChild(
      new Elem('div', {class: 'ui grid'}).addChild(
        new Elem('div', {class: 'row'}).addChild(
          new Elem('div', {class: 'sixteen wide column'}).addChild(
            new Elem('div', {class: 'ui fluid input'}).addChild(
              new Elem('input', {type: 'file', name: 'imagen[]', multiple: 'multiple'}, false)
            )
          )
        )
      ).addChild(
        new Elem('div', {class: 'row'}).addChild(
          new Elem('div', {class: 'two wide column'}).addChild(
            new Elem('div', {class: 'ui fluid button', type: 'submit'}).html('Agregar')
          )
        ).addChild(
          new Elem('div', {class: 'fourteen wide column'}).addChild(
            new Elem('div', {id: 'resultado', class: 'ui fluid basic segment'})
          )
        )
      )
    )
    return form.build()
  },
  add: () => {
    var imgs = $('#imagenes')
    var div = imgs.next('.modal')
    if (div.length > 0) {
      div.remove()
    }
    div = $('<div></div>').attr('class', 'ui modal').append(
      $('<i></i>').attr('class', 'inside close icon')
    )
    if (imagenes.imagenes.length + videos.videos.length >= 12) {
      div.append(
        $('<div></div>').attr('class', 'header').html('Foto')
      ).append(
        $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de elementos.')
      )
      imgs.after(div)
      div.modal('show')
      return
    }

    div.append(
      $('<div></div>').attr('class', 'header').html('Foto')
    ).append(
      $('<div></div>').attr('class', 'content').append(imagenes.buildForm())
    )
    imgs.after(div)
    div.modal('show')
    div.find('form .button').click((e) => {
      div.find('form').submit()
    })
    div.find('form').submit((e) => {
      e.preventDefault()
      imagenes.addImage()
      return false
    })
  },
  addImage: () => {
    let form = $('#add_image')
    $('#add_image #resultado').html('')
    $('#add_image #resultado').append(
      $('<div></div>').attr('class', 'ui active loader')
    )
    let data = new FormData(form[0])
    let url = imagenes.url + '/evento/' + imagenes.evento + '/image/add'
    let fallo = () => {
      $('#add_image #resultado').html('')
      $('#add_image #resultado').append(
        $('<div></div>').attr('class', 'ui negative message')
          .append($('<i></i>').attr('class', 'inline close icon'))
          .append('<p>No se pudo agregar.</p>')
      )
      $('#add_image #resultado .message .close').on('click', function() {
        $(this).closest('.message')
            .transition('fade');
      });
    }
    $.ajax({
      url: url,
      data: data,
      processData: false,
      contentType: false,
      type: 'POST',
      success: (output) => {
        if (output.estado) {
          window.location.reload()
          return
        }
        fallo()
      },
      error: () => {
        fallo()
      }
    })
  },
  deleteImage: (i) => {
    let media = imagenes.imagenes[i]
    let url = imagenes.url + '/evento/' + imagenes.evento + '/image/delete'
    $.post(url, {media: media}, (output) => {
      if (output.estado) {
        window.location.reload()
      }
    })
  }
}
var videos = {
  videos: [],
  url: '',
  evento: '',
  setup: () => {
    $('#agregar_video').css('cursor', 'pointer').click(() => {
      videos.add()
    })
    $('#videos .trash.icon').css('cursor', 'pointer').click(function() {
      let i = $(this).attr('data-media')
      videos.deleteVideo(i)
    })
  },
  buildForm: () => {
    let form = new Elem('form', {
      class: 'ui form',
      id: 'add_video',
      method: 'post',
      enctype: 'multipart/form-data',
      action: videos.url + '/evento/' + videos.evento + '/video/add'
    }).addChild(
      new Elem('div', {class: 'ui grid'}).addChild(
        new Elem('div', {class: 'row'}).addChild(
          new Elem('div', {class: 'sixteen wide column'}).addChild(
            new Elem('div', {class: 'ui fluid input'}).addChild(
              new Elem('input', {type: 'file', name: 'video[]', multiple: 'multiple'}, false)
            )
          )
        )
      ).addChild(
        new Elem('div', {class: 'row'}).addChild(
          new Elem('div', {class: 'two wide column'}).addChild(
            new Elem('div', {class: 'ui fluid button', type: 'submit'}).html('Agregar')
          )
        )
      )
    )
    return form.build()
  },
  add: () => {
    var vds = $('#videos')
    var div = vds.next('.modal')
    if (div.length > 0) {
      div.remove()
    }
    div = $('<div></div>').attr('class', 'ui modal').append(
      $('<i></i>').attr('class', 'inside close icon')
    )
    if (imagenes.imagenes.length + videos.videos.length >= 12) {
      div.append(
        $('<div></div>').attr('class', 'header').html('Video')
      ).append(
        $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de elementos.')
      )
      vds.after(div)
      div.modal('show')
      return
    }

    div.append(
      $('<div></div>').attr('class', 'header').html('Video')
    ).append(
      $('<div></div>').attr('class', 'content').append(videos.buildForm())
    )
    vds.after(div)
    div.modal('show')
    div.find('form .button').click((e) => {
      div.find('form').submit()
    })
    /*div.find('form').submit((e) => {
      e.preventDefault()
      videos.addImage()
      return false
    })*/
  },
  /*addImage: () => {
    let form = $('#add_image')
    $('#resultado').html('')
    $('#resultado').append(
      $('<div></div>').attr('class', 'ui active loader')
    )
    let data = new FormData(form[0])
    let url = imagenes.url + '/evento/' + imagenes.evento + '/add'
    let fallo = () => {
      $('#resultado').html('')
      $('#resultado').append(
        $('<div></div>').attr('class', 'ui negative message')
          .append($('<i></i>').attr('class', 'inline close icon'))
          .append('<p>No se pudo agregar.</p>')
      )
      $('#resultado .message .close').on('click', function() {
        $(this).closest('.message')
            .transition('fade');
      });
    }
    $.ajax({
      url: url,
      data: data,
      processData: false,
      contentType: false,
      type: 'POST',
      success: (output) => {
        if (output.estado) {
          window.location.reload()
          return
        }
        fallo()
      },
      error: () => {
        fallo()
      }
    })
  },*/
  deleteVideo: (i) => {
    let media = videos.videos[i]
    let url = videos.url + '/evento/' + videos.evento + '/video/delete'
    $.post(url, {media: media}, (output) => {
      if (output.estado) {
        window.location.reload()
      }
    })
  }
}