/**
 * Breadcrumbs browser helper.
 */

const VALID_MODIFIERS = ["inverted", "sm", "lg"];

function itemHtml(label, { href = "", active = false, hover = false } = {}) {
  const tag = href ? "a" : "span";
  const attrs = href ? `href="${href}"` : "";
  const classes = active ? "is-active" : hover ? "is-hover" : "";
  return `<li class="breadcrumb-item ${classes}"><${tag} ${attrs}>${label}</${tag}></li>`;
}

function separatorHtml(char = "/") {
  return `<li class="breadcrumb-separator" aria-hidden="true">${char}</li>`;
}

function collapseHtml() {
  return `<li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>`;
}

function listHtml(items, { modifier = "", separator = "/", collapsed = false } = {}) {
  const modifierClass = VALID_MODIFIERS.includes(modifier) ? `breadcrumb-${modifier}` : "";
  const parts = [];
  items.forEach((item, index) => {
    const isLast = index === items.length - 1;
    if (collapsed && index > 0 && !isLast && items.length > 4 && index === 1) {
      parts.push(collapseHtml());
      parts.push(separatorHtml(separator));
      return;
    }
    if (collapsed && index > 0 && !isLast && items.length > 4) return;
    parts.push(itemHtml(item.label, { href: item.href, active: isLast, hover: item.hover }));
    if (!isLast) parts.push(separatorHtml(separator));
  });

  return `<nav aria-label="Breadcrumb"><ol class="breadcrumb ${modifierClass}">${parts.join("")}</ol></nav>`;
}

function html(options = {}) {
  const { items = [], modifier = "", separator = "/", collapsed = false } = options;
  return listHtml(items, { modifier, separator, collapsed });
}

function create(options = {}) {
  const { items = [], modifier = "", separator = "/", collapsed = false } = options;
  const wrapper = document.createElement("div");
  wrapper.innerHTML = listHtml(items, { modifier, separator, collapsed });
  return wrapper.firstElementChild;
}

const Breadcrumbs = { html, create, itemHtml, separatorHtml };

export default Breadcrumbs;
export { html, create, itemHtml, separatorHtml };