import * as React from "react";
import * as ReactDOM from "react-dom";
import { SquiggleChart } from "./SquiggleChart";
import { ReactCodeJar } from "react-codejar";
import type { exportEnv } from "@quri/squiggle-lang";

export interface SquiggleEditorProps {
  /** The input string for squiggle */
  initialSquiggleString?: string;
  /** If the output requires monte carlo sampling, the amount of samples */
  sampleCount?: number;
  /** The amount of points returned to draw the distribution */
  outputXYPoints?: number;
  kernelWidth?: number;
  pointDistLength?: number;
  /** If the result is a function, where the function starts */
  diagramStart?: number;
  /** If the result is a function, where the function ends */
  diagramStop?: number;
  /** If the result is a function, how many points along the function it samples */
  diagramCount?: number;
  /** The environment, other variables that were already declared */
  environment?: exportEnv;
  /** when the environment changes. Used again for notebook magic*/
  onEnvChange?(env: exportEnv): void;
}

const highlight = (editor: HTMLInputElement) => {
  let code = editor.textContent;
  code = code.replace(/\((\w+?)(\b)/g, '(<font color="#8a2be2">$1</font>$2');
  editor.innerHTML = code;
};

interface SquiggleEditorState {
  expression: string;
  env: exportEnv;
}

export class SquiggleEditor extends React.Component<
  SquiggleEditorProps,
  SquiggleEditorState
> {
  constructor(props: SquiggleEditorProps) {
    super(props);
    let code = props.initialSquiggleString ? props.initialSquiggleString : "";
    this.state = { expression: code, env: props.environment };
  }
  render() {
    let { expression, env } = this.state;
    let props = this.props;
    return (
      <div>
        <ReactCodeJar
          code={expression}
          onUpdate={(e) => {
            this.setState({ expression: e });
          }}
          style={{
            borderRadius: "6px",
            width: "530px",
            border: "1px solid grey",
            fontFamily: "'Source Code Pro', monospace",
            fontSize: "14px",
            fontWeight: "400",
            letterSpacing: "normal",
            lineHeight: "20px",
            padding: "10px",
            tabSize: "4",
          }}
          highlight={highlight}
          lineNumbers={false}
        />
        <SquiggleChart
          squiggleString={expression}
          sampleCount={props.sampleCount}
          outputXYPoints={props.outputXYPoints}
          kernelWidth={props.kernelWidth}
          pointDistLength={props.pointDistLength}
          diagramStart={props.diagramStart}
          diagramStop={props.diagramStop}
          diagramCount={props.diagramCount}
          environment={env}
          onEnvChange={props.onEnvChange}
        />
      </div>
    );
  }
}

export function renderSquiggleEditor(props: SquiggleEditorProps) {
  let parent = document.createElement("div");
  ReactDOM.render(
    <SquiggleEditor
      {...props}
      onEnvChange={(env) => {
        // I can set the value here because I need it for creating notebooks
        // @ts-ignore
        parent.value = env;

        parent.dispatchEvent(new CustomEvent("input"));
        if (props.onEnvChange) props.onEnvChange(env);
      }}
    />,
    parent
  );
  return parent;
}