export { dsTeaserStandard, dsTeaserStandardStory };

function dsTeaserStandard(params = {}) {
  const teaser = document.createElement('a');
  // NOTE: this should match output of teaser-standard.tsx for a subset of the parameters
  teaser.innerHTML = `
    <div class="ds-teaser__content">
      <div class="ds-teaser__content-inner">
        <h2 class="ds-teaser__title"></h2>
        <p class="ds-teaser__text"></p>
      </div>
    </div>`;
  teaser.classList.add('ds-teaser');
  teaser.classList.add('ds-teaser--standard');
  teaser.classList.add('ds-teaser--standard-without-byline');

  if (params.targetLink) {
    teaser.setAttribute('href', params.targetLink);
  }

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

  if (params.text) {
    const textEl = teaser.getElementsByClassName('ds-teaser__text')[0];
    textEl.appendChild(document.createTextNode(params.text));
  }

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

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

  return teaser;
}

/** only use in storybook */
function dsTeaserStandardStory() {
  const jsTeasers = Array.from(document.getElementsByClassName('js-ds-teaser-standard-story'));
  jsTeasers.forEach((teaserEl) => {
    const params = JSON.parse(teaserEl.getAttribute('data-params'));
    teaserEl.replaceWith(dsTeaserStandard(params));
  });
}
