import {
  create_dataframe,
  create_selection,
  showSuccess,
  showElement,
  hideElement,
  openModal,
  closeModal,
  hideElements,
  showElements,
  removeExistingElements,
  appendToElement
} from './methods.js';

document.addEventListener('DOMContentLoaded', () => {
  const uploadedFileInput = document.getElementById('uploaded_file');
  const loader = document.getElementById('cfbtn_loader');
  const loaderStats = document.getElementById('loader_stats');

  uploadedFileInput.addEventListener('change', handleFileUpload);

  async function handleFileUpload() {
    const uploadedDataset = document.querySelector('input[name=uploaded_file]:checked')?.value;
    if (!uploadedDataset) return;

    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

    hideElements([
      '#df_container', '#stats_container', '#figs',
      '#ts_confidence_cached', '#ts_stats_cached',
      '#ts_confidence', '#ts_stats'
    ]);

    showElement(loader);

    try {
      const response = await fetchData(uploadedDataset, csrfToken);
      handleResponse(response);
    } catch (error) {
      console.error('An error occurred:', error);
      // TODO: Implement user-friendly error handling
    } finally {
      hideElements([loader, loaderStats]);
    }
  }

  async function fetchData(dataset, token) {
    const response = await fetch('', {
      method: 'POST',
      headers: {
        'X-CSRFToken': token,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        action: 'uploaded_datasets',
        df_name: dataset
      })
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    return await response.json();
  }

  function handleResponse(data) {
    removeExistingElements([
      '#pretrained_radio', '#df_container', '#stats_container',
      '#feature1', '#feature2', '#label',
      '#ts_confidence_container', '#ts_stats_container'
    ]);

    data.dataset_type === 'tabular' ? displayTabularData(data) : displayTimeSeriesData(data);
  }

  function displayTabularData({ data_to_display, fig, features, feature1, feature2, labels, curlabel }) {
    const selectionContainer = document.getElementById('selection');
    [
      create_selection(features, 'feature1', null, feature1),
      create_selection(features, 'feature2', null, feature2),
      create_selection(labels, 'label', null, curlabel)
    ].forEach(selection => selectionContainer.appendChild(selection));

    appendToElement('#df_div', create_dataframe(data_to_display, 'df_container'));
    showElements(['#model_container', '#df', '#df_stats']);
    appendToElement('#stats_div', createFigureContainer('stats_container', fig));
  }

  function displayTimeSeriesData({ fig, fig1 }) {
    appendToElement('#ts_stats_div', createFigureContainer('ts_stats_container', fig1));
    appendToElement('#ts_confidence_div', createFigureContainer('ts_confidence_container', fig));
    showElements(['#ts_stats', '#ts_confidence']);
  }

  function createFigureContainer(id, content) {
    const container = document.createElement('div');
    container.id = id;
    container.innerHTML = content;
    container.className = 'plotly_fig';
    return container;
  }
});