/* @flow */

import React from "react";
import { observer } from "mobx-react";
import { richestMimetype, transforms } from "@nteract/transforms";

import { INSPECTOR_URI } from "./../utils";

const displayOrder = ["text/html", "text/markdown", "text/plain"];

import type Kernel from "./../kernel";

type Props = { store: { kernel: ?Kernel } };

function hide() {
  atom.workspace.hide(INSPECTOR_URI);
  return null;
}

const Inspector = observer(({ store: { kernel } }: Props) => {
  if (!kernel) return hide();

  const bundle = kernel.inspector.bundle;
  const mimetype = richestMimetype(bundle, displayOrder, transforms);

  if (!mimetype) return hide();
  const Transform = transforms[mimetype];
  return (
    <div
      className="native-key-bindings"
      tabIndex="-1"
      style={{
        fontSize: atom.config.get(`Hydrogen.outputAreaFontSize`) || "inherit"
      }}
    >
      <Transform data={bundle[mimetype]} />
    </div>
  );
});

export default Inspector;

@@ -85,35 +85,24 @@
 t %7B 
-richestMimetype, transforms
+RichMedia, Media
  %7D f
@@ -115,25 +115,22 @@
 nteract/
-transform
+output
 s%22;%0A%0Aimp
@@ -175,76 +175,8 @@
 %22;%0A%0A
-const displayOrder = %5B%22text/html%22, %22text/markdown%22, %22text/plain%22%5D;%0A%0A
 impo
@@ -471,152 +471,131 @@
 le;%0A
+%0A
   
-const mimetype = richestMimetype(bundle, displayOrder, transforms);%0A%0A  if (!mimetype) return hide();%0A  const Transform = transforms%5Bmimetype%5D;
+if (%0A    !bundle%5B%22text/html%22%5D &&%0A    !bundle%5B%22text/markdown%22%5D &&%0A    !bundle%5B%22text/plain%22%5D%0A  ) %7B%0A    return hide();%0A  %7D%0A
 %0A  r
@@ -788,17 +788,17 @@
    %3C
-Transform
+RichMedia
  dat
@@ -810,21 +810,102 @@
 ndle
-%5Bmimetype%5D%7D /
+%7D%3E%0A        %3CMedia.HTML /%3E%0A        %3CMedia.Markdown /%3E%0A        %3CMedia.Plain /%3E%0A      %3C/RichMedia
 %3E%0A  

update to new outputs