// fixed height
const height = 350;
// set the margins of the graph
const margin = {
        top: 10,
        right: height,
        bottom: 30,
        left: 30
    };
// get window width
const width = window.innerWidth - margin.right - margin.left -10;

// url
const currentUrl = window.location.href;

// global delete key
var del_key = null;


// reload page when window is resized
// (resizes every elements)
window.onresize = function(){ location.reload(); }

async function fetch_history() {
  try {
    const response = await fetch(`${currentUrl}app/datahistory`);
    const rawData = await response.json();
    var dateFormat = d3.timeParse("%a, %d %b %Y %H:%M:%S GMT");
    // SELECT uuid, quantity, discount_percentage, price, currency, h_timestamp
    let historyData = rawData.map(d => ({
        uuid: d[0],
        value: parseFloat(d[3].replace('$', '')),
        currency: d[4],
        date: dateFormat(d[5]),
    }));
    return historyData;
  } catch (error) {
    console.error('Error fetching data history: ', error);
    throw error;
  }
}

async function fetch_item() {
  try {
    // SELECT uuid, itemid, skuid, choice, attributes, image
    const response = await fetch(`${currentUrl}app/dataitem`);
    const rawData = await response.json();
    const items = rawData.reduce((item, row) => {
      const uuid = row[0];

      const itemid = row[1];
      const skuid = row[2];
      const choice = row[3];
      const attributes = row[4];
      const image = row[5];

      const values = {
        itemid: itemid,
        skuid: skuid,
        choice: choice,
        attributes: attributes,
        image: image,
        show: true
      };

      item[uuid] = values;

      return item;
    }, {});

    return items;
  } catch (error) {
    console.error('Error fetching data item: ', error);
    throw error;
  }
}

async function get_data() {
    items_data = await fetch_item();
    history_data = await fetch_history();
    // console.log(items_data)
    // console.log(history_data)
    return Array(items_data, history_data);
}


function render_graphs(items, history) {

    // by default, do not show hidden items
    var show_hidden = false;

    // Date domain (width)
    const x = d3.scaleTime()
        .domain(d3.extent(history, d => d.date))
        .range([3, width-3]);

    // Group the data by (uuid)
    const nestedData = d3.group(history, d => d.uuid);
    // Create a div for each graph
    const graphDivs = d3.select("#graphs")
        .selectAll(".graph-container")
        .data(nestedData.keys())
        .enter().append("div")
        .attr("class", "graph-container");

    // Append SVG elements to each div
    const svgs = graphDivs.append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr('viewBox', `0 0 ${width} ${height}`)
        .attr("transform", `translate(${margin.left},${margin.top})`);

    var dict_xAxis = {};
    var dict_scatter = {};

    // plot for each graph
    svgs.each(function(key) {
        if (show_hidden || items[key].show) {
        const dataSubset = nestedData.get(key);
        const svg = d3.select(this);

        // context on right side
        const link = `https://fr.aliexpress.com/item/${items[key].itemid}.html`;
        // image
        svg.append("image")
            .attr("x", width + margin.right*0.1)
            .attr("y", height*0.1)
            .attr("width", height*0.8)
            .attr("height", height*0.8)
            .attr("xlink:href", items[key].image)
            .on("click", function() {
                window.open(link, '_blank', 'noopener,noreferrer');
            });

        // BUTTONS FOR EACH GRAPH
        // buttons to hide or show item
        g_div = this.parentNode.parentNode;
        const hide_button = document.createElement("button");
        hide_button.innerHTML = "hide";
        hide_button.style.position = "relative";
        hide_button.style.top = `-${height+margin.bottom}px`;
        hide_button.style.left = `${margin.left+20}px`;
        g_div.append(hide_button);
        // button to delete item
        const del_button = document.createElement("button");
        del_button.innerHTML = "delete";
        del_button.style.position = "relative";
        del_button.style.top = `-${height+margin.bottom}px`;
        del_button.style.left = `${margin.left+30}px`;
        del_button.addEventListener("click", function () {
            confirmationPopup.style.display = 'flex';
            del_key = key;
        });
        g_div.append(del_button);


        // Price domain (height)
        const y = d3.scaleLinear()
            .domain([d3.min(dataSubset, d => d.value) - 1, d3.max(dataSubset, d => d.value) + 1])
            .range([height, 0]);

        // height axis
        dict_xAxis[key] = svg.append("g")
            .attr("transform", `translate(0, ${height})`)
            .call(d3.axisBottom(x));

        // width axis
        svg.append("g")
            .call(d3.axisLeft(y));


        // clipPath, area drawn
        const clip_line = svg.append("defs").append("svg:clipPath")
            .attr("id", "clip_line")
            .append("svg:rect")
            .attr("width", width )
            .attr("height", height )
            .attr("x", 0)
            .attr("y", 0);
        const clip_dot = svg.append("defs").append("svg:clipPath")
            .attr("id", "clip_dot")
            .append("svg:rect")
            .attr("width", width+10 )
            .attr("height", height )
            .attr("x", -5)
            .attr("y", 0);

        // lines between dots
        // plotted before dots to stay below them
        svg.append("path")
            .datum(dataSubset)
            .attr("id", "line_path")
            .attr("clip-path", "url(#clip_line)") // bind to clipPath
            .attr("fill", "none")
            .attr("stroke", "black")
            .attr("stroke-width", 1.5)
            .attr("d", d3.line()
                .x(d => x(d.date))
                .y(d => y(d.value))
            );

        // brushing
        const brush = d3.brushX()
            .extent( [ [0,0], [width,height] ] )  // select whole graph
            .on("end", updateChart)               // update graph on brush release

        // line, area brushed
        const line = svg.append('g')
                        .attr("clip-path", "url(#clip_line)")

        // Add brushing
        line.append("g")
            .attr("class", "brush")
            .call(brush);

        let idleTimeout
        function idled() { idleTimeout = null; }

        // update graph on zoom brush release
        function updateChart(event,d) {
            extent = event.selection
            if(!extent){
                if (!idleTimeout) return idleTimeout = setTimeout(idled, 350);
            }else{
                x.domain([ x.invert(extent[0]), x.invert(extent[1]) ]) // new domain is brushing area
                line.select(".brush").call(brush.move, null) // remove brushing area
            }
            // Update axis
            dict_xAxis[key].transition().duration(1000).call(d3.axisBottom(x))
            // Update lines
            svg.selectAll("#line_path")
                .transition()
                .duration(1000)
                .attr("d", d3.line()
                    .x(d => x(d.date))
                    .y(d => y(d.value))
                );
            // Update dots
            svg.selectAll("circle")
                .data(dataSubset)
                .transition()
                .duration(1000)
                .attr("cx", d => x(d.date))
        }

        // reset zoom on double click
        svg.on("dblclick",function(){
            x.domain(d3.extent(history, function(d) { return d.date; }))
            // Axis
            dict_xAxis[key].transition().call(d3.axisBottom(x))
            // Lines
            svg.selectAll("#line_path")
                .transition()
                .duration(1000)
                .attr("d", d3.line()
                    .x(d => x(d.date))
                    .y(d => y(d.value))
                );
            // Dots
            svg.selectAll("circle")
                .data(dataSubset)
                .transition()
                .duration(1000)
                .attr("cx", d => x(d.date))
        });

        // TOOLTIP
        // tooltip: box with node value
        const Tooltip = d3.select(this.parentNode.parentNode).append("div")
            .style("opacity", 0)
            .attr("class", "tooltip")
            .style("background-color", "white")
            .style("border", "solid")
            .style("border-width", "2px")
            .style("border-radius", "5px")
            .style("padding", "5px")
            .style("position", "absolute");

        // Interaction functions
        const mouseover = function(event, d) {
            var formatted_date = d.date.toISOString().split('T')[0]
            Tooltip
                .style("opacity", 1)
                .html(formatted_date + "<br />" + d.value + " " + d.currency)
                .style("left", (event.pageX + 10) + "px")
                .style("top", (event.pageY + 10) + "px");
        };

        const mousemove = function(event) {
            Tooltip
                .style("left", (event.pageX + 10) + "px")
                .style("top", (event.pageY + 10) + "px");
        };

        const mouseleave = function() {
            Tooltip.style("opacity", 0)
                .style("left", 0 + "px")
                .style("top", 0 + "px"); // send tooltip outside of brushing area
        };

        // points plot
        dict_scatter[key] = svg.append("g")
                                .selectAll("circle")
                                .data(dataSubset)
                                .enter()
                                .append("circle")
                                .attr("clip-path", "url(#clip_dot)") // bind to clipPath
                                .attr("cx", d => x(d.date))
                                .attr("cy", d => y(d.value))
                                .attr("r", 5)
                                .attr("stroke", "#69b3a2")
                                .attr("stroke-width", 3)
                                .attr("fill", "white")
                                .on("mouseover", mouseover)
                                .on("mousemove", mousemove)
                                .on("mouseleave", mouseleave);
    }
    });

}

function render_graphs_wrapper() {
    get_data().then(function(data){
        render_graphs(data[0], data[1]);
    })
}

// refresh render
function refresh_graphs() {
    const node = document.getElementById("graphs");
    while (node.firstChild) {
        node.removeChild(node.lastChild);
    }
    render_graphs_wrapper();
}

// render graphs
render_graphs_wrapper();

// add item
document.getElementById("addbutton").addEventListener("click", addItem);

async function addItem() {
    const apiUrl = `${currentUrl}app/add`;
    const postData = {
        itemid: document.getElementById("additemid").value,
        attributes: document.getElementById("addattributes").value
    };

    // clear input fields
    document.getElementById("additemid").value='';
    document.getElementById("addattributes").value='';

    const requestOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(postData)
    };

    const response = await fetch(apiUrl, requestOptions)
            .catch(error => {
            console.error('Error during POST request:', error);
            });

    if (response.ok) {
        console.log(response);
        // refresh graphs to display new item
        refresh_graphs();
    } else {
        throw new Error('Error in server response');
    }
}

async function delItem(uuid) {
const apiUrl = `${currentUrl}app/delete`;
    const postData = {
        uuid: uuid
    };

    const requestOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(postData)
    };

    const response = await fetch(apiUrl, requestOptions)
            .catch(error => {
            console.error('Error during POST request:', error);
            });

    if (response.ok) {
        console.log(response);
        // refresh graphs to stop displaying deleted item
        refresh_graphs();
    } else {
        throw new Error('Error in server response');
    }
}


// delete item, pop-up confirm
document.addEventListener('DOMContentLoaded', function () {
  const yesBtn = document.getElementById('yesBtn');
  const noBtn = document.getElementById('noBtn');
  yesBtn.addEventListener('click', function () {
    delItem(del_key);
    confirmationPopup.style.display = 'none';
  });
  noBtn.addEventListener('click', function () {
    confirmationPopup.style.display = 'none';
  });
});