// Wait for the DOM to fully load
document.addEventListener("DOMContentLoaded", function () {
  const editorImage = document.querySelector(
    ".editor-img:not(.w-condition-invisible)"
  );
  const dataStep2 = document.querySelectorAll("[data-step-2]");
  const sendPostcardBtn = document.querySelector("#send-postcard-btn");
  const sendPostcardBtnMobile = document.querySelector(
    ".send-postcard-btn.is-mobile"
  );

  // // Set different sizes for portrait and landscape postcards
  // setOrientation(editorImage);

  // function setOrientation(img) {
  //   const orientation = img.width > img.height ? "landscape" : "portrait";
  //   img.classList.add(orientation);
  //   img.parentElement.style.display = "flex";
  // }

  // Color Picker BG Change
  let pickedColor = "var(--blue)";

  const colorPickerOptions = document.querySelectorAll(
    ".editor-color-picker-option"
  );
  colorPickerOptions.forEach((option) => {
    option.addEventListener("click", function () {
      // Set active color
      colorPickerOptions.forEach((opt) => opt.classList.remove("is--active"));
      this.classList.add("is--active");

      // Get the color by the attribute of the clicked element
      var colorValue = this.getAttribute("color");
      const colorMap = {
        blue: "var(--blue)",
        purple: "var(--purple)",
        green: "var(--green)",
        orange: "var(--orange)",
        yellow: "var(--yellow)",
        pink: "var(--pink)",
      };

      // Change the background-color of #editor-bg
      if (colorMap.hasOwnProperty(colorValue)) {
        pickedColor = colorMap[colorValue];
        const elementsToChange = [
          document.querySelector("#editor-bg"),
          // document.querySelector(".send-postcard-btn"),
          document.querySelector(".copy-to-clipboard-input-btn"),
          document.querySelector(".editor-preview-btn"),
        ];
        elementsToChange.forEach((el) => {
          if (el) {
            el.style.backgroundColor = colorMap[colorValue];
          }
        });
      }
      setURL();
    });
  });

  // Prevent form submission
  Webflow.push(function () {
    $("#postcard-form").submit(function () {
      return false;
    });
  });

  // Get URL
  sendPostcardBtn.addEventListener("click", function () {
    const editorPreviewBtn = document.querySelector("#editor-preview-btn");
    if (editorPreviewBtn) {
      editorPreviewBtn.setAttribute("href", myUrl);
    }
  });

  sendPostcardBtnMobile.addEventListener("click", function () {
    const editorPreviewBtn = document.querySelector("#editor-preview-btn");
    if (editorPreviewBtn) {
      editorPreviewBtn.setAttribute("href", myUrl);
    }

    // Change Nav Logo to white again
    if (window.innerWidth < 991) {
      gsap.to(".nav-logo", {
        color: "#fff",
        duration: 0.3,
      });
      // document.querySelector(".nav-logo").style.color = "white";
    }
  });

  // Typing on form field
  const inputFields = document.querySelectorAll(".input-field, .input-message");
  inputFields.forEach((inputField) => {
    inputField.addEventListener("keyup", setURL);
    inputField.addEventListener("change", setURL);
  });

  // Store input in URL
  let myUrl;

  function setURL() {
    let domain = location.host;
    let toName = encodeURIComponent(document.querySelector("#to-name").value);
    let fromName = encodeURIComponent(
      document.querySelector("#from-name").value
    );
    let message = encodeURIComponent(
      document.querySelector(".input-message").value
    );
    let orientation = encodeURIComponent(
      document
        .querySelector("[data-orientation]")
        .getAttribute("data-orientation")
    );
    let imageSrc = encodeURIComponent(
      document
        .querySelector(".editor-img:not(.w-condition-invisible)")
        ?.getAttribute("src")
    );
    // Combine data into a JSON string and encode it
    myUrl = `https://${domain}/postcard?to-name=${toName}&from-name=${fromName}&message=${message}&imageSrc=${imageSrc}&orientation=${orientation}&pickedColor=${pickedColor}`;
  }

  // Select the input fields and the send-postcard button
  const toNameInput = document.querySelector("#to-name");
  const fromNameInput = document.querySelector("#from-name");
  const messageInput = document.querySelector(".input-message");

  // Function to check if all input fields have a value
  function checkInputs() {
    var toName = toNameInput.value;
    var fromName = fromNameInput.value;
    var message = messageInput.value;

    // Check if all input fields have a value
    var allInputsFilled = toName && fromName && message;

    // Add or remove the class based on the condition
    dataStep2.forEach((e) => {
      if (allInputsFilled) {
        setURL();
        e.classList.remove("is--unfinished");
        sendPostcardBtnMobile.classList.add("is--enabled");
        if (window.innerWidth > 991) {
          sendPostcardBtn.classList.add("is--enabled");
        }

        // SHARE POSTCARD OPTIONS
        let title = document.title;

        // Share on Facebook
        const shareFacebook = document.querySelector("[data-share-facebook]");
        if (shareFacebook) {
          shareFacebook.setAttribute(
            "href",
            "https://www.facebook.com/sharer/sharer.php?u=" +
              encodeURIComponent(myUrl) +
              "&title=" +
              encodeURIComponent(title)
          );
          shareFacebook.setAttribute("target", "_blank");
        }

        // Share on Twitter
        const shareTwitter = document.querySelector("[data-share-twitter]");
        if (shareTwitter) {
          shareTwitter.setAttribute(
            "href",
            "https://twitter.com/share?url=" +
              encodeURIComponent(myUrl) +
              "&text=" +
              encodeURIComponent(title)
          );
          shareTwitter.setAttribute("target", "_blank");
        }

        // Share on LinkedIn
        const shareLinkedIn = document.querySelector("[data-share-linkedin]");
        if (shareLinkedIn) {
          shareLinkedIn.setAttribute(
            "href",
            "https://www.linkedin.com/shareArticle?mini=true&url=" +
              encodeURIComponent(myUrl) +
              "&title=" +
              encodeURIComponent(title)
          );
          shareLinkedIn.setAttribute("target", "_blank");
        }

        // Share on WhatsApp
        const shareWhatsApp = document.querySelector("[data-share-whatsapp]");
        if (shareWhatsApp) {
          shareWhatsApp.setAttribute(
            "href",
            "https://api.whatsapp.com/send?text=" +
              encodeURIComponent(title + "\n" + myUrl)
          );
          shareWhatsApp.setAttribute("target", "_blank");
        }

        // Share via Email
        const shareMail = document.querySelector("[data-share-mail]");
        if (shareMail) {
          shareMail.setAttribute(
            "href",
            "mailto:?subject=" +
              encodeURIComponent("Check out this awesome digital postcard!") +
              "&body=" +
              encodeURIComponent(
                "Hey there!\n\nI wanted to share this amazing digital postcard with you. Click the link to view:\n\n" +
                  myUrl
              )
          );
          shareMail.setAttribute("target", "_blank");
        }

        const copyButton = document.getElementById("copy-to-clipboard");
        const copyInput = document.getElementById("copy-to-clipboard-input");
        // Add the current page URL to the input value
        if (copyInput) {
          copyInput.setAttribute("value", myUrl);
        }

        if (copyButton) {
          copyButton.addEventListener("click", function () {
            navigator.clipboard.writeText(myUrl).then(() => {
              // Update the text of the "copy-status" element
              const copyText = document.getElementById("copy-status");
              if (copyText) {
                copyText.textContent = "Copied!";
                setTimeout(function () {
                  copyText.textContent = "Copy";
                }, 1200);
              }
            });
          });
        }
      } else {
        if (window.innerWidth > 991) {
          sendPostcardBtn.classList.remove("is--enabled");
        }
        sendPostcardBtnMobile.classList.remove("is--enabled");
        dataStep2.forEach((e) => {
          e.classList.add("is--unfinished");
        });
      }
    });
  }

  // Add input event listeners to all input fields
  toNameInput.addEventListener("input", checkInputs);
  fromNameInput.addEventListener("input", checkInputs);
  messageInput.addEventListener("input", checkInputs);

  // FLUID TEXTAREA RESIZE
  const textarea = document.getElementsByTagName("textarea")[0];

  if (window.innerWidth > 991) {
    textarea.addEventListener("input", function () {
      // Get the length of the text entered in the textarea
      const textLength = textarea.value.length;

      // Calculate the font size based on the text length
      const minFontSize = 2.5; // Minimum font size
      const maxFontSize = 5; // Maximum font size
      const fontSize = Math.max(minFontSize, maxFontSize - textLength * 0.02); // Adjust the scaling factor as needed

      // Apply the calculated font size to the textarea
      textarea.style.fontSize = fontSize + "rem";
    });
  }

  // MAX CHAR AMOUNT FOR TEXTAREA
  var charCount = document.querySelector("[tf-editor-char-count]");

  textarea.addEventListener("input", function () {
    var currentChars = textarea.value.length;
    charCount.textContent = currentChars + "/200";

    if (currentChars >= 200) {
      textarea.value = textarea.value.substring(0, 200);
      charCount.textContent = "200/200";
    }
  });
});