const CONFIGURATOR_URL = "https://directsamenstellen.nl";

const RP_CONFIGURATOR_ID_TAG_NAME = "data-rp-configurator-id";
const RP_WIDGET_CONFIGURATOR_TAG_NAME = "data-rp-is-widget"
const RP_ID_DATA_TAG_NAME= "data-rp-unique-id";
const RP_CUSTOM_ID_DATA_TAG_NAME= "data-rp-id";
const RP_BUTTON_ID_TAG_NAME = "data-rp-button-id";

const RP_INTERNAL_EVENT_NAME= "message";
const RP_EXTERNAL_EVENT_NAME= "rp-event";


const reuzenpandaSnippet = {};
reuzenpandaSnippet.RP_CONFIGURATORS = [];
reuzenpandaSnippet.RP_BUTTONS = [];

reuzenpandaSnippet.RP_MESSAGE_EXECUTORS = [
  {
    id: "gtm-push",
    executor: (data) => {
      window.dataLayer?.push(data[0]);
      window.rpDataLayer?.push(data[0]);
    }
  },
  {
    id: "set-widget-open-state",
    executor: (data) => {
      if (data.isOpen) {
        reuzenpandaSnippet.open(data.configuratorId);
      } else {
        reuzenpandaSnippet.removeAnchorsFromUrl();
        reuzenpandaSnippet.close(data.configuratorId);
      }

      for (const button of reuzenpandaSnippet.filterButtonsByValue(data.configuratorId)) {
        button.setOpen(!data.isOpen);
      }
    }
  },
  {
    id: "route",
    executor: (data) => {
      if (!data.url) {
        return;
      }

      if (!data.url.startsWith("http://") && !data.url.startsWith("https://")) {
        data.url = "https://" + data.url;
      }
      window.location.href = data.url;
    }
  }
];

reuzenpandaSnippet.RP_ANCHOR_EXECUTORS = [
  {
    regex: new RegExp("reuzenpanda-open-all"),
    executor: () => {
      reuzenpandaSnippet.open()
    }
  },
  {
    regex: new RegExp("reuzenpanda-open-(\\w{8}(-\\w{4}){3}-\\w{12}?)"),
    executor: (anchor) => {
      const id = new RegExp("reuzenpanda-open-(\\w{8}(-\\w{4}){3}-\\w{12}?)").exec(anchor)[1];
      reuzenpandaSnippet.open(id)
    }
  }
];

reuzenpandaSnippet.removeAnchorsFromUrl = () => {
  const url = window.location.href;
  const [baseUrl, ...hashParts] = url.split('#');

  const reuzenpandaHashParts = hashParts.filter(part => {
    const matchingExecutors = reuzenpandaSnippet.RP_ANCHOR_EXECUTORS.some(ex => ex.regex.test(part));
    if (matchingExecutors) {
      return true;
    }

    return false;
  });

  if (reuzenpandaHashParts.length === 0) {
    return;
  }

  const newUrl = `${baseUrl}`;
  window.history.replaceState(null, document.title, newUrl);
};

(() => {
  const configurators = [];
  const showActionButtons = true;
  const showWidget = true;

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", async function(event) {
      setup();
      load();
    });
  } else {
    setup();
    load();
  }


  function setup() {
    configurators.forEach((configurator) => {
      if (showWidget) {
        loadWidgetContainer(configurator.id);
      }

      if (configurator.displaySettings?.showActionButton && showActionButtons) {
        loadButtonContainer(configurator.id);
      }
    });

    loadStyleSheet("https://snippet.reuzenpanda.nl/api/snippet/v1/css");
    

    window.addEventListener(RP_INTERNAL_EVENT_NAME, convertMessageToExecutorEvent);
    window.addEventListener(RP_EXTERNAL_EVENT_NAME, handleExecutorEvent);
    window.addEventListener('hashchange', handleHashChange);
  }

  function load() {
    configurators.forEach((configurator) => {
      loadConfigurator(configurator.id);

      if (configurator.displaySettings?.showActionButton && showActionButtons) {
        loadButton(configurator.id);
      }
    });

    setTimeout(() => {
      handleAnchor(window.location.href);
    }, 2000);
  }


  function loadWidgetContainer(configuratorId) {
    let div = document.createElement("div");
    div.setAttribute(RP_CONFIGURATOR_ID_TAG_NAME, configuratorId);
    div.setAttribute(RP_WIDGET_CONFIGURATOR_TAG_NAME, "true");
    div.classList.add("reuzenpanda-configurator");
    div.classList.add("widget");

    document.body.appendChild(div);
  }

  function loadButtonContainer(configuratorId) {
    const existingButton = document.querySelector(`[${RP_BUTTON_ID_TAG_NAME}="${configuratorId}"]`);
    if (existingButton) {
      return;
    }


    let div = document.createElement("div");
    div.classList.add("configurator-button");
    div.setAttribute(RP_BUTTON_ID_TAG_NAME, configuratorId);

    document.body.appendChild(div);
  }


  function loadStyleSheet(url) {
    let styleSheet = document.createElement("link");
    styleSheet.rel = "stylesheet";
    styleSheet.type = "text/css"
    styleSheet.href = url;

    document.getElementsByTagName("head")[0].appendChild(styleSheet);
  }


  function loadConfigurator(configuratorId) {
    let containers = document.querySelectorAll(`[${RP_CONFIGURATOR_ID_TAG_NAME}]`);

    for (const container of containers) { 
      if (container.getAttribute(RP_CONFIGURATOR_ID_TAG_NAME) === configuratorId) {
        const isWidget = container.getAttribute(RP_WIDGET_CONFIGURATOR_TAG_NAME);

        let id = uuidv4();

        container.setAttribute(RP_ID_DATA_TAG_NAME, id);
        container.appendChild(getIframe(id, configuratorId, isWidget ? "widget" : "embedded"));	
        let configurator = generateConfigurator(id, configuratorId, container);

        reuzenpandaSnippet.RP_CONFIGURATORS.push(configurator);
      }
    }

  
    function getIframe(id, configuratorId, type) {
      let iframe = document.createElement("iframe");
      iframe.src = CONFIGURATOR_URL + `/configurator/${configuratorId}/${type}/1?messageId=${id}`;
      iframe.classList.add("reuzenpanda-iframe");

      return iframe;
    }

    function generateConfigurator(id, configuratorId, element) {
      return {
        id: id,
        configuratorId: configuratorId,
        element: element,
        setOpen: (open) => {
          if (open) {
            element.classList.add("--visible");
          } else {
            element.classList.remove("--visible");
          }
        }
      };
    }
  }

  function loadButton(configuratorId) {
    let containers = document.querySelectorAll(`[${RP_BUTTON_ID_TAG_NAME}]`);

    for (const container of containers) { 
      if (container.getAttribute(RP_BUTTON_ID_TAG_NAME) === configuratorId) {
        let id = uuidv4();

        container.setAttribute(RP_ID_DATA_TAG_NAME, id);
        container.appendChild(getButtonIframe(id, configuratorId));
        let button = generateButton(id, configuratorId, container);

        reuzenpandaSnippet.RP_BUTTONS.push(button);
      }
    }


    function generateButton(id, configuratorId, element) {
      return {
        id: id,
        configuratorId: configuratorId,
        element: element,
        setOpen: (open) => {
          if (open) {
            element.classList.remove("--invisible");
          } else {
            element.classList.add("--invisible");
          }
        }
      };
    }

    function getButtonIframe(id, configuratorId) {
      let iframe = document.createElement("iframe");
      iframe.src = CONFIGURATOR_URL + `/configurator/${configuratorId}/button?messageId=${id}`;
      iframe.classList.add("reuzenpanda-iframe");

      return iframe;
    }
  }


  function convertMessageToExecutorEvent(message) {
    if (!message || !message.data) {
      return;
    }
    
    const configuratorElements = document.querySelectorAll(`[${RP_CONFIGURATOR_ID_TAG_NAME}]`);
    let customId = "";
    for (const c of configuratorElements) {
      if (c.getAttribute(RP_ID_DATA_TAG_NAME) === message.data.messageId) {
        customId = c.getAttribute(RP_CUSTOM_ID_DATA_TAG_NAME);
      }
    }

    const myEvent = new CustomEvent(RP_EXTERNAL_EVENT_NAME, {
      detail: {
        id: message.data.id,
        data: message.data.data,
        messageId: message.data.messageId,
        customId: customId
      }
    });

    window.dispatchEvent(myEvent);
  }

  function handleExecutorEvent(e) {
    const executors = reuzenpandaSnippet.RP_MESSAGE_EXECUTORS.filter((ex) => ex.id === e.detail.id);
    for (const executor of executors) {
      executor.executor(e.detail.data);
    }
  }

  function handleHashChange(e) {
    if (e.newURL === undefined || e.newURL === null) {
      return;
    }

    if (!e.newURL.includes("#")) {
      return;
    }
  
    handleAnchor(e.newURL);
  }

  function handleAnchor(url) {
    let anchor = url.split("#")[1];
    const executors = reuzenpandaSnippet.RP_ANCHOR_EXECUTORS.filter((ex) => ex.regex.test(anchor));
    for (const executor of executors) {
      executor.executor(anchor);
    }
  }
})();

function uuidv4() {
  return "000000000".replace(/[018]/g, c =>
    (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
  );
}


reuzenpandaSnippet.filterConfiguratorsByValue = (value) => {
  return reuzenpandaSnippet.RP_CONFIGURATORS.filter((c) => 
    c.id === value ||
    c.configuratorId === value ||
    c.name === value || 
    c.customid === value
  ) ?? [];
}

reuzenpandaSnippet.filterButtonsByValue = (value) => {
  return reuzenpandaSnippet.RP_BUTTONS.filter((c) => 
    c.id === value ||
    c.configuratorId === value ||
    c.name === value || 
    c.customid === value
  ) ?? [];
}


reuzenpandaSnippet.open = (key) => {
  for (const configurator of key ? reuzenpandaSnippet.filterConfiguratorsByValue(key) : reuzenpandaSnippet.RP_CONFIGURATORS) { 
    if (!configurator) {
      continue;
    }

    configurator.setOpen(true);
    
    for (const button of reuzenpandaSnippet.filterButtonsByValue(configurator.configuratorId)) {
      button.setOpen(false);
    }
  }
}

reuzenpandaSnippet.close = (key) => {
  for (const configurator of key ? reuzenpandaSnippet.filterConfiguratorsByValue(key) : reuzenpandaSnippet.RP_CONFIGURATORS) { 
    if (!configurator) {
      continue;
    }

    configurator.setOpen(false);

    for (const button of reuzenpandaSnippet.filterButtonsByValue(configurator.configuratorId)) {
      button.setOpen(true);
    }
  }
}


reuzenpandaSnippet.loadConfigurator = (configuratorId) => {
  let containers = document.querySelectorAll(`[${RP_CONFIGURATOR_ID_TAG_NAME}]`);

  for (const container of containers) { 
    if (container.getAttribute(RP_CONFIGURATOR_ID_TAG_NAME) !== configuratorId) {
      continue;
    }

    const isWidget = container.getAttribute(RP_WIDGET_CONFIGURATOR_TAG_NAME);

    let id = uuidv4();

    container.setAttribute(RP_ID_DATA_TAG_NAME, id);
    container.appendChild(getIframe(id, configuratorId, isWidget ? "widget" : "embedded"));
    let configurator = generateConfigurator(id, configuratorId, container);

    reuzenpandaSnippet.RP_CONFIGURATORS.push(configurator);
  }


  function getIframe(id, configuratorId, type) {
    let iframe = document.createElement("iframe");
    iframe.src = CONFIGURATOR_URL + `/configurator/${configuratorId}/${type}/1?messageId=${id}`;
    iframe.classList.add("reuzenpanda-iframe");

    return iframe;
  }

  function generateConfigurator(id, configuratorId, element) {
    return {
      id: id,
      configuratorId: configuratorId,
      element: element,
      setOpen: (open) => {
        if (open) {
          element.classList.add("--visible");
        } else {
          element.classList.remove("--visible");
        }
      }
    };
  }
}