import { render as renderDom } from 'preact';


type IHandler =  (props: any) => void;

type DialogOptions = {
  container: any;
  root: any;
  timer: any;

  init: () => void;

  show: IHandler;

  close: () => void;
};


export function getDialogCommand(DialogComponent) {
  const dialog: DialogOptions = {
    container: null,
    root: null,
    timer: null,

    init() {
      if (!this.container) {
        this.container = document.createElement('div');
        this.container.className = 'press-dialog-container';
        document.body.appendChild(this.container);
        this.root = this.container;
      }
    },

    show(props) {
      clearTimeout(this.timer);
      this.close();

      this.init();

      // const onClickConfirm = () => {
      //   props?.onClickConfirm?.();
      //   setTimeout(() => {
      //     this.close();
      //   });
      // };

      // const onClickCancel = () => {
      //   props?.onClickCancel?.();
      //   setTimeout(() => {
      //     this.close();
      //   });
      // };

      // const onClickClose = () => {
      //   props?.onClickClose?.();
      //   setTimeout(() => {
      //     this.close();
      //   });
      // };

      const dialogElement = (
        <DialogComponent
          {...props}
          // onClickConfirm={onClickConfirm}
          // onClickCancel={onClickCancel}
          // onClickClose={onClickClose}
        />
      );

      renderDom(dialogElement, this.container);
    },

    close() {
      try {
        document.body.removeChild(this.container);
      } catch (err) {}
      this.container = null;
      this.root = null;
    },
  };

  const showDialog = dialog.show.bind(dialog);

  return {
    dialog,
    showDialog,
  };
}