import React from "react";
import { RuleListInputAdderInput } from "../types";

export function RuleListInputAdder({
  rules,
  setRules,
  setRoot,
}: RuleListInputAdderInput
) {
  const setleftSymbol = (index: number, leftSymbol: string) => {
    setRules(
      rules.map((rule, indexIndide) =>
        indexIndide === index ? { ...rule, leftSymbol: leftSymbol } : rule
      )
    );
  };
  const setrightSide = (index: number, rightSide: string) => {
    setRules(
      rules.map((rule, indexIndide) =>
        indexIndide === index
          ? { ...rule, rightSide: [{ part: rightSide }] }
          : rule
      )
    );
  };
  return (
    <>
      <input type="radio" id="no root" name="root" />
      <label
        className="smallText"
        htmlFor="no root"
        onClick={() => setRoot(-1)}
      >
        No root
      </label>
      {rules.map((rule, index) => (
        <div key={index}>
          <input
            type="radio"
            id={index.toString()}
            name="root"
            onClick={() => setRoot(index)}
          />
          <label htmlFor={index.toString()} className="smallText">
            root
          </label>
          <input
            className="ruleInput transparent"
            onChange={(e) => {
              setleftSymbol(index, e.target.value);
            }}
            type="text"
            placeholder="Set left symbol"
          />
          =
          <input
            className="ruleInput transparent"
            onChange={(e) => {
              setrightSide(index, e.target.value);
            }}
            type="text"
            placeholder="Set right side"
          />
        </div>
      ))}
    </>
  );
}

export default RuleListInputAdder;
