import { Component, h } from "@stencil/core";
import { waitForRecsAtomic } from "../../utils/atomic";
import FaqTemplateRec from "./FaqTemplateRec.html";
import QuickLinksRec from "./QuickLinksRec.html";
import defaultRec from "./defaultRec.html";

import SitePagesTemplateRec from "./SitePagesTemplateRec.html";
import KATemplateRec from "./KATemplateRec.html";

import AppTemplateRec from "./AppTemplateRec.html";
import ELearningTemplateRec from "./ELearningTemplateRec.html";
import DocumentsTemplateRec from "./DocumentsTemplateRec.html";
/**
 * Component used to manage results & result templates.
 * See https://docs.coveo.com/en/atomic/latest/usage/create-a-result-list/
 */
@Component({
  tag: "recs-results-manager",
  shadow: false,
})
export class RecsResultsManager {
  public async componentWillLoad() {
    return waitForRecsAtomic();
  }

  public render() {


    return (
      <atomic-recs-list number-of-recommendations="5">
        <atomic-recs-result-template must-match-abicontenttype='FAQ'>
          <template innerHTML={FaqTemplateRec}></template>
        </atomic-recs-result-template>
        <atomic-recs-result-template must-match-abicontenttype='Quick Links'>
          <template innerHTML={QuickLinksRec}></template>
        </atomic-recs-result-template>
        <atomic-recs-result-template must-match-abicontenttype='Site Pages'>
          <template innerHTML={SitePagesTemplateRec}></template>
        </atomic-recs-result-template>
        <atomic-recs-result-template must-match-abicontenttype='Knowledge Article'>
          <template innerHTML={KATemplateRec}></template>
        </atomic-recs-result-template>
        <atomic-recs-result-template must-match-abicontenttype='Application'>
          <template innerHTML={AppTemplateRec}></template>
        </atomic-recs-result-template>
        <atomic-recs-result-template must-match-abicontenttype='eLearning'>
          <template innerHTML={ELearningTemplateRec}></template>
        </atomic-recs-result-template>
        <atomic-recs-result-template must-match-abicontenttype='Documents'>
          <template innerHTML={DocumentsTemplateRec}></template>
        </atomic-recs-result-template>

        <atomic-recs-result-template>
          <template innerHTML={defaultRec}></template>
        </atomic-recs-result-template>
      </atomic-recs-list>
    );
  }
}