import { CustomCodeComponentTracker } from './tracking'

/**
 * CustomCodeComponentClient
 * @description Track the view of a rendered custom code component
 * @param {HTMLElement} el - The custom code component
 * @param {TrackingData} trackingData - The tracking data
 */
class CustomCodeComponentClient {
  /**
   * Track the mount of a custom code component
   */
  tracking: CustomCodeComponentTracker

  constructor(el: Element) {
    const trackingData = {
      component: {
        id: el.getAttribute('id') ?? '',
        name: el.getAttribute('path') ?? '',
        type: 'custom-code-component',
      },
    }
    this.tracking = new CustomCodeComponentTracker(
      el as HTMLElement,
      trackingData
    )
  }

  static init(rootEl?: Element): CustomCodeComponentClient[] | void {
    const root = rootEl instanceof Element ? rootEl : document
    return Array.from(
      root.querySelectorAll('custom-code-component:not([data-initialised])')
    ).map((el) => new CustomCodeComponentClient(el))
  }

  static destroy(components: CustomCodeComponentClient[]): void {
    components.forEach((component) => {
      component.tracking.destroy()
    })
  }
}

export default CustomCodeComponentClient