var proportionals = []
var widths = []
var heights = []
var changeables = []
function register_resizeables() {
  proportionals.push($('img'))
  //widths.push()
  heights.push($('#backgrounds div'))
  changeables.push($('.sticky'))
}

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

function mod_height(elem, p) {
  elem.height = (elem.height * p)
}
function mod_width(elem, p) {
  elem.width = (elem.width * p)
}
function mod_dim(elem, p) {
  mod_width(elem, p)
  mod_height(elem, p)
}
function resize() {
  let p = 400 / 1080

  $.each(proportionals, (i, el) => {
    mod_dim(el, p)
  })
  $.each(widths, (i, el) => {
    mod_width(el, p)
  })
  $.each(heights, (i, el) => {
    mod_height(el, p)
  })
}

class Amount {
  constructor(elem) {
    this.elem = elem
    this.minus = elem.parent().find('.minus')
    this.plus = elem.parent().find('.plus')
    this.n = 0
    this.setup()
    this.max = 999
  }
  setup() {
    this.elem.val(0)
    this.plus.click((e) => {
      this.increment()
      this.print()
    })
    this.minus.click((e) => {
      this.decrement()
      this.print()
    })
    this.elem.change((e) => {
      this.n = parseInt(this.elem.val())
      this.print()
    })
    this.print()
  }
  enable_button(name) {
    this[name].removeClass('disabled')
    if (name == 'plus') {
      this[name].html('<i class="plus icon"></i>')
    }
    if (name == 'minus') {
      this[name].html('<i class="minus icon"></i>')
    }
  }
  disable_button(name) {
    this[name].addClass('disabled')
    this[name].html('')
  }
  check_limits() {
    this.enable_button('plus')
    this.enable_button('minus')
    if (this.n > this.max) {
      this.n = this.max
    }
    if (this.n == this.max) {
      this.disable_button('plus')
    }

    if (this.n < 0) {
      this.n = 0
    }
    if (this.n == 0) {
      this.disable_button('minus')
    }
  }
  increment() {
    this.n += 1
  }
  decrement() {
    this.n -= 1
  }
  get value() {
    return this.n
  }
  print() {
    this.check_limits()
    this.elem.val(this.n)
  }
}

class Colors {
  constructor(elem, changing = false) {
    this.color = {
      white: 'blanco',
      black: 'negro',
      blue: 'azul',
      green: 'verde',
      yellow: 'amarillo',
      orange: 'naranjo',
      red: 'rojo'
    }
    this.picked = 'blue'
    this.elem = elem
    this.input = elem.find('input[name="color"]')
    this.changing = null
    if (changing) {
      this.changing = elem.parent().parent().find('.column2 img')
    }
    this.setup()
  }
  setup() {
    this.elem.find('.circle').each((i, el) => {
      $(el).click((e) => {
        let color = $(el).attr('class').split(' ')[0]
        this.change_color(color)
      })
    })
    this.change_color('blue')
  }
  default_color_format(el) {
    $(el).removeClass('selected')
  }
  change_color(color) {
    this.picked = this.color[color]
    this.input.val(this.picked)
    this.elem.find('.circle').each((i, el) => {
      this.default_color_format(el)
    })
    this.elem.find('.' + color + '.circle').addClass('selected')
    if (this.changing != null) {
      this.changing.attr('src', './assets/images/' + this.picked + '.png')
    }
  }
}

let smtp = {
  Host: 'smtp.google.com',
  Username: 'rsalinas85@gmail.com',
  Password: 'salinas1234',
  From: 'ventas@3dstand.cl'
}

let sticky_form = {
  elem: $('.sticky form'),
  setup: function() {
    this.elem.submit((e) => {
      e.preventDefault()
      this.submit()
      return false
    })
  },
  submit: function() {
    console.debug('submit sticky')
  }
}
let cotiza_form = {
  elem: $('#corporativos form'),
  setup: function() {
    this.elem.submit((e) => {
      e.preventDefault()
      this.submit()
      return false
    })
    this.file = this.elem.find('input[type="file"]')
    this.elem.find('.file').click((e) => {
      this.file.trigger('click')
    })
  },
  submit: function() {
    let email = this.elem.find('[name="email"]').val()
    let data = new FormData(this.elem[0])
    let body = [
      'Nombre: ' + this.elem.find('[name="nombre"]').val(),
      'E-mail: ' + email,
      'Teléfono: ' + this.elem.find('[name="telefono"]').val(),
      '',
      'Color: ' + this.elem.find('[name="color"]').val(),
      'Cantidad: ' + this.elem.find('[name="cantidad"]').val(),
      this.elem.find('[name="mensaje"]').val()
    ]
    let content = {
      Host: smtp.Host,
      Username: smtp.Username,
      Password: smtp.Password,
      To: email,
      From: smtp.From,
      Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
      Body: body.join('<br />'),
      Attachments: [
        {
          name: "Logo",
          data: data.get('archivo')
        }
      ]
    }
    console.debug(email)
    //Email.send()
  }
}
let conversemos_form = {
  elem: $('#contacto'),
  setup: function() {
    this.elem.submit((e) => {
      e.preventDefault()
      this.submit()
      return false
    })
  },
  submit: function() {
    let email = this.elem.find('[name="email"]').val()
    let body = [
      'Nombre: ' + this.elem.find('[name="nombre"]').val(),
      'E-mail: ' + email,
      '',
      this.elem.find('[name="mensaje"]').val()
    ]
    let content = {
      Host: smtp.Host,
      Username: smtp.Username,
      Password: smtp.Password,
      From: smtp.From,
      To: email,
      Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
      Body: body.join('<br />')
    }
  }
}

let testimonios = {
  testimonios: [
    "Este soporte que compré en @Stand-cl me cambió la vida, me sirve para el teléfono y el ipad, y ya no tengo que andar acomodando los aparatos en cualquier parte para las videollamadas",
    "Siiii todo mi gusto.. me encantó lo completo que es. Gracias",
    "Está super cool se ve de buena calidad",
    "Llego el mío, y es excelente, estoy feliz con mi compra",
    "Hola!!Me llegó el pedido, Muchas gracias muy bello. Me salvaste la vida",
    "Perfecto el producto, funciona impecable, muchas gracias",
    "Están bacanes! muchísimas gracias. Le regalé a mis viejos y lo aman",
    "Hola! Quería decirte que me encantaron los soportes, Muy útiles!",
    "Compré 3 y olvidé decirte que los encontré geniales! Me encantaron",
    "Diseño simple y funcional, minimalista y excelente precio, despacho súper Rápido.. gracias!"
  ],
  elem: $('#felices .testimonios'),
  page: 0,
  setup: function() {
    this.draw()
  },
  draw: function() {
    var n = this.page * 3
    this.elem.find('.testimonio').each((i, el) => {
      if (n >= this.testimonios.length) {
        $(el).html('')
        return
      }
      $(el).html(this.testimonios[n])
      n += 1
    })
    this.draw_nav()
  },
  draw_nav: function() {
    let N = Math.ceil(this.testimonios.length / 3)
    let k = this.page
    let nav = this.elem.parent().find('.nav')
    let tests = this
    nav.html('')
    for (var i = 0; i < N; i ++) {
      var circle = $('<i></i>').attr('class', 'small circle outline icon').css('cursor', 'pointer').attr('data-page', i)
      if (i == k) {
        circle.removeClass('outline')
      }
      circle.click(function(e) {
        tests.page = parseInt($(this).attr('data-page'))
        tests.draw()
      })
      nav.append(circle)
    }
  }
}

$(document).ready(function() {
  register_resizeables()

  if (vw < 1080) {
    resize()
  }

  $('.menu.sticky').sticky()
  $('.column2 .sticky').sticky({
    context: '#column'
  })
  $('#subir').sticky()

  $('.shopping.cart').innerText = 0

  window.onresize = resize;

  let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
  let sticky_color = new Colors($('.sticky .colores'), true)
  sticky_form.setup()
  let cotiza_amount = new Amount($('#corporativos .input input[name="cantidad"]'))
  let cotiza_color = new Colors($('#corporativos .colores'))
  cotiza_form.setup()
  conversemos_form.setup()
  testimonios.setup()
})