import { useState } from "react";
import "./styles.css";

const recursiveObject = {
  permissionAccess: {
    dashboard: {
      wallboard: {
        deposit: {
          view: false
        },
        withdrawal: {
          view: false,
          edit: ["onHold", "notVerified"]
        }
      }
    },
    player: {
      playerInfo: {
        view: false
      },
      contactInfo: {
        view: false
      },
      playerAccount: {
        edit: false,
        create: false
      }
    }
  }
};

const Recursive = ({ data }) => {
  const entries = Object.entries(data);

  const [hidden, setHidden] = useState({});

  return (
    <>
      {entries.map(([propertyName, entity]) => {
        let entityFromArray;

        const isArray = Array.isArray(entity);

        if (isArray) {
          entity.forEach((value) => {
            if (!entityFromArray) {
              entityFromArray = {};
            }
            entityFromArray[value] = false;
          });
        }

        const onClick = (e) => {
          e.stopPropagation();
          e.preventDefault();

          setHidden({
            ...hidden,
            [propertyName]: !hidden[propertyName]
          });
        };

        return (
          <div className="margin" onClick={onClick}>
            <h1>{"- " + propertyName}</h1>

            {!hidden[propertyName] && (
              <Recursive data={entityFromArray || entity} />
            )}
          </div>
        );
      })}
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <Recursive data={recursiveObject} />
    </div>
  );
}