/**
 * ModalService
 * A service to display the modals from OVO bootstrap. For now, this service uses the JQuery modal implementation
 * that is provided in bootstrap.js.
 *
 * It is certainly possible to use a pure angular implementation, however both
 * angular-strap and angular-ui-bootstrap had limitations that were incompatible with our current codebase, and
 * a fresh rewrite seemed not a good use of time.
 */
export class ModalService {
  constructor(private $document: ng.IDocumentService, private $compile: ng.ICompileService, private $rootScope: ng.IRootScopeService) { }

  open<T>(options: ModalOptions<T>) {
    const body = this.$document.find('body');
    const linkFunction = this.$compile(this.modalHTML(options));
    const scope = this.$rootScope.$new();
    for (const k in options.scope) scope[k] = options.scope[k];
    const element = linkFunction(scope);
    element.appendTo(body).modal();
    // Remove the DOM element for this modal after the close animation has finished
    element.on('hidden.bs.modal', () => scope.$destroy() && element.remove());
  }

  private modalHTML<T>(options: ModalOptions<T>) {
    return `<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
            <h4 class="modal-title text-center">${options.title || ''}</h4>
          </div>
          <div class="modal-body ${options.class || ''}">${options.content}</div>
        </div>
      </div>
    </div>`;
  }
}

export interface ModalOptions<T> {
  /** An angular template string for the header of the modal. */
  title?: string;
  /** An angular template string for the body of the modal. */
  content: string;
  /** Extra CSS classes to apply to the modal body. */
  class?: string;
  /** Bound values to use for resolving angular expressions in the title and content template strings. */
  scope?: T;
}