import React, { useEffect, useState } from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-dracula";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";

import { Input } from "postcss";
import { Interface } from "readline";
import { UseFormRegister } from "react-hook-form";
import styles from "./NewActionDialog.module.css";
function onChange(newValue: any) {
  console.log("change", newValue);
}

interface CodeInputProps {
  title?: string;
  description?: string;
  name: string;
  mode?: string;
  theme?: string;
  code: string;
  props?: any;
  callback?: any;
  register: any;
  setValue: any;
}

export default function CodeInput({
  register,
  setValue,
  title,
  description,
  name,
  mode,
  theme,
  code,
  props,
  callback,
}: CodeInputProps) {
  const [codeData, setCode] = useState(code);

  useEffect(() => {
    setValue(name, codeData);
  }, [codeData]);

  const id = Math.random().toString(36).substr(2, 9);
  // Render editor
  return (
    <>
      <input
        hidden
        type="text"
        value={JSON.stringify(codeData)}
        name={name}
        onChange={(e) => {}}
        {...register(name, { required: true })}
      />

      <AceEditor
        className={styles.Input}
        value={codeData}
        showGutter={false}
        width="100%"
        height="400px"
        mode={mode ? mode : "javascript"}
        theme={theme ? theme : "github"}
        onChange={setCode}
        name={`${id}`}
        {...props}
      />
    </>
  );
}
