{% extends "course_flow/base.html" %}
<!-- -->
{% load static i18n %}
<!-- -->
{% block title %}{% endblock %}
<!-- -->
{% block metadescription %} {% endblock %}
<!-- -->
{% block header %}{% endblock %}
<!-- -->
{% block body %}
<svg width="2000" height="2000"></svg>
{% endblock %}
<!-- -->
{% block foot %} {% endblock %}
<!-- -->
{% csrf_token %}
<!-- -->
{% block scripts %} {{ block.super }}
<script nonce="{{ request.csp_nonce }}">
  window.addEventListener("load", function() {
    let activityJson = null;

    const svgParent = d3.select("svg").style("margin-top", "100px");

    const innerWidth = $(window).innerWidth();

    svgParent.attr("width", innerWidth);

    const nodeHeight = innerWidth / 8;
    const nodeWidth = innerWidth / 3.3;
    const nodeSpacingVertical = 50.0;
    const nodeSpacingHorizontal = 30.0;
    const nodeTotalSpacingVertical = nodeHeight + nodeSpacingVertical;
    const nodeTotalSpacingHorizontal = nodeWidth + nodeSpacingHorizontal;

    const nodeMidpointVertical = nodeHeight / 2.0;
    const nodeMidpointHorizontal = nodeWidth / 2.0;

    const weekPadding = 30.0;
    const weekInfoHeight = 200.0;
    const weekVerticalSpacing = 20.0;

    const activityInfoHeight = 200.0;

    const weekWidth =
      2 * weekPadding + nodeTotalSpacingHorizontal * 3 - nodeSpacingHorizontal;

    const classificationLabels = [
      "Out of Class",
      "In Class (Instructor)",
      "In Class (Strudents)"
    ];

    function fetchThenRenderActivity() {
      d3.json("{% url 'course_flow:activity-detail' pk=object.pk %}").then(
        function(json) {
          activityJson = json;
          renderActivity(activityJson, svgParent);
          svgParent.attr(
            "height",
            Math.max(
              d3
                .select(".activity")
                .node()
                .getBBox().height + 20,
              $(window).innerHeight() - 100
            )
          );
        }
      );
    }

    fetchThenRenderActivity();

    function renderActivity(activityData, parent) {
      d3.selectAll(".activity").remove();

      const svgActivity = parent
        .append("svg")
        .attr("x", "0")
        .attr("y", "0")
        .attr("width", `${weekWidth}`)
        .attr("class", "activity");

      svgActivity
        .append("text")
        .attr("id", "activity-title")
        .attr("x", "15")
        .attr("y", "20")
        .attr("dy", 6)
        .text(activityData.title);

      svgActivity
        .append("text")
        .attr("id", "activity-author")
        .attr("x", "15")
        .attr("y", "40")
        .attr("dy", 6)
        .text("created by " + activityData.author);

      svgActivity
        .append("text")
        .attr("id", "activity-description")
        .attr("x", "15")
        .attr("y", "70")
        .attr("dy", 6)
        .text(activityData.description);

      svgActivity
        .append("g")
        .attr("class", "action-icon")
        .attr("id", "update-activity")
        .on("click", function(d, i) {
          window.location.href =
            "{% url 'course_flow:activity-update' pk=object.pk %}";
        })
        .append("image")
        .attr("x", `${weekWidth - 40}`)
        .attr("y", `${55}`)
        .attr("width", `${31}`)
        .attr("height", `${31}`)
        .attr("xlink:href", "{% static 'course_flow/img/pencil.svg' %}");

      for (let i = 0; i < 3; i++) {
        svgActivity
          .append("text")
          .attr("class", "activity-classification")
          .attr("text-anchor", "middle")
          .attr(
            "x",
            `${nodeTotalSpacingHorizontal * i + nodeTotalSpacingHorizontal / 2}`
          )
          .attr("y", "160")
          .attr("dy", 6)
          .text(classificationLabels[i]);
      }

      var runningActivityHeight = activityInfoHeight;

      svgActivity.selectAll(".week").remove();

      const strategies = svgActivity
        .selectAll(".week")
        .data(activityData.weekactivity_set)
        .enter()
        .append("svg")
        .attr("class", "week")
        .attr("x", "0")
        .attr(
          "height",
          (d, i) =>
            `${d.week.nodeweek_set.length * (nodeHeight + nodeSpacingVertical) -
              nodeSpacingVertical +
              2 * weekPadding +
              weekInfoHeight}`
        )
        .attr("width", `${weekWidth}`)
        .each(function(d, i) {
          d3.select(this)
            .append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("rx", "6")
            .style("pointer-events", "none")
            .attr(
              "width",
              `${(nodeWidth + nodeSpacingHorizontal) * 3 -
                nodeSpacingHorizontal}`
            )
            .attr(
              "height",
              `${d.week.nodeweek_set.length *
                (nodeHeight + nodeSpacingVertical) -
                nodeSpacingVertical +
                2 * weekPadding +
                weekInfoHeight}`
            )
            .attr("width", `${weekWidth}`)
            .attr("fill", "rgb(65,80,96)");
          renderWeek(d.week.nodeweek_set, d3.select(this));
        });

      for (let i = 0; i < activityData.weekactivity_set.length; i++) {
        for (let j = 0; j < activityData.weekactivity_set.length; j++) {
          if (strategies["_groups"][0][j].__data__.rank == i) {
            d3.select(strategies["_groups"][0][j]).attr(
              "y",
              `${runningActivityHeight}`
            );
            runningActivityHeight +=
              +d3.select(strategies["_groups"][0][j]).attr("height") +
              weekVerticalSpacing;
          }
        }
      }

      strategies
        .append("text")
        .attr("class", "week-title")
        .attr("x", "15")
        .attr("y", "20")
        .attr("dy", 6)
        .text(d => d.week.title);

      strategies
        .append("text")
        .attr("class", "week-author")
        .attr("x", "15")
        .attr("y", "40")
        .attr("dy", 6)
        .text(d => "created by " + d.week.author);

      strategies
        .append("text")
        .attr("class", "week-description")
        .attr("x", "15")
        .attr("y", "70")
        .attr("dy", 6)
        .text(d => d.week.description);
    }

    function pathToNextSiblingRect(s, i) {
      path =
        "M" +
        (s[i].x.animVal.value + nodeMidpointHorizontal) +
        "," +
        (s[i].y.animVal.value + nodeHeight) +
        "C" +
        (s[i].x.animVal.value + nodeMidpointHorizontal) +
        "," +
        (s[i].y.animVal.value + nodeHeight + s[i + 1].y.animVal.value) / 2 +
        " " +
        (s[i + 1].x.animVal.value + nodeMidpointHorizontal) +
        "," +
        (s[i].y.animVal.value + nodeHeight + s[i + 1].y.animVal.value) / 2 +
        " " +
        (s[i + 1].x.animVal.value + nodeMidpointHorizontal) +
        "," +
        s[i + 1].y.animVal.value;
      return path;
    }

    function renderNodeLinks(svg) {
      svg.selectAll("path").remove();

      let rects = svg.selectAll(".node")["_groups"][0];

      sortedRects = [rects.length];

      for (let i = 0; i < rects.length; i++) {
        for (let j = 0; j < rects.length; j++) {
          if (i == rects[j].__data__.rank) {
            sortedRects[i] = rects[j];
          } else if (rects[j].__data__.rank < 0) sortedRects[0] = rects[j];
          else if (rects[j].__data__.rank > rects.length - 1)
            sortedRects[rects.length - 1] = rects[j];
        }
      }

      for (let i = 0; i < rects.length - 1; i++) {
        svg
          .append("path")
          .style("stroke", "black")
          .style("stroke-width", 3)
          .attr("fill", "none")
          .attr("d", pathToNextSiblingRect(sortedRects, i));
      }
    }

    function renderWeek(nodeWeekSet, svg) {
      const nodes = svg
        .selectAll(".node")
        .data(nodeWeekSet)
        .enter()
        .append("svg")
        .attr("class", "node")
        .attr(
          "x",
          (d, i) =>
            `${nodeTotalSpacingHorizontal * d.node.classification +
              weekPadding}`
        )
        .attr(
          "y",
          (d, i) =>
            `${nodeTotalSpacingVertical * d.rank +
              weekPadding +
              weekInfoHeight}`
        );

      nodes
        .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("rx", "6")
        .attr("class", "node-rect")
        .attr("fill", "#1976BC")
        .attr("width", `${nodeWidth}`)
        .attr("height", `${nodeHeight}`)
        .style("pointer-events", "none");

      nodes
        .append("text")
        .attr("class", "node-title")
        .attr("x", "15")
        .attr("y", "20")
        .attr("dy", 6)
        .style("font-size", nodeWidth / 25)
        .text(d => d.node.title);

      nodes
        .append("text")
        .attr("class", "node-author")
        .attr("x", "15")
        .attr("y", "40")
        .attr("dy", 6)
        .style("font-size", 12)
        .text(d => "created by " + d.node.author);

      nodes
        .append("text")
        .attr("class", "node-description")
        .attr("x", "15")
        .attr("y", "0")
        .attr("dy", 6)
        .style("font-size", nodeWidth / 30)
        .text(d => d.node.description)
        .call(wrap, nodeWidth - 40);

      // following function taken from Mike Bostock's 'Wrapping Long Labels'

      function wrap(text, width) {
        text.each(function() {
          var text = d3.select(this),
            words = text
              .text()
              .split(/\s+/)
              .reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1.5, // ems
            y = text.attr("y");
          (x = text.attr("x")),
            (dy = parseFloat(text.attr("dy"))),
            (tspan = text
              .text(null)
              .append("tspan")
              .attr("x", x)
              .attr("y", y)
              .attr("dy", dy + "em"));
          while ((word = words.pop())) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
              line.pop();
              tspan.text(line.join(" "));
              line = [word];
              tspan = text
                .append("tspan")
                .attr("x", x)
                .attr("y", y)
                .attr("dy", ++lineNumber * lineHeight + dy + "em")
                .text(word);
            }
          }
        });
      }

      nodes
        .append("image")
        .style("pointer-events", "none")
        .attr("x", `${nodeWidth - 100}`)
        .attr("y", `${10}`)
        .attr("width", `${31}`)
        .attr("height", `${31}`)
        .attr(
          "xlink:href",
          "{% static 'course_flow/img/multiple-users-silhouette.svg' %}"
        );

      nodes
        .append("image")
        .style("pointer-events", "none")
        .attr("x", `${nodeWidth - 50}`)
        .attr("y", `${10}`)
        .attr("width", `${31}`)
        .attr("height", `${31}`)
        .attr("xlink:href", "{% static 'course_flow/img/classroom.svg' %}");

      nodes
        .append("text")
        .attr("class", "node-completion-count")
        .attr("text-anchor", "end")
        .attr("x", nodeWidth - 5)
        .attr("y", nodeHeight - 15)
        .attr("dy", 6)
        .style("font-size", 20)
        .each(async function() {
          const completionStatusCount = await getCompletionStatusCount(
            d3.select(this.parentNode).node().__data__.node.id
          );
          d3.select(this).text(
            completionStatusCount + "/{{ object.students.count }}"
          );
        });

      renderNodeLinks(svg);
    }

    $.ajaxSetup({
      beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
          xhr.setRequestHeader("X-CSRFToken", getCsrfToken());
        }
      }
    });

    function csrfSafeMethod(method) {
      return /^(GET|HEAD|OPTIONS|TRACE)$/.test(method);
    }
    function getCsrfToken() {
      return document
        .getElementsByName("csrfmiddlewaretoken")[0]
        .getAttribute("value");
    }

    async function getCompletionStatusCount(nodePk) {
      let resp = await $.get(
        "{% url 'course_flow:get-node-completion-count' %}",
        {
          nodePk: nodePk
        }
      );
      return resp.completion_status;
    }
  });
</script>
{% endblock %}