<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>

  <style type="text/css">
    html, body {
      font: 10pt arial;
    }
    #mynetwork {
      width: 800px;
      height: 800px;
      border: 1px solid lightgray;
    }
  </style>

  <script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!--  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">

    function FormComponent(props) {
      var container = document.getElementById('mynetwork');
      const [allNodes, setAllNodes] = React.useState([]);
      const [allEdges, setAllEdges] = React.useState([]);

      const [promotionMin, setPromotionMin] = React.useState(2021);
      const [promotionMax, setPromotionMax] = React.useState(2021);

      const [nodeMin, setNodeMin] = React.useState(10);
      const [edgeMin, setEdgeMin] = React.useState(5);


      const [submitted, setSubmitted] = React.useState(true);
      const [ready, setReady] = React.useState(false);
      const [error, setError] = React.useState(false);

      // React.useEffect(() => {
      // }, [ready, error])

      React.useEffect(() => {
        setReady(false);
        setError(false);
        axios.post('/', {
          promotion_min: promotionMin,
          promotion_max: promotionMax
        })
        .then(result => {
          setAllEdges(result.data.all_edges);
          setAllNodes(result.data.all_nodes);
          setReady(true);
        })
        .catch(err => setError(true))
      }, [promotionMin, promotionMax])


      function handleSubmit (event) {
        event.preventDefault();
        let nodes = [];
        allNodes.forEach(node => {
          if (node.value >= nodeMin) {
            nodes.push(node);
          }
        })

        let edges = [];
        allEdges.forEach(edge => {
          if (edge.value >= edgeMin) {
            edges.push(edge);
          }
        })
        var data = {
          nodes: nodes,
          edges: edges
        };
        var options = {
          nodes: {
            shape: 'dot'
          }
        };
        let network = new vis.Network(container, data, options);
      }


      return (
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="promotionMin">Promotion minimale : </label>
            <input type="number" id="promotionMin" value={promotionMin} onChange={e => setPromotionMin(e.target.value)} />
          </div>
          <div>
            <label htmlFor="promotionMax">Promotion maximale : </label>
            <input type="number" id="promotionMax" value={promotionMax} onChange={e => setPromotionMax(e.target.value)} />
          </div>
          <div>
            <label htmlFor="nodeMin">Taille minimale :</label>
            <input type="number" id="nodeMin" value={nodeMin} onChange={e => setNodeMin(e.target.value)} />
          </div>
          <div>
            <label htmlFor="edgeMin">Consanguinité :</label>
            <input type="number" id="edgeMin" value={edgeMin} onChange={e => setEdgeMin(e.target.value)} />
          </div>

          <button type="submit">Générer</button>
          {error
          ? <p style={{color: "red"}}>Erreur</p>
          : (ready
            ? <p style={{color: "green"}}>Prêt</p>
            : <p style={{color: "orange"}}>Chargement</p>
          )}
        </form>
      )
    }

    ReactDOM.render(React.createElement(FormComponent), document.getElementById('form'));

  </script>

</head>
<body>
  <h1><%= title %></h1>
  <p>
    <b>Comment ça marche ?</b><br>
    Lorsqu'on arrive sur le site ou que l'on change l'une des promotions, le site charge les données liées aux promotions.<br>
    Quand le champ de texte sous le menu indique prêt, vous pouvez générer le graphe en cliquant sur le bouton Générer ci-dessous.<br>
    Les promotions prises en compte seront les promotions situées entre la promotion minimale et la promotion maximale (inclusion large)<br>
    Vous pouvez modifier la taille des assos ainsi que la consanguinité minimales, puis générer le graphe à nouveau.<br>
    Vous pouvez déplacer le graphe ou zoomer dessus pour voir les détails.
  </p>
  <div id="form"></div>
  <div id="mynetwork"></div>
  <p>Crédit : <a href="https://linkcs.fr/user/2018barthezt">moi</a></br>
  J'avais la flemme de faire du front, si tu te plains, c'est un paps !</p>
  </body>
</html>