import { React, useState, useRef } from "react";
import { ResizableBox } from "react-resizable";
import CodeMirror from "@uiw/react-codemirror";
import { createTheme } from "@uiw/codemirror-themes";
import { sql } from "@codemirror/lang-sql";
import { tags as t } from "@lezer/highlight";
import { shapes } from "jointjs";
import Shape from "./shape";
import { saveAs } from "file-saver";
import html2canvas from "html2canvas";
import { Parser } from "node-sql-parser";
import "react-resizable/css/styles.css";

const myTheme = createTheme({
  dark: "light",
  settings: {},
  styles: [
    { tag: t.comment, color: "#8ab0ed" },
    { tag: t.string, color: "#e68e29" },
    { tag: t.number, color: "#e68e29" },
    { tag: t.keyword, color: "#295be6" },
    { tag: t.variableName, color: "#1a00db" },
    { tag: t.typeName, color: "#295be6" },
    { tag: t.tagName, color: "#008a02" },
  ],
});

export default function EditorPanel(props) {
  const [editor, setEditor] = useState(true);
  const map = useRef(new Map());

  return (
    <ResizableBox
      width={window.innerWidth * 0.2}
      height={window.innerHeight}
      resizeHandles={["e"]}
      minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
      maxConstraints={[Infinity, Infinity]}
      axis="x"
    >
      <div className="overflow-auto h-full">
        <button
          onClick={() => {
            setEditor(!editor);
          }}
        >
          change view
        </button>
        <br />
        <button
          onClick={() => {
            const rect = new shapes.standard.Rectangle();
            rect.position(100, 100);
            rect.resize(100, 40);
            rect.attr({
              body: {
                fill: "#7039FF",
              },
              label: {
                text: "hi",
                fill: "white",
              },
            });
            rect.addTo(props.graph);
            props.setCode((prevCode) => `create table hi\n\n${prevCode}`);
          }}
        >
          add
        </button>
        <br />
        <button
          onClick={() => {
            const blob = new Blob([props.code], {
              type: "text/plain;charset=utf-8",
            });

            saveAs(blob, "src.txt");
          }}
        >
          export src
        </button>
        <br />
        <button
          onClick={() => {
            try {
              const parser = new Parser();
              const ast = parser.astify(props.code);
              console.log(ast);
              ast.forEach((e) => {
                e.table.forEach((t) => {
                  if (map.current.has(t.table)) {
                    return;
                  }
                  map.current.set(t.table, t);
                  const rect = new shapes.standard.Rectangle();
                  rect.position(100, 100);
                  rect.resize(100, 40);
                  rect.attr({
                    body: {
                      fill: "#7039FF",
                    },
                    label: {
                      text: t.table,
                      fill: "white",
                    },
                  });
                  rect.addTo(props.graph);
                });
              });
            } catch (e) {
              alert("parsing error");
            }
          }}
        >
          parse
        </button>
        <br />
        <button
          onClick={() => {
            html2canvas(document.getElementById("canvas")).then((canvas) => {
              canvas.toBlob((blob) => {
                saveAs(blob, "image.png");
              });
            });
          }}
        >
          export img
        </button>
        {editor ? (
          <CodeMirror
            value={props.code}
            height="100%"
            theme={myTheme}
            extensions={[sql()]}
            onChange={(e) => {
              props.setCode(e);
            }}
          />
        ) : (
          <Shape />
        )}
      </div>
    </ResizableBox>
  );
}