/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

import { applyStyles } from '../utils/dom/css';
import { containerStyle, overlayStyle, headerStyle } from '../styles';
import { createClose } from './close';
import { createFrames } from './frames';
import { createFooter } from './footer';

import { updateAdditional } from './additional';


function createOverlay(document, name, message, frames, contextSize, currentError, totalErrors, switchCallback, closeCallback) {
  var frameSettings = frames.map(function () {
    return { compiled: false };
  });
  // Create overlay
  var overlay = document.createElement('div');
  applyStyles(overlay, overlayStyle);

  // Create container
  var container = document.createElement('div');
  applyStyles(container, containerStyle);
  overlay.appendChild(container);
  container.appendChild(createClose(document, closeCallback));

  // Create "Errors X of Y" in case of multiple errors
  var additional = document.createElement('div');
  updateAdditional(document, additional, currentError, totalErrors, switchCallback);
  container.appendChild(additional);

  // Create header
  var header = document.createElement('div');
  applyStyles(header, headerStyle);

  // Make message prettier
  var finalMessage = message.match(/^\w*:/) || !name ? message : name + ': ' + message;

  finalMessage = finalMessage
  // TODO: maybe remove this prefix from fbjs?
  // It's just scaring people
  .replace(/^Invariant Violation:\s*/, '')
  // This is not helpful either:
  .replace(/^Warning:\s*/, '')
  // Break the actionable part to the next line.
  // AFAIK React 16+ should already do this.
  .replace(' Check the render method', '\n\nCheck the render method').replace(' Check your code at', '\n\nCheck your code at');

  // Put it in the DOM
  header.appendChild(document.createTextNode(finalMessage));
  container.appendChild(header);

  // Create trace
  container.appendChild(createFrames(document, frames, frameSettings, contextSize, name));

  // Show message
  container.appendChild(createFooter(document));

  return {
    overlay: overlay,
    additional: additional
  };
}

export { createOverlay };