import "./styles.css";

import { useState } from "react";

import allData from "../../data/dataFiltered.js";
import levels from "../../data/levels.js";

const Body = (props) => {
  const [level, setLevel] = useState();
  const [archetype, setArchetype] = useState();
  // setArchetype("");
  let unlocks = [];
  if (props.level) {
    if (levels[props.level].unlocks) {
      unlocks.push(levels[props.level].unlocks);
    }
  }
  const changeArchetype = (e) => {
    setArchetype(e.target.value);
  };
  return (
    <div>
      <h1>Body</h1>
      {unlocks.map((unlock) => {
        return unlock.map((item) => {
          if (item._id === 105) {
            return (
              <div key={item._id}>
                <label htmlFor="archetypes">Level {props.level}</label>
                <select name="archetypes" onChange={changeArchetype}>
                  {item.options.map((option) => {
                    return (
                      <option key={option.name} value={option.folder_id}>
                        {option.name} - {option.folder_id}
                      </option>
                    );
                  })}
                </select>
                <h2>Compétences d'archétype</h2>
                {allData
                  .filter((comp) => comp.folder === archetype)
                  .map((comp) => {
                    if (comp._key.includes("!folders")) {
                      //Ici recursivement récupérer les compétences d'archetype car certaines sont rangés dans des dossiers, sous-dossiers
                    }
                    return (
                      <div key={comp._id}>
                        <h3>{comp.name}</h3>
                        <p>{comp.description}</p>
                      </div>
                    );
                  })}
              </div>
            );
          }
        });
      })}
    </div>
  );
};

export default Body;
