import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { setComponentTemplate } from '@ember/component';
import templateOnly from '@ember/component/template-only';
import { precompileTemplate } from '@ember/template-compilation';

import { modifier } from 'ember-modifier';

import type { ComponentLike } from '@glint/template';

// index.html has the production-fingerprinted references to these links
// Ideally, we'd have some pre-processor scan everything for references to
// assets in public, but idk how to set that up
const getStyles = () => [...document.head.querySelectorAll('link')].map((link) => link.href);


const Shadow = setComponentTemplate(precompileTemplate(`
  <template shadowrootmode="open" ...attributes>
    {{yield}}
  </template>
`, { strictMode: true }), templateOnly('shadow', 'Shadow')) as ComponentLike<{
  Element: HTMLTemplateElement;
  Args: {};
  Blocks: { default: [] }
}>;

export class Shadowed extends Component<{
  Element: HTMLDivElement;
  Args: {
    omitStyles?: boolean;
  };
  Blocks: { default: [] };
}> {
  @tracked shadow: ShadowRoot | undefined | null;
  
  getShadowRef = modifier((element: HTMLTemplateElement) => {
    this.shadow = element.content; 
  }); 

<template>
  <div data-shadow ...attributes>
    <Shadow {{this.getShadowRef}} />

    {{#if this.shadow}}
      {{#in-element this.shadow}}
        {{#unless @omitStyles}}
          {{#each (getStyles) as |styleHref|}}
            <link rel="stylesheet" href={{styleHref}} />
          {{/each}}
        {{/unless}}

        {{yield}}
      {{/in-element}}
  {{/if}}
  </div>
</template>;
}

export default Shadowed;