{% load wagtailsettings_tags %}
{% get_settings use_default_site=True %}

<h2 style="padding-top:2em">Create new forecast</h2>

<div id="createTable" style=z-index:1></div>
<div class="row row-flush" style="padding-top:1rem">
  <div class="col6" style="text-align:start">

    <button type="button" class="button button-secondary actionbutton" id="addRows">Add 10+ Rows</button>
    <button type="button" class="button button-secondary actionbutton" id="clearRows">Clear Table</button>

  </div>
  <div class="col6" style="text-align:end">
    <button type="button" class="button actionbutton" id="exportTable">Download Table as CSV</button>
  </div>
</div>


<script>
  var weather_condition_ls = JSON.parse('{{weather_condition_ls|escapejs}}')
  var city_ls = JSON.parse('{{city_ls|escapejs}}')

  const container = document.querySelector('#createTable');
  const hot = new Handsontable(container, {
    width: '100%',
    rowHeaders: true,
    colHeaders: [
      'City', 
      'Date', 
      'Min Temperature ({{settings.forecastmanager.Setting.get_temp_units_display}})',
      'Max Temperature ({{settings.forecastmanager.Setting.get_temp_units_display}})',
      'Wind Speed ({{settings.forecastmanager.Setting.get_wind_units_display}})',
      'Wind Direction (°)', 
      'General Condition'],
    columns: [
      {
        type: 'dropdown',
        source: city_ls.map(city => city.fields.name),
        allowEmpty: false,
      },
      {
        type: 'date',
        allowEmpty: false,
        dateFormat: 'YYYY-MM-DD',
      },
      {
        type: 'numeric',
        allowEmpty: false,
      },
      {
        type: 'numeric',
        allowEmpty: false,
      },
      {
        type: 'numeric',
      },
      {
        type: 'numeric',
      },
      {
        type: 'dropdown',
        source: weather_condition_ls.map(condition => condition.fields.title),
        allowEmpty: false,

      },
    ],
    // dropdownMenu: true,
    multiColumnSorting: true,
    // filters: true,
    allowInvalid: true,
    manualColumnResize: true,
    manualColumnResize: [100, 100],
    minSpareRows: 10,
    height: 'auto',
    stretchH: "all",
    licenseKey: 'non-commercial-and-evaluation' // for non-commercial use only
  });


  function validateData() {
    var instance = hot.getInstance();
    var hasError = false; // Assume no errors initially

    for (var i = 0; i < instance.countRows(); i++) {
      var rowHasValue = false; // Assume the row is empty initially

      for (var j = 0; j < instance.countCols(); j++) {
        var cellData = instance.getDataAtCell(i, j);

        // Check if the cell is not null or empty string
        if (cellData !== null && cellData !== '') {
          rowHasValue = true; // Mark the row as non-empty

          instance.setCellMeta(i, j, 'valid', true);
          instance.setCellMeta(i, j, 'comment', '');
        } else {
          instance.setCellMeta(i, j, 'valid', true);
          instance.setCellMeta(i, j, 'comment', '');
        }
      }

      // Only validate the row if it has at least one non-empty cell
      if (rowHasValue) {
        instance.validateRows([i]);
        if (instance.getCellMeta(i, 0).valid === false) {
          hasError = true; // Mark that there is an error
        }
      }
    }

    // Re-render the table to display the validation feedback
    instance.render();

    // Show the overall error message if there is an error
    return hasError
  }

  document.getElementById('clearRows').addEventListener('click', function (){
    //reset table 
    hot.updateData([])
  })

  const exportPlugin = hot.getPlugin('exportFile');

  document.getElementById('exportTable').addEventListener('click', function(){
    exportPlugin.downloadFile('csv', {
      bom: false,
      columnDelimiter: ',',
      columnHeaders: true,
      exportHiddenColumns: true,
      exportHiddenRows: true,
      fileExtension: 'csv',
      filename: 'city_forecasts_[YYYY]-[MM]-[DD]',
      mimeType: 'text/csv',
      rowDelimiter: '\r\n',
      rowHeaders: true
    });
  })


  document.getElementById('submitForecast').addEventListener('click', function () {

    var data = hot.getData();

    // Filter out rows that have all values null or undefined
    nonNullRows = data.filter(function (row) {
      return row.some(function (cell) {
        return cell !== null && cell !== undefined && cell !== '';
      });
    });

    // Validate the data
    var isValid = validateData();


    // Create an array of objects with the column names as keys
    var postData = [];

    if (nonNullRows.length > 0) {

      for (var i = 0; i < nonNullRows.length; i++) {
        var row = {
          'city': nonNullRows[i][0],
          'forecast_date': nonNullRows[i][1],
          'min_temp': nonNullRows[i][2],
          'max_temp': nonNullRows[i][3],
          'wind_direction': nonNullRows[i][5],
          'wind_speed': nonNullRows[i][4],
          'condition': nonNullRows[i][6],
        };
        postData.push(row);

      }


      // Send the JSON data to a Django view via AJAX
      $.ajax({
        url: '{% url "save_data"%}',
        type: 'POST',
        data: {
          'data': JSON.stringify(postData)
        },
        success: function (response) {
          // Clear the Handsontable table
          $('#creatSuccess').show('slow')

          setTimeout(function () {
            $('#creatSuccess').hide('slow')

          }, 5000)

          //clear table on successful submission
          hot.updateData([])
        },
        error: function (jqXHR, textStatus, errorThrown) {

          if (errorThrown) {
            $('#creatError').show('slow')
            $('#creatError').html(JSON.parse(jqXHR.responseText).error)

            setTimeout(function () {
              $('#creatError').hide('slow')

            }, 5000)

          }

        }
      })

    } else {
      $('#creatError').show('slow')
      $('#creatError').html('The table is empty. Please input data')

      setTimeout(function () {
        $('#creatError').hide('slow')

      }, 5000)
    }

  })

  document.getElementById('addRows').addEventListener('click', function () {
    hot.alter('insert_row_below', hot.countRows(), 10);

  })
</script>