import styles from "!raw-loader!../../../../dist/css/frontend.min.css";

export default function createShadowRoot(widgetContainer) {
  const shadowRoot = widgetContainer.attachShadow({ mode: "closed" });

  const resetStyles = `
    :host {
      all: initial;
      display: block;
    }
    *:not(svg *) {
      all: unset;
      box-sizing: border-box;
    }
  `;

  if (shadowRoot.adoptedStyleSheets !== undefined) {
    const resetSheet = new CSSStyleSheet();
    resetSheet.replaceSync(resetStyles);

    const mainSheet = new CSSStyleSheet();
    mainSheet.replaceSync(styles);

    shadowRoot.adoptedStyleSheets = [resetSheet, mainSheet];
    return shadowRoot;
  }

  const styleElement = document.createElement("style");
  styleElement.textContent = resetStyles + styles;
  shadowRoot.appendChild(styleElement);

  return shadowRoot;
}
