---

import { ReactRenderer } from '@core/ReactRenderer';

import type { ReactElement } from 'react';

const blockedChartEvents = [
  'pointerdown',
  'pointermove',
  'pointerup',
  'pointercancel',
  'click',
  'dblclick',
  'contextmenu',
  'wheel',
] as const;

export class ModalRenderer extends ReactRenderer {
  constructor(container: HTMLElement) {
    super(container);

    blockedChartEvents.forEach((eventName) => {
      container.addEventListener(eventName, this.stopPropagation);
    });
  }

  render(component: ReactElement): void {
    this.container.style.pointerEvents = 'auto';

    super.render(component);
  }

  clearComponents(): void {
    this.container.style.pointerEvents = 'none';

    super.clearComponents();
  }

  destroy(): void {
    blockedChartEvents.forEach((eventName) => {
      this.container.removeEventListener(eventName, this.stopPropagation);
    });

    this.container.style.pointerEvents = 'none';

    super.destroy();
  }

  private stopPropagation = (event: Event): void => {
    event.stopPropagation();
  };
}