export { dsBlockedContent, dsBlockedContentStory };

function dsBlockedContent(params) {
  params = params || {};

  const blockedContentTmpl = document.createElement('div');
  // NOTE: this should match output of blocked-content.njk and blocked-content.tsx
  blockedContentTmpl.innerHTML = `
    <div class="ds-blocked-content">
      <div class="ds-blocked-content__inner">
        <div class="ds-blocked-content__content">
          <h2 class="ds-blocked-content__title">Hoppsan, här saknas något</h2>
          <div class="ds-blocked-content__body">Innehållet ${params.vendor ? `från ${params.vendor}` : ''} kunde inte visas på grund av dina val i kakinställningarna.</div>
        </div>
        <button type="button" class="ds-btn ds-btn--secondaryFilled ds-btn--default ds-btn--md ds-btn--full-width">
          <div class="ds-btn__inner">
            <span>Hantera kakor</span>
            <div class="ds-spinner ds-spinner--small ds-spinner--primary">
              <div class="ds-spinner__inner"></div>
            </div>
          </div>
        </button>
      </div>
    </div>
  `;

  const newBlockedContent = blockedContentTmpl.getElementsByClassName('ds-blocked-content')[0];
  const btnEl = newBlockedContent.getElementsByClassName('ds-btn')[0];
  const bodyEl = newBlockedContent.getElementsByClassName('ds-blocked-content__body')[0];

  if (params.title) {
    const titleEl = newBlockedContent.getElementsByClassName('ds-blocked-content__title')[0];
    titleEl.textContent = params.title;
  }

  if (params.body) {
    bodyEl.textContent = params.body;
  }

  if (params.link) {
    const linkContainerEl = document.createElement('div');
    const linkEl = document.createElement('a');
    linkEl.href = params.link;
    linkEl.innerText = params.link;
    linkEl.className = 'ds-blocked-content__link';
    if (params.vendor) {
      linkEl.setAttribute('aria-label', `Länk till innehåll på ${params.vendor}`);
    }
    linkContainerEl.appendChild(linkEl);
    bodyEl.appendChild(linkContainerEl);
  }

  if (params.classNames) {
    newBlockedContent.classList.add(params.classNames);
  }

  if (params.forcePx) {
    newBlockedContent.classList.add('ds-force-px');
    btnEl.classList.add('ds-force-px');
  }

  if (params.attributes) {
    for (const [key, value] of Object.entries(params.attributes)) {
      newBlockedContent.setAttribute(key, value);
    }
  }

  if (params.elementAttributes) {
    for (const [key, value] of Object.entries(params.elementAttributes)) {
      btnEl.setAttribute(key, value);
    }
  }

  return newBlockedContent;
}

/** only use in storybook */
function dsBlockedContentStory() {
  const blockedContentElements = Array.from(document.getElementsByClassName('js-ds-blocked-content-story'));
  if (!blockedContentElements.length) return;

  blockedContentElements.forEach((blockedContentEl) => {
    const params = JSON.parse(blockedContentEl.getAttribute('data-params'));

    const newBlockedContent = dsBlockedContent(params);
    blockedContentEl.replaceWith(newBlockedContent);
  });
}
