---

import { ReactElement } from 'react';

import { Modal, ModalProps } from '@components/Modal';
import { ReactRenderer } from '@core/ReactRenderer';

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

    this.container.hidden = true;
  }

  public override renderComponent(component: ReactElement, props?: ModalProps): void {
    if (!props) {
      throw new Error('[Modal]: modal props are not defined');
    }

    this.container.hidden = false;

    const handleHide = () => {
      props.onHide?.();
      this.clearComponents();
    };

    const handleSave = () => {
      props.onSave?.();
      this.clearComponents();
    };

    super.renderComponent(
      <Modal
        {...props}
        onHide={handleHide}
        onSave={handleSave}
        appendTo={this.container}
      >
        {component}
      </Modal>,
    );
  }

  public override clearComponents(): void {
    this.container.hidden = true;

    super.clearComponents();
  }

  public override destroy(): void {
    this.container.hidden = true;

    super.destroy();
  }
}