var Proof = function(productName){
  
  this.timeBeforeFirstShow = 100;
  this.timeBeforeShow = 30000;
  this.timeBeforeHide = 8000;
  this.productName = productName;
  this.stylesPath = '/cproof/proof.css';

  this.visibilityState = false

  this.statesArray = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Puerto Rico","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"];
  this.namesArray = ["Donald","Darrell","Nathan","Mohamed","David","Joseph","Calvin","Randall","Leo","Clarence","John","Jess","Leonard","douglas","Arnold","Gerald","Trevor","DAVID","Edwin","Thomas","Ben","Don","Larry","Diana","Vishwanath","Victor","Guillermo","IGNACIO","Henry","john","DERWIN","Anthony","Ward","Bertrand","Vasos","Pinchus","Derrick","Don","ruth","Danny","Todd","Mark","JOHN","Ray","Norice","Stacy","Chanbler","RITA","Maria","Eugene","William","George","Wen","Normand","Garnett","TIMOTHY","Joanne","Ekow","Charles","Josh","Alan","Rodney","Kelvin","John","Mohammad","Donald","arnold","Steve","CRESCENCIO","Ruben","David","Stephen","Charles","Patrick","Larry","Odell","Michael","Billy","Dorothy","Andre","Orlando","Gary","Rafael"];
  this.quantityOptionsArray = ["1 bottle", "3 bottles", "3 bottles", "6 bottles", "6 bottles", "6 bottles", "6 bottles"]

  this.appendStyles = function() {
    $('head').append(`<link rel="stylesheet" href="${this.stylesPath}">`)
    console.log('styles added')
  }

  this.generateMarkup = function() {
    let state = this.statesArray[this.generateRandomNumberInRange(this.statesArray)]
    let name = this.namesArray[this.generateRandomNumberInRange(this.namesArray)]
    let quantity = this.quantityOptionsArray[this.generateRandomNumberInRange(this.quantityOptionsArray)]
    let image = "/cproof/imgs/" + state.replace(" ", "-") + ".jpg"

    // $(".proof").remove()


    let el = document.querySelector('.proof')
    if (el !== null) {el.remove()}

    document.querySelector('body').insertAdjacentHTML('beforeend', `
      <div class="proof proof--hidden">
        <div class="proof__map">
          <img src="${image}" alt="proof map image">
        </div>
        <div class="proof__text">
          <p class="proof__text-info"><b>${name}</b> from ${state} just bought<br>
          <b>${quantity}</b> of <b>${this.productName}</b></p>
          <div class="proof__verfied">
            <img src="/cproof/imgs/tick.png" alt="">
            <span>Verified purchase</span>
          </div>
        </div>
      </div>
    `);

    this.HTMLInstance = document.querySelector('.proof')
    // console.dir(this.HTMLInstance)
  }

  this.generateRandomNumberInRange = function(arr) {
    return Math.floor(Math.random() * arr.length)
  }

  this.showProof = function() {
    setTimeout(() => {
      this.generateMarkup()
      this.HTMLInstance.classList.remove('proof--hidden')
      this.visibilityState = true
      this.hideProof()

      console.log('cproof shown')
    }, this.timeBeforeShow)
  }

  this.hideProof = function() {
    // debugger
    setTimeout(() => {
      this.HTMLInstance.classList.add('proof--hidden')
      this.visibilityState = false
      this.showProof()
    }, this.timeBeforeHide)
  }



  this.initiateProof = function() {
    this.appendStyles()
    this.generateMarkup()
    setTimeout(()=>this.showProof(), this.timeBeforeFirstShow)
  }
}