var ConsentModal = View.extend({
  
  el: "#consent_modal",
  
  events: {
    "change [name=AccountTermsConsent]": "changeConsent",
    "click #consent_proceed": "proceed",
    "click #consent_logout": "logout",
    "click a": "navigate",
  },
  
  initialize: function(){
    this.$form = this.$(".form")
    this.$msg = this.$(".msg")
    this.$checkbox = this.$("[name=AccountTermsConsent]")
  },

  check: function(){
    var status = localStorage.getItem('account_terms.consent')
    if (status !== 'true') {
      this.show()
      return true
    } else {
      this.hide()
      app.demand_consent = false
      return false
    }
  },

  show: function(){
    app.demand_consent = true
    this.$el.show()
    setTimeout(function(){
      this.$el.addClass('visible')
    }.bind(this), 20)
    app.curtain.show()
    app.curtain.classList.add('opaque')
  },

  hide: function(){
    app.curtain.hide()
    this.$el.removeClass('visible')
    setTimeout(function(){
      this.$el.hide()
      app.curtain.classList.remove('opaque')
    }.bind(this), 300)
  },

  navigate: function(e){
    var href = $(e.currentTarget).attr('href').replace('#', '')
    console.log(href)
    this.hide()
    app.router.go(href)
  },
  
  changeConsent: function(){
    var state = this.$checkbox.prop("checked")
    // if (state) {
    //   this.$el.addClass('consent-yes').removeClass('consent-no')
    // } else {
    //   this.$el.addClass('consent-no').removeClass('consent-yes')
    // }
  },

  proceed: function(){
    var state = this.$checkbox.prop("checked")
    if (!state) {
      return
    }
    app.demand_consent = false
    this.hide()
    localStorage.setItem('account_terms.consent', 'true')
  },

  logout: function(){
    app.demand_consent = false
    this.hide()
    localStorage.setItem('account_terms.consent', 'false')
    app.router.go("account/logout")
  },

})