import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DialogContent } from 'office-ui-fabric-react';
import { BaseDialog, IDialogConfiguration } from '@microsoft/sp-dialog';
import { BaseComponentContext } from '@microsoft/sp-component-base';

export default class CustomDialog extends BaseDialog {
  public context: BaseComponentContext;

  public render(): void {

    /* adjustable dialog width */
    ReactDOM.render(
      <div style={{ width: "750px", maxWidth: "100%", maxHeight: "95vh" }}>
        <DialogContent
          title='Dokument Freigeben'
          onDismiss={this.close}
          showCloseButton={true}
        >
        {/* custom content */}
        </DialogContent>
      </div>,
      this.domElement);
  }


  public getConfig(): IDialogConfiguration {
    return {
      isBlocking: false
    };
  }

  protected onAfterClose(): void {
    // @hack - use timout to make the dialog work in I11 when opening muliple times.
    window.setTimeout(() => {
      super.onAfterClose();
      // clean up the element for the next dialog
      ReactDOM.unmountComponentAtNode(this.domElement);
    }, 200);
  }
}