import { Result } from "@coveo/headless";
import { Component, h, Element, State } from "@stencil/core";
import { resultContext } from "@coveo/atomic";

/**
 * Sample custom Atomic result component, to be used inside an Atomic Result Template.
 *
 * This component showcases a component that conditionally renders the author of a result, with a fallback to display "anonymous" in the event that no author is available for a document, for educational purposes.
 *
 * In a real life scenario, we recommend using [result-field-condition](https://docs.coveo.com/en/atomic/latest/reference/result-template-components/atomic-field-condition/) and [atomic-result-text](https://docs.coveo.com/en/atomic/latest/reference/result-template-components/atomic-result-text/).
 */
@Component({
  tag: "strip-html-component",
  styleUrl: "strip-html-component.css",
  shadow: true,
})
export class StripHtmlComponent {
  // The Headless result object to be resolved from the parent atomic-result component.
  @State() private result?: Result;
  @Element() private host!: Element;

  // We recommended fetching the result context using the `connectedCallback` lifecycle method
  // with async/await. Using `componentWillLoad` will hang the parent `atomic-search-interface` initialization.
  public async connectedCallback() {
    try {
      this.result = await resultContext(this.host);
    } catch (error) {
      console.error(error);
      this.host.remove();
    }
  }

  // Function to strip HTML tags and decode HTML entities
  private stripHtmlAndEntities(str: string): string {
    // Create a temporary DOM element
    var tempDiv = document.createElement("div");

    // Set its innerHTML to the input string
    tempDiv.innerHTML = str;

    // Use textContent to get the plain text
    var text = tempDiv.textContent || tempDiv.innerText || "";

    // Replace HTML entities
    var decodedText = text.replace(/&#(\d+);/g, (_, dec) => String.fromCharCode(dec));
    
    return decodedText;
  }

  public render() {
    // Do not render the component until the result object has been resolved.
    if (!this.result) {
      return;
    }

    let description;

    if (this.result.raw.abicontenttype == "Quick Links") {
      description = this.result.excerpt || "No description available";
    } else {
      description = this.result.raw.description;
    }

    let strippedString = '';

    if (typeof description === 'string') {
      strippedString = this.stripHtmlAndEntities(description);
    }


    return (
      <div style={{ fontSize: "1.3rem", maxHeight: "none", lineHeight: "normal"  }}>
        {strippedString}
      </div>
    );
  }
}