import React from 'react';
import { createRoot } from 'react-dom/client';
import PromptDialog from './PromptDialog';
import I18nProvider from 'B/I18nProvider';
import { setupI18n } from 'B/i18nSetup';

import { msg } from '@lingui/macro';
import type { MessageDescriptor } from '@lingui/core';

type Options = {
  title?: MessageDescriptor;
  text?: MessageDescriptor;
  label?: MessageDescriptor;
  initialValue?: string;
};

let isPromptI18nInitialized = false;

export function openPromptDialog(options: Options = {}): Promise<string | null> {
  if (!isPromptI18nInitialized) {
    setupI18n();
    isPromptI18nInitialized = true;
  }

  return new Promise((resolve) => {
    const container = document.createElement('div');
    document.body.appendChild(container);

    const root = createRoot(container);

    const cleanup = () => {
      root.unmount();
      container.remove();
    };

    const handleCancel = () => {
      cleanup();
      resolve(null);
    };

    const handleOk = (value: string) => {
      cleanup();
      resolve(value);
    };

    root.render(
      <I18nProvider>
        <PromptDialog
          open={true}
          title={options.title ?? msg`Name eingeben`}
          text={options.text}
          label={options.label ?? msg`Name`}
          initialValue={options.initialValue ?? ''}
          handleCancel={handleCancel}
          handleOk={handleOk}
        />
      </I18nProvider>
    );
  });
}