import { MdEdit, MdOutlineSave, MdOutlineDelete } from "react-icons/md";
import { useState } from "react";
import { GiTreeRoots } from "react-icons/gi";
import React from "react";
import RuleView from "./RuleView";
import {  RuleViewWithEditInput } from "../types";
const RuleViewWithEdit = ({
  rule,
  grammar,
  deleteRule,
  changeRule,
  masterRoot,
  changeRoot,
}: RuleViewWithEditInput) => {
  const [edit, setEdit] = useState(false);
  const [leftSymbol, setLeftSymbol] = useState("");
  const [rightSide, setRightSide] = useState("");
  const handlesaveRule = (
    e:
      | React.MouseEvent<SVGElement, MouseEvent>
      | React.FormEvent<HTMLFormElement>
  ) => {
    e.preventDefault();
    changeRule(rule.id, {
      leftSymbol: leftSymbol,
      rightSide: [{ part: rightSide }],
    },grammar.id);
    setEdit(false);
  };

  return (
    <div className={`${rule.root && "root" } rule-edit-view`}>
      {((masterRoot && rule.root) || !masterRoot) && (
        <GiTreeRoots onClick={() => changeRoot(rule.id, grammar.id,rule)} />
      )}{" "}
      <RuleView rule={rule} small={false} />
      {"   "}
      <MdEdit onClick={() => setEdit(!edit)} />
      {"  "}
      <MdOutlineDelete onClick={() => deleteRule(rule.id, rule.root,grammar.id)} />
      {edit && (
        <form onSubmit={handlesaveRule}>
          <input
            className="ruleInput transparent"
            onChange={(e) => {
              setLeftSymbol(e.target.value);
            }}
            type="text"
            placeholder="Set left symbol"
          />
          =
          <input
            className="ruleInput transparent"
            onChange={(e) => {
              setRightSide(e.target.value);
            }}
            type="text"
            placeholder="Set right side"
          />{" "}
          <MdOutlineSave onClick={handlesaveRule} />
        </form>
      )}
    </div>
  );
};

export default RuleViewWithEdit;
