import { ChangingArrow } from "./ChangingArrow";
import { FileView } from "./FileView";
import { useState } from "react";

import {
  MdOutlineDelete,
  MdEdit,
  MdOutlineSave,
  MdOutlineContentCopy,
  MdOutlineInsertDriveFile,
  MdOutlineCancel,
} from "react-icons/md";

import RuleViewWithEdit from "./RuleViewWithEdit";
import RuleView from "./RuleView";
import RuleInput from "./RuleInputToGrammar";
import React from "react";
import { GrammarViewInput, Rule } from "../types";
const GrammarView = ({
  grammar,
  deleteGr,
  editGr,
  addRule,
  duplicateGr,
  deleteRule,
  changeRule,
  generateFile,
  changeRoot,
  getFile,
  fileToGrammar,
  deleteFile,
  deleteFilesFromGrammar,
}: GrammarViewInput) => {
  const emptyRule: Rule = {
    id: -10,
    leftSymbol: "",
    root: false,
    rightSide: [],
  };
  const [more, setMore] = useState(false);
  const [ruleAdd, setRuleAdd] = useState(false);
  const [edit, setEdit] = useState(false);
  const [uri, setUri] = useState("");
  const [newRule, setNewRule] = useState(emptyRule);
  const [file, setFile] = useState(false);

  function handleSubmit(
    e:
      | React.FormEvent<HTMLFormElement>
      | React.MouseEvent<SVGElement, MouseEvent>
  ) {
    e.preventDefault();
    if (uri === null || uri.length === 0) {
      return;
    }
    setEdit(false);
    let gr = { uri: uri, id: grammar.id };
    editGr(gr);
  }

  function handleNewRule(
    e:
      | React.MouseEvent<SVGElement, MouseEvent>
      | React.FormEvent<HTMLFormElement>
  ) {
    e.preventDefault();
    if (
      newRule.rightSide === null ||
      newRule.leftSymbol === null ||
      newRule.rightSide[0].part.length === 0 ||
      newRule.leftSymbol.length === 0
    ) {
      return;
    }
    setRuleAdd(false);
    setNewRule(emptyRule);
    addRule(newRule, grammar.id);
  }
  function switchEditmode() {
    if (edit) {
      setRuleAdd(false);
    } else {
      setMore(!edit);
    }

    setEdit(!edit);
  }
  return (
    <div className="grammar">
      <article>
        <h3>
          {grammar.uri} {edit && <MdOutlineSave onClick={handleSubmit} />}{" "}
        </h3>
        {edit && (
          <form onSubmit={(e) => handleSubmit(e)}>
            <input
              className="transparent"
              onChange={(e) => setUri(e.target.value)}
              type="text"
              placeholder="Change uri"
            />
          </form>
        )}

        {grammar.rootRule !== undefined && grammar.rootRule !== null && (
          <RuleView small={true} rule={grammar.rootRule}></RuleView>
        )}

        <p>
          <MdOutlineInsertDriveFile onClick={() => setFile(!file)} />{" "}
          <ChangingArrow more={more} setMore={setMore} />
          <MdEdit onClick={switchEditmode} />{" "}
          <MdOutlineContentCopy onClick={() => duplicateGr(grammar.id)} />{" "}
          <MdOutlineDelete onClick={() => deleteGr(grammar.id)} />
        </p>
        {more &&
          grammar.rules.map((rule) => (
            <RuleViewWithEdit
              key={rule.id}
              grammar={grammar}
              rule={rule}
              deleteRule={deleteRule}
              changeRule={changeRule}
              masterRoot={
                !(grammar.rootRule === null || grammar.rootRule === undefined)
              }
              changeRoot={changeRoot}
            />
          ))}
        {edit && (
          <>
            {!ruleAdd ? (
              <>
                <button onClick={() => setRuleAdd(true)}>ADD RULE</button>{" "}
              </>
            ) : (
              <form onSubmit={handleNewRule}>
                <RuleInput
                  rule={newRule}
                  setRule={setNewRule}
                  haveRoot={!(grammar.rootRule === null || grammar.rootRule===undefined)}
                />{" "}
                <MdOutlineSave onClick={handleNewRule} />
                <MdOutlineCancel onClick={() => setRuleAdd(false)} />
              </form>
            )}
          </>
        )}
        {file && (
          <FileView
            generateFile={generateFile}
            grammar={grammar}
            getFile={getFile}
            fileToGrammar={fileToGrammar}
            deleteFile={deleteFile}
            deleteFilesFromGrammar={deleteFilesFromGrammar}
          />
        )}
      </article>
    </div>
  );
};

export default GrammarView;
