{{ block title }}
Practice Task
{{ endblock }}

{{ block content }}

<!-- Annotorious styles and scripts -->
<link rel="stylesheet" href="{{ static 'annotorious-2.7.13/annotorious.min.css' }}"/>
<script src="{{ static 'annotorious-2.7.13/annotorious.min.js' }}"></script>

<!-- Highcharts -->
<script src="https://cdn.jsdelivr.net/npm/highcharts@10.3.3/highcharts.js"></script>

<!-- Selector Pack plugin -->
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-selector-pack@latest/dist/annotorious-selector-pack.min.js"></script>

<!-- Hidden input for annotations -->
<input type="hidden" name="annotations" value=""/>

<!-- <p>
  <select id="toolSelector">
    <option value="freehand">Freehand</option>
    <option value="point">Point</option>
  </select>
</p> -->

<!-- <button id="clearAnnotationsButton" class="btn btn-secondary">Delete All Annotations</button> -->

<!-- {{ next_button }} -->
<div class="d-flex justify-content-between align-items-center mt-3">
    <button id="clearAnnotationsButton" class="btn btn-secondary">Delete All Annotations</button>
    {{ next_button }}
</div>

<!-- <div id="chart-container" style="width: 900px; height: 450px;"></div> -->
<div id="chart-container" style="width: 900px; height: 600px;"></div>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        var min_x = {{ min_x }};
        var max_x = {{ max_x }};
        var min_y = {{ min_y }};
        var max_y = {{ max_y }};
        var realData = {{ data_list }};

        var chart = Highcharts.chart('chart-container', {
        chart: {
          type: 'scatter'
        },
        title: {
          text: 'Data Chart'
        },
        yAxis: {
          title: {
              text: 'Y Axis'
          },
          min: min_y,
          max: max_y,
          startOnTick: false,
          endOnTick: false
        },
        xAxis: {
        title: {
            text: 'X Axis'
        },
          min: min_x,
          max: max_x,
          startOnTick: false,
          endOnTick: false,
          gridLineWidth: 1,     // 👈 adds vertical grid lines
          gridLineColor: '#e6e6e6', // optional: light gray
          gridLineDashStyle: 'Solid' // optional: can be 'Dash', 'Dot', etc.
      },
        
        series: [{
          name: 'Data',
          data: realData.map(function(point) {
                    return { x: point[0], y: point[1] };
                }),
          marker: {
            radius: 4,             // size of points
            fillColor: "rgba(230, 159, 0, 0.5)",  // inside color
            lineColor: "#E69F00",  // border color
            lineWidth: 1
          }
        }]
      });

      // Init Annotorious
      const anno = Annotorious.init({
        image: 'chart-container',
        widgets: ['COMMENT'],
        disableEditor: true
      });

      anno.on('createSelection', async function (selection) {
        // Tag to insert
        selection.body = [{
          type: 'TextualBody',
          purpose: 'tagging',
          value: 'MyTag'
        }];

        await anno.updateSelected(selection);
        anno.saveSelected();
        updateAnnotations();
      });

      // Constrain where users can annotate (for freehand and points)
    
      anno.on('createAnnotation', function (annotation) {
      const selector = annotation.target.selector;

      if (!selector) {
          return; // No selector to check
      }

      const value = selector.value;

      // Define allowed bounding box
      const allowedLeft = 64;
      const allowedTop = 48;
      const allowedRight = 900;
      const allowedBottom = 600;

      let isValid = true;

      if (selector.type === 'FragmentSelector' && value.startsWith('xywh=pixel:')) {
          // Probably a point annotation
          const match = value.match(/xywh=pixel:(\d+),(\d+),(\d+),(\d+)/);
          if (match) {
              const [_, x, y, w, h] = match.map(Number);

              const cx = x + w / 2;  // center x
              const cy = y + h / 2;  // center y

              if (cx < allowedLeft || cx > allowedRight || cy < allowedTop || cy > allowedBottom) {
                  isValid = false;
              }
          }
      } else if (selector.type === 'SvgSelector') {
        // Proper parsing of freehand path
        const commands = value.split(/[A-Za-z]/).filter(cmd => cmd.trim() !== '');
        const points = [];

        for (const cmd of commands) {
            const coords = cmd.trim().split(/\s+/);
            for (const pair of coords) {
                const [xStr, yStr] = pair.split(',');
                if (xStr !== undefined && yStr !== undefined) {
                    const x = parseFloat(xStr);
                    const y = parseFloat(yStr);
                    points.push({ x, y });
                }
              }
          }
      }

      if (!isValid) {
          alert("Please annotate inside the allowed area!");
          anno.removeAnnotation(annotation.id);
      }
    });


      function updateDrawingTool(tool) {
        anno.setDrawingTool(tool);
        console.log(`Drawing tool set to: ${tool}`);
      }

      // Handle tool selection change
      // document.getElementById('toolSelector').addEventListener('change', function (event) {
      //   const selectedTool = event.target.value;
      //   updateDrawingTool(selectedTool);
      // });

      document.getElementById('clearAnnotationsButton').addEventListener('click', function (event) {
        event.preventDefault();  // ⛔ prevent form submission
        event.stopPropagation(); // ⛔ prevent bubbling

        if (anno) {
          const allAnnotations = anno.getAnnotations();
          for (const ann of allAnnotations) {
            anno.removeAnnotation(ann.id);
          }

          updateAnnotations();
          document.getElementsByName('annotations')[0].value = "[]";

          // // Re-enable drawing tool
          // const currentTool = document.getElementById('toolSelector').value;
          // anno.setDrawingTool(currentTool);
        }
      });


      // Init the plugin
      Annotorious.SelectorPack(anno);

      anno.setDrawingTool('freehand');

      function updateAnnotations() {
        if (anno) {
          let annotations = anno.getAnnotations();
          let value = JSON.stringify(annotations);
          document.getElementsByName('annotations')[0].value = value;
        }
      }

    document.querySelector('form').addEventListener('submit', function(event) {
        let annotations = anno.getAnnotations();

        if (annotations.length === 0) {
            // 👇 Create a fallback annotation at (476, 271)
            const fallback = {
                id: 'fallback-annotation',
                type: 'Annotation',
                body: [{
                    type: 'TextualBody',
                    purpose: 'tagging',
                    value: 'Fallback'
                }],
                target: {
                    selector: {
                        type: 'FragmentSelector',
                        conformsTo: 'http://www.w3.org/TR/media-frags/',
                        value: 'xywh=pixel:476,271,1,1'
                    }
                }
            };

            anno.addAnnotation(fallback);
            annotations = anno.getAnnotations();
        }

        // Save updated annotations to hidden input
        let value = JSON.stringify(annotations);
        document.getElementsByName('annotations')[0].value = value;
    });

    });
  </script>

{{ endblock }}