const tg = new tourguide.TourGuideClient();
document.querySelector('#start').addEventListener('click', () => {
  tg.start()  
});

tg.onBeforeStepChange(()=>{
  console.log('\n%c-------------------- Step Change --------------------', 'color:red;font-weight:bold;');
  console.log('%cEvent onBeforeStepChange. arrow function this...','background-color:lightyellow;', this);
});

tg.onAfterStepChange(function(){
  console.log('%cEvent onBeforeStepChange. function this...','background-color:lightgreen;', this);
});

tg.onAfterExit(function(){
  console.log('%c The tour has closed ', 'background:#f55; color:#fff;', this);
  // Empty the element after closing
  const tgBody = this.dialog.querySelector('#tg-dialog-body');
  if (tgBody) {
    while(tgBody.lastChild){
      tgBody.removeChild(tgBody.lastChild);
    }
  }
})


// STEP1
const step1Content = `
  <p>Enter your name.</p>
  <input id="step1NameInput" type="text">
  <p id="step1NameInputError" style="color:red;"></p>
  `;
const step1 = {
  title: 'Enter name',
  content: step1Content,
  
  // Enter events
  beforeEnter: (currentStep, nextStep) => {
    console.log('step1 beforeEnter:', currentStep);
    tg.setOptions({
      hidePrev: true
    });
  },
  afterEnter: (currentStep, nextStep) => {
    console.log('step1 afterEnter:', currentStep);
  },
  
  // Leave events
  beforeLeave: (currentStep, nextStep) => {
    console.log('step1 beforeLeave:', currentStep);
    return new Promise((resolve, reject) => {
      const name = document.querySelector('#name'); // get front name element
      const step1NameInput = document.querySelector('#step1NameInput');
      const step1NameInputError = document.querySelector('#step1NameInputError');
      console.log("nameInput", step1NameInput)
      
      if (step1NameInput){
        if (!step1NameInput.value) {
          step1NameInputError.textContent = 'enter name';
          return reject(false);
        }
        name.textContent = step1NameInput.value;
      }
      return resolve(true);
    });
    
  },
  afterLeave: (currentStep, nextStep) => {
    console.log('step1 afterLeave:', currentStep);
  }
}

// STEP2
// create step elements
const step2ContentDiv = document.createElement('div');
const step2ContentP = document.createElement('p');
step2ContentP.textContent = 'Enter your email.';
step2ContentDiv.appendChild(step2ContentP);
const step2ContentInput = document.createElement('input')
step2ContentInput.setAttribute('type', 'email');
step2ContentDiv.appendChild(step2ContentInput);
const step2ContentInputError = document.createElement('p')
step2ContentInputError.setAttribute('style', 'color:red;');
step2ContentDiv.appendChild(step2ContentInputError);

const step2 = {
  title: 'Enter email',
  content: step2ContentDiv,
  
  // Enter events
  beforeEnter: (currentStep, nextStep) => {
    console.log('step2 beforeEnter:', currentStep, nextStep);
    tg.setOptions({
      hidePrev: false
    });
  },
  afterEnter: (currentStep, nextStep) => {
    console.log('step2 afterEnter:', currentStep);
  },
  
  // Leave events
  beforeLeave: (currentStep, nextStep) => {
    console.log('step2 beforeLeave:', currentStep);
    return new Promise((resolve, reject) => {
      const email = document.querySelector('#email'); // get front email element
      const val = step2ContentInput.value;
      step2ContentInputError.textContent = '';
      
      if (val === '') {
        step2ContentInputError.textContent = 'enter email';
        return reject(false);
      }

      email.textContent = val;

      return resolve(true);
    });
  },
  afterLeave: (currentStep, nextStep) => {
    console.log('step2 afterLeave:', currentStep);
  }
}


// STEP3
const step3 = {
  title: 'Finish!',
  target: '#end',
  content: 'Click here for details'
}

// add steps
tg.addSteps([step1, step2, step3])