import {
  ChangeDetectionStrategy,
  Component,
  computed,
  contentChildren,
  inject,
  input
} from '@angular/core';
import { Root } from 'mdast';
import remarkParse from 'remark-parse';
import { Processor, unified } from 'unified';
import type { VFileCompatible } from 'vfile';
import { RemarkTemplateDirective } from './remark-template.directive';
import { RemarkTemplatesService } from './remark-templates.service';

@Component({
  selector: 'remark',
  template: `
    @if (tree() && templates()) {
    <remark-node [remarkNode]="tree()"></remark-node>
    } @if (debug()) {
    <pre><code>{{tree() | json }}</code></pre>
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [RemarkTemplatesService],
  standalone: false
})
export class RemarkComponent {
  private remarkTemplatesService = inject(RemarkTemplatesService);

  /** The markdown string to render */
  readonly markdown = input.required<VFileCompatible>();

  /** A custom processor to use instead of the default `unified().user(remarkParse)` */
  readonly processor = input<Processor<Root, Root | undefined>>();
  /** Set this flag to true to display the parsed markdown tree */
  readonly debug = input(false);

  /** Custom templates to override the default rendering components */
  templateQuery = contentChildren(RemarkTemplateDirective);

  tree = computed(() => {
    const processor = this.processor() ?? unified().use(remarkParse);
    const tree = processor.parse(this.markdown());
    return processor.runSync(tree);
  });

  templates = computed(() => {
    this.remarkTemplatesService.templates = {};
    for (const template of this.templateQuery()) {
      this.remarkTemplatesService.templates[template.nodeType()] = template.template;
    }
    return this.remarkTemplatesService.templates;
  });
}