// @flow

import * as React from "react";
import css from "styled-jsx/css";

const promptStyle = css`
  .prompt {
    font-family: monospace;
    font-size: 12px;
    line-height: 22px;

    width: var(--prompt-width, 50px);
    padding: 9px 0;

    text-align: center;

    color: var(--theme-cell-prompt-fg, black);
    background-color: var(--theme-cell-prompt-bg, #fafafa);
  }
`;

// Totally fake component for consistency with indents of the editor area

export function promptText(props: PromptProps) {
  if (props.running) {
    return "[*]";
  }
  if (props.queued) {
    return "[…]";
  }
  if (typeof props.counter === "number") {
    return `[${props.counter}]`;
  }
  return "[ ]";
}

type PromptProps = {
  counter: number | null,
  running: boolean,
  queued: boolean
};

export class Prompt extends React.Component<PromptProps, null> {
  static defaultProps = {
    counter: null,
    running: false,
    queued: false
  };

  render() {
    return (
      <React.Fragment>
        <div className="prompt">{promptText(this.props)}</div>
        <style jsx>{promptStyle}</style>
      </React.Fragment>
    );
  }
}

export class PromptBuffer extends React.Component<any, null> {
  render() {
    return (
      <React.Fragment>
        <div className="prompt" />
        <style jsx>{promptStyle}</style>
      </React.Fragment>
    );
  }
}

@@ -2,17 +2,16 @@
 / @flow%0A
-%0A
 import *
@@ -38,426 +38,94 @@
 t%22;%0A
-import css from %22styled-jsx/css%22;%0A%0Aconst promptStyle = css%60%0A  .prompt %7B%0A    font-family: monospace;%0A    font-size: 12px;%0A    line-height: 22px;%0A%0A    width: var(--prompt-width, 50px);%0A    padding: 9px 0;%0A%0A    text-align: center;%0A%0A    color: var(--theme-cell-prompt-fg, black);%0A    background-color: var(--theme-cell-prompt-bg, #fafafa);%0A  %7D%0A%60;%0A%0A// Totally fake component for consistency with indents of the editor area%0A
+%0A/**%0A * Generate what text goes inside the prompt based on the props to the prompt%0A */
 %0Aexp
@@ -167,16 +167,24 @@
 ptProps)
+: string
  %7B%0A  if 
@@ -442,16 +442,34 @@
  queued:
+ boolean,%0A  blank:
  boolean
@@ -614,16 +614,34 @@
  queued:
+ false,%0A    blank:
  false%0A 
@@ -726,17 +726,54 @@
 prompt%22%3E
-%7B
+%0A          %7Bthis.props.blank ? null : 
 promptTe
@@ -787,16 +787,25 @@
 .props)%7D
+%0A        
 %3C/div%3E%0A 
@@ -827,288 +827,475 @@
 sx%3E%7B
-promptStyle%7D%3C/style%3E%0A      %3C/React.Fragment%3E%0A    );%0A  %7D%0A%7D%0A%0Aexport class PromptBuffer extends React.Component%3Cany, null%3E %7B%0A  render() %7B%0A    return (%0A      %3CReact.Fragment%3E%0A        %3Cdiv className=%22prompt%22 /%3E%0A        %3Cstyle jsx%3E%7BpromptStyle%7D%3C/style%3E%0A      %3C/React.Fragment%3E%0A    );%0A  %7D%0A%7D
+%60%0A          .prompt %7B%0A            font-family: monospace;%0A            font-size: 12px;%0A            line-height: 22px;%0A%0A            width: var(--prompt-width, 50px);%0A            padding: 9px 0;%0A%0A            text-align: center;%0A%0A            color: var(--theme-cell-prompt-fg, black);%0A            background-color: var(--theme-cell-prompt-bg, #fafafa);%0A          %7D%0A        %60%7D%3C/style%3E%0A      %3C/React.Fragment%3E%0A    );%0A  %7D%0A%7D%0A%0Aexport const PromptBuffer = () =%3E %3CPrompt blank /%3E;
 %0A

Make <PromptBuffer> a special case of <Prompt>