import React from "react";
import { RuleInputToGrammarInput } from "../types";
const RuleInput = ({
  rule,
  setRule,
  haveRoot,
}: RuleInputToGrammarInput) => {
  const setLeftSymbol = (val: string) => {
    setRule({ ...rule, leftSymbol: val });
  };
  const setRightSide = (val: string) => {
    setRule({ ...rule, rightSide: [{ part: val }] });
  };
  const setRoot = () => {
    if (rule.root === null || rule.root === false) {
      setRule({ ...rule, root: true });
      return;
    }
    setRule({ ...rule, root: false });
  };
  return (
    <>
      {!haveRoot && (
        <>
          <input onClick={setRoot} type="checkbox" id="root" />
          <label className="smallText" htmlFor="root">
            {" "}
            root
          </label>
          {"  "}
        </>
      )}
      <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"
      />
    </>
  );
};
export default RuleInput;
