import TourGuideClient from "https://cdn.skypack.dev/@sjmc11/tourguidejs@0.0.7"; // Script

let userDisplayName = "test"

const tg = new TourGuideClient({
  progressBar: "#999",
  exitOnEscape: false,
  exitOnClickOutside: false,
  closeButton: false
});

tg.onFinish(()=>{
  if(tag){
    tag.innerHTML = "Tour complete"
    tag.classList = "rounded-md border border-green-200 text-xs ml-auto bg-green-50 text-green-800 px-2 font-medium"
  }
})

console.log("loaded");

function handleTourStart() {
  emailErr.innerHTML = "";

  // Validate email
  if (!emailInput.value) {
    console.log("emailErr", emailErr);
    emailErr.innerHTML = "Enter email";
    return;
  }

  // Create welcome step
  tg.addSteps([
    {
      title: "First things first",
      content:
        `<p class="mb-3">Nice to have to you here ` +
        emailInput.value +
        `<p><p class="mb-3">Before we complete your registration we require your name.<p><input type="text" class="border px-3 py-2 rounded-md w-full" id="userNameInput" placeholder="Display name"/><span id="userNameErr" class="text-red-500 block"></span>`,
      beforeLeave: ()=>{
        return new Promise((resolve, reject)=>{
          const nameInput = document.getElementById("userNameInput");
          const nameErr = document.getElementById("userNameErr");
          if(nameErr) nameErr.innerHTML = ""
          if(nameInput && !nameInput.value) {
            if(nameErr) nameErr.innerHTML = "Enter name"
            return reject(false)
          }
          if(nameInput) userDisplayName = nameInput.value
          return resolve(true)
        })
      }
    },
    {
      title: "Welcome aboard 👋",
      content: `<p class="mb-3">Awesome, you're officially registered.</p><p class="mb-3">Here's a tour of our application to get you started.</p><p class="text-xs opacity-50">Use the arrow keys or click next to continue.</p>`,
      target: "#profile",
      beforeEnter: () => {
        return new Promise((resolve) => {
          if(aside) aside.style.display = 'none'
          if(appMain) appMain.style.display = 'block'
          if(userEmail) userEmail.innerHTML = emailInput.value
          if(userName) userName.innerHTML = userDisplayName
          return resolve(true)
        });
      },
    },
    {
      title: "View your home screen 🏠",
      content: `<p class="mb-3">The home screen is an overview of the application information that is relevant to you.</p><p class="text-xs opacity-50">Use the arrow keys or click next to continue.</p>`,
      target: "#homeBtn",
      beforeEnter: () => {
        return new Promise((resolve) => {
          handleHomeClick()
          return resolve(true)
        });
      },
    },
    {
      title: "View the latest listings 🔍",
      content: `<p class="mb-3">View the latest listings on the website and choose ones that suit you.</p><p class="text-xs opacity-50">Use the arrow keys or click next to continue.</p>`,
      target: "#listingsBtn",
      beforeEnter: () => {
        return new Promise((resolve) => {
          handleListingsClick()
          return resolve(true)
        });
      },
    },
    {
      title: "Looks like you're all set ✅",
      content: `<p class="mb-3">Enjoy using our app.</p>`,
      order: 99999999 // Enforce this as the final step
    }
  ]);

  console.log(emailInput.value);

  tg.start();
}

const trigger = document.getElementById("tg-trigger");
const emailInput = document.getElementById("userEmailInput");
const emailErr = document.getElementById("emailErr");
const appMain = document.getElementById("appMain");
const aside = document.getElementById("aside");
const userName = document.getElementById("userName");
const userEmail = document.getElementById("userEmail");
const homeBtn = document.getElementById("homeBtn");
const sectionHome = document.getElementById("sectionHome");
const listingsBtn = document.getElementById("listingsBtn");
const sectionListings = document.getElementById("sectionListings");
const tag = document.getElementById("tag");

if (trigger) trigger.addEventListener("click", handleTourStart);

const handleHomeClick = ()=>{
  homeBtn.classList = "inline-block rounded-sm py-1 px-3 bg-indigo-100"
  listingsBtn.classList = "inline-block rounded-sm py-1 px-3 bg-gray-100 hover:bg-gray-50 hover:shadow-sm"
  if(sectionHome) sectionHome.style.display = "block"
  if(sectionListings) sectionListings.style.display = "none"
}

if (homeBtn) homeBtn.addEventListener("click", handleHomeClick);

const handleListingsClick = ()=>{
  homeBtn.classList = "inline-block rounded-sm py-1 px-3 bg-gray-100 hover:bg-gray-50 hover:shadow-sm"
  listingsBtn.classList = "inline-block rounded-sm py-1 px-3 bg-indigo-100"
  if(sectionHome) sectionHome.style.display = "none"
  if(sectionListings) sectionListings.style.display = "block"
}

if (listingsBtn) listingsBtn.addEventListener("click", handleListingsClick);