d3 = require("d3");

/* <--- Constants ---> */

// NOTE: The sizes (e.g. `stroke_width`, `point_width`) are relative to the
// size of the SVG view-box that the plot lives inside which dimensions of
// `width` x `height` (the view-box expands to fill the page margin width, but
// all sizes defined here are relative to this `width` by `height` setting).

// Mobile detection

// NOTE: There's a more complete regex for mobile in that Stack link if required
// From: https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
is_mobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

// Grid dimensions
n_cols = is_mobile ? 7 : 16; // Format long on mobile, wide otherwise
n_rows = is_mobile ? 7 : 7;
middle_col = Math.floor(n_cols / 2);
middle_row = Math.floor(n_rows / 2);
width = n_cols * 10;
height = n_rows * 10;

// Relative width and height of the grid-points
point_width = 2;
point_height = 2;
stroke_width = 0.25;

// A small plot margin prevents the right / bottom grid lines from being clipped
margin_bottom = stroke_width * 2;
margin_right = stroke_width * 2;
margin_top = 0;
margin_left = 0;

// These describe the characteristics of the grid points and need to be tuned
// relative to one another such that the SVG text fits within an expanded grid
// point on mouse hover.
title_size = 3.5;
text_size = 2.5;
title_line_spacing = title_size * 1.5;
text_line_spacing = text_size * 1.5;
max_chars_per_text_line = is_mobile ? 30 : 50;
max_chars_per_title_line = is_mobile ? 20 : 30;
popup_x_margin = point_width * 2;
popup_y_margin = point_height * 2;

// How long should transition events take (in milliseconds)?
data_enter_fade_duration = 300;
data_exit_fade_duration = 300;
data_exit_shift_duration = 500;
data_exit_delay_duration = 200;
popup_expand_duration = 300;
popup_contract_duration = 300;

// Which post categories to include and how many posts to plot at a time?
post_category_options = [
  "featured",
  "package",
  "{rlang}",
  "d3",
  "c++",
  "no-category" // TODO: Remove, for testing
];
default_post_category_option = post_category_options[0];
max_posts_to_show = 5;

/* <--- Helpers ---> */

// Sample `max(n, x.length)` elements of `x` without replacement
sample = function(x, n) {
  return d3.shuffle(x).slice(0, n);
}

// Return elements in `x` which are not in `y`
diff = function(x, y) {
  return x.filter(element => !y.includes(element));
}

// Return elements in which are in both `x` and `y`
intersect = function(x, y) {
  return x.filter(element => y.includes(element));
}

// Return unique elements in `x`
unique = function(x) {
  return [...new Set(x)];
}

// Split `text` into lines with a maximum of `max_chars_per_line` characters.
// Allows line wrapping of hyphenated words.
split_lines = function(text, max_chars_per_line) {

  const split_hyphenated_word = function(word) {
    var words = word.split("-");
    if (words.length != 1) {
      return words.map((word, i) => (i < words.length - 1) ? word + "-" : word);
    }
    return words;
  }
  
  const words = text.split(" ").flatMap(split_hyphenated_word);
  var lines = [];
  var line = words[0];
  
  for (var i = 1; i < words.length; i++) {
    var test_line = line + (line.endsWith("-") ? "" : " ") + words[i]
    if (test_line.length > max_chars_per_line) {
      lines.push(line);
      line = words[i];
    }
    else {
      line = test_line;
    }
  }
  lines.push(line);
  
  return lines;
}

/* <--- Data Preparation ---> */

// Translates the full width into `n_cols` grid lengths
x_axis = d3.scaleLinear()
  .domain([0, n_cols])
  .range([margin_left, width - margin_right]);

// Translates the full height into `n_rows` grid lengths
y_axis = d3.scaleLinear()
  .domain([0, n_rows])
  .range([height - margin_bottom, margin_top]);

// TODO: This can 100% be simplified, but it does the job.
//
// For each category of posts in `post_category_options`, filter up to
// `max_posts_to_show` posts which match that category. A post may be
// associated with more than one categories.
//
// For each of the filtered posts, assign it a unique (x, y) coordinate.
filter_posts_and_assign_grid_positions = function(data) {
  
  const post_ids = data.map(post => post.post_id);
  const post_categories = data.map(post => post.categories);
  const category_to_posts = new Map();

  var all_x = d3.range(1, n_cols);
  var all_y = d3.range(1, n_rows);
  
  // If we're on mobile, avoid assigning grid points near the center to prevent
  // clipping of the grid pop-up.
  if (is_mobile) {
    all_x = all_x.filter(x => x < (middle_col - 1) || x > (middle_col + 1));
    all_y = all_y.filter(y => y < (middle_row - 1) || y > (middle_row + 1));
  }
  const all_coords = all_x.flatMap(x => all_y.map(y => `${x},${y}`));

  // Get the IDs of the up to `max_posts_to_show` posts matching `category`
  // and add them to `filtered_ids`. A post can belong to multiple categories.
  for (const category of post_category_options) {
    // Get the post IDs in this category
    const in_category_post_ids = post_ids
      .filter((_, i) => post_categories[i].includes(category))
      .slice(0, max_posts_to_show);
    
    category_to_posts.set(category, in_category_post_ids);
  }
  
  // Assign each posts in the filtered posts a coordinate such that, in any
  // group of posts in the same category, no post shares the same coordinate.
  const filtered_post_ids = unique([...category_to_posts.values()].flatMap(v => v));
  const post_to_coords = new Map();
  filtered_post_ids.forEach(post_id => post_to_coords.set(post_id, ""));
  
  // Assign each post a non-conflicting grid coordinate
  for (const post_id of filtered_post_ids) {
    // Get the coordinates of all posts which could be shown alongside this 
    // `post_id`.
    const co_post_ids = unique(
      [...category_to_posts.values()]
        .filter(post_ids => post_ids.includes(post_id))
        .flatMap(v => v)
        .filter(co_post_id => co_post_id != post_id)
    );
    const co_post_coords = co_post_ids.map(co_post_id => post_to_coords.get(co_post_id));
    
    // Sample a coordinate not already claimed by `co_post_ids` and record it
    const post_coord = sample(diff(all_coords, co_post_coords), 1)[0];
    post_to_coords.set(post_id, post_coord);
  }
  
  return data
    .filter(post => filtered_post_ids.includes(post.post_id))
    .map(post => {
      const post_coords = post_to_coords.get(post.post_id).split(",");
      return {
        x: parseInt(post_coords[0]),
        y: parseInt(post_coords[1]),
        ...post
      }
    });
}

// Filter the posts to a set of those in categories `post_category_options`
// and assign each post a position on the grid.
raw_posts = transpose(posts_metadata);
subset_posts = filter_posts_and_assign_grid_positions(raw_posts);

// Pre-calculate and record the positions of each post's grid-point and 
// on-hover pop-up.
posts = subset_posts
  .map(d => {
    // Assign a visual x, y position for the plot
    const x = d.x;
    const y = d.y;
    const x_plot = x_axis(x) - (3 * stroke_width);
    const y_plot = y_axis(y) - (3 * stroke_width);
    
    // Overwrite the x, y positions since we only care about the visual location
    d.x = x_plot;
    d.y = y_plot;
    
    // Split the summary and title into lines (these will be list columns)
    const title_lines = split_lines(d.title, max_chars_per_title_line);
    const summary_lines = split_lines(d.summary, max_chars_per_text_line);

    // Calculate the x-position and y-position of each line of pop-up text
    const popup_text_x = x_plot + popup_x_margin;
    var title_lines_y = [];
    var summary_lines_y = [];
    var text_y_offset = point_height + popup_y_margin;
    for (var i = 0; i < title_lines.length; i++) {
      title_lines_y.push(y_plot + text_y_offset);
      text_y_offset += title_line_spacing;
    }
    for (var i = 0; i < summary_lines.length; i++) {
      summary_lines_y.push(y_plot + text_y_offset)
      text_y_offset += text_line_spacing;
    }
    // Add a post-link on the line below
    text_y_offset += text_line_spacing / 2;
    const post_link_line_y = y_plot + text_y_offset;

    // Calculate the dimensions and position of the grid-point pop-up
    const popup_width = (max_chars_per_text_line * text_size / 2) + (2 * popup_x_margin);
    const popup_height = text_y_offset + popup_y_margin;
    
    // The pop-up expands towards the quadrant opposite it's grid-point so that
    // it doesn't exit the grid. By default, the pop-up will expand towards the 
    // bottom-right, so we need to adjust it's position while we increase it's
    // size in order to mimic expanding in other directions (e.g. up-left).
    const popup_x_offset = (x < middle_col) ? 0 : popup_width - point_width;
    const popup_y_offset = (y > middle_row) ? 0 : popup_height - point_height;

    return {
      title_lines_data: transpose({
        text: title_lines,
        y: title_lines_y.map(y => y - popup_y_offset),
        x: Array(title_lines.length).fill(popup_text_x - popup_x_offset)
      }),
      summary_lines_data: transpose({
        text: summary_lines,
        y: summary_lines_y.map(y => y - popup_y_offset),
        x: Array(summary_lines.length).fill(popup_text_x - popup_x_offset)
      }),
      post_link_line_data: [{
        href: d.post_href,
        text: "Read More ->",
        y: post_link_line_y - popup_y_offset,
        x: popup_text_x - popup_x_offset
      }],
      popup_width: popup_width,
      popup_height: popup_height,
      popup_x: x_plot - popup_x_offset,
      popup_y: y_plot - popup_y_offset,
      ...d
      }
  });


/* <--- Mouse Events ---> */

// Expand a grid-point's pop-up and reveal it's summary text on mouse enter
grid_point_container_mouseenter = function(d) {
  // We're acting on the parent <g> container, which is `this` but we really 
  // care about editing the grid-point and it's siblings (text elements).
  const parent = d3.select(this);
  const grid_point = parent.select(".grid-point");
  
  // Raise this <g> container to the top so it's contents appear above other
  // grid points. Do this first so that the pop-up appears on top of other grid
  // points during its transition.
  parent
    .raise();
  
  // Expand the grid-point into a popup
  grid_point
    .transition()
    .duration(popup_expand_duration)
    .attr("x", d => d.popup_x)
    .attr("y", d => d.popup_y)
    .attr("width", d => d.popup_width)
    .attr("height", d => d.popup_height)
    .style("fill-opacity", 1)
    .on("end", () => {
      // Show pop-up text. Intentionally not including a transition so that
      // text fade in/out and pop-up expand/contract are never misaligned.
      parent
        .selectAll(".point-title")
        .style("opacity", 1)
      parent
        .selectAll(".point-text")
        .style("opacity", 1)
    
      // Make the link text interact-able
      parent
        .selectAll(".point-link .point-text")
        .style("pointer-events", "auto")
    });
}

// Contract a grid-point's pop-up and hide it's summary text on mouse leave
grid_point_container_mouseleave = function(d) {
  // Hide any point text or titles from the grid.
  const post_grid_points = d3.select(".post-grid-points-container");
  post_grid_points
    .selectAll(".point-title")
    .style("opacity", 0);
  post_grid_points
    .selectAll(".point-text")
    .style("opacity", 0);
  
  // Make the link text non-interact-able
  post_grid_points
    .selectAll(".point-link .point-text")
    .style("pointer-events", "none");
  
  // De-expand the grid-point to it's original width
  d3.select(this)
    .select(".grid-point")
    // Turn off pointer events until this transition is finished
    .style("pointer-events", "none")
    .transition()
    .duration(popup_contract_duration)
    .attr("x", d => d.x)
    .attr("y", d => d.y)
    .attr("width", point_width)
    .attr("height", point_height)
    .style("fill-opacity", 0)
    .on("end", function() { 
      return d3.select(this).style("pointer-events", "auto"); 
    });
}

/* <--- Plot Building ---> */

// Define the SVG view-box
svg = d3.select("#projects-grid")
  .append("svg")
  // Force the plot to width/height aspect ratio which fills the parent width
  .attr("viewBox", [0, 0, width, height])
  .attr("style", "max-width: 100%; height: auto;");

// Create a container for the grid-points
post_grid_points_container = svg
  .append("g")
  .classed("post-grid-points-container", true);

// Updates the grid-points using `data`
update = function(data, previous_data, first = false) {
  post_grid_points_container
    .selectAll("g")
    .data(data, d => d.post_id) // Important to key on the unique post ID
    .join(
      enter => {
        enter
          .append("g")
          .classed("grid-point-container", true)
          .on("mouseenter", grid_point_container_mouseenter)
          .on("mouseleave", grid_point_container_mouseleave)
          .call(g => {
            const grid_points = g.append("rect")
              .classed("grid-point", true)
              .attr("x", d => d.x)
              .attr("y", d => d.y)
              .attr("width", point_width)
              .attr("height", point_height)
              .attr("stroke-width", stroke_width);
            
            // If we're updating the data, give the exiting grid-points time to
            // finish transitioning before revealing the entering grid-points.
            if (!first) {
              grid_points
                .style("opacity", 0)
                .transition()
                .delay(
                  // Only delay the fade-in if there are exiting grid points
                  (previous_data.length <= 0) ? 0 :
                  Math.max(data_exit_shift_duration, data_exit_fade_duration) 
                  + data_exit_delay_duration
                )
                .duration(data_enter_fade_duration)
                .style("opacity", 1);
            }
          })
          .call(g => g.append("g")
            .classed("title-text-container", true)
            .selectAll("text")
            .data(d => d.title_lines_data)
            .join("text")
              .classed("point-title", true)
              .attr("x", d => d.x)
              .attr("y", d => d.y)
              .text(d => d.text)
              .style("font-size", title_size)
          )
          .call(g => g.append("g")
            .classed("summary-text-container", true)
            .selectAll("text")
            .data(d => d.summary_lines_data)
            .join("text")
              .classed("point-text", true)
              .attr("x", d => d.x)
              .attr("y", d => d.y)
              .text(d => d.text)
              .style("font-size", text_size)
          )
          .call(g => g.append("g")
            .classed("link-text-container", true)
            .selectAll("text")
            .data(d => d.post_link_line_data)
            .join("a")
              .classed("point-link", true)
              .attr("href", d => d.href)
              .append("text")
              .classed("point-text", true)
              .attr("x", d => d.x)
              .attr("y", d => d.y)
              .text(d => d.text)
              .style("font-size", text_size)
          );
      },
      // The <rect> grid-points are associated with our original data and so
      // don't need to be updated. However, since we add the pop-up text by 
      // using new data (e.g. `d.title_lines_data`) we'll have to re-add this 
      // text in `update()`.
      update => {
        update
          .call(g => g.append("g")
            .classed("title-text-container", true)
            .selectAll("text")
            .data(d => d.title_lines_data)
            .join("text")
              .classed("point-title", true)
              .attr("x", d => d.x)
              .attr("y", d => d.y)
              .text(d => d.text)
              .style("font-size", title_size)
          )
          .call(g => g.append("g")
            .classed("summary-text-container", true)
            .selectAll("text")
            .data(d => d.summary_lines_data)
            .join("text")
              .classed("point-text", true)
              .attr("x", d => d.x)
              .attr("y", d => d.y)
              .text(d => d.text)
              .style("font-size", text_size)
          )
          .call(g => g.append("g")
            .classed("link-text-container", true)
            .selectAll("text")
            .data(d => d.post_link_line_data)
            .join("a")
              .classed("point-link", true)
              .attr("href", d => d.href)
              .append("text")
              .classed("point-text", true)
              .attr("x", d => d.x)
              .attr("y", d => d.y)
              .text(d => d.text)
              .style("font-size", text_size)
          );
      },
      exit => {
        if (exit.empty()) {
          return exit;
        }
        // Return any exiting grid-point to it's non-pop-up state and prevent 
        // interaction with the exiting grid-points via pointer-events.
        exit
          .selectAll(".point-title")
          .style("opacity", 0);
        exit
          .selectAll(".point-text")
          .style("opacity", 0);
        exit
          .selectAll(".point-link .point-text")
          .style("pointer-events", "none");
        exit
          .select(".grid-point")
          .style("pointer-events", "none")
          .attr("x", d => d.x)
          .attr("y", d => d.y)
          .attr("width", point_width)
          .attr("height", point_height);
        
        // To avoid collisions with `update()` we only want to shift exiting
        // posts to the locations of entering posts' grid-points and not to the
        // locations of updated posts (which don't move).
        const previous_posts_ids = previous_data.map(d => d.post_id);
        const entering_data = data
          .filter(post => !previous_posts_ids.includes(post.post_id));
        
        // We want to shift over up to `n_points_entering` of the exiting grid
        // points to the location of the entering grid-points before we remove
        // all of the exiting grid-points. This makes it appear as though the
        // points just slid over to their new locations.
        //
        // If more grid-points are exiting than entering, we fade out any excess
        // exiting grid-points.
        const n_points_exiting = exit.selectAll(".grid-point").size();
        const n_points_entering = entering_data.length;
        const n_points_to_shift = Math.min(n_points_entering, n_points_exiting);
        const n_points_to_fade = n_points_exiting - n_points_to_shift;
          
        // Select the set of nodes (i.e. grid-points) to shift and fade. Note, I
        // tried `exit.filter((d, i) => i < n)`, but the exit selection has more
        // elements than just the grid-point-containers.
        const exiting_grid_points = exit.selectAll(".grid-point");
        const shifting_grid_points = d3.selectAll(
          exiting_grid_points.nodes().slice(0, n_points_to_shift)
        );
        const fading_grid_points = d3.selectAll(
          exiting_grid_points.nodes().slice(n_points_to_shift, n_points_exiting)
        );
        
        // Shift these grid-points to the locations of the entering grid-points
        shifting_grid_points
          .data(entering_data.slice(0, n_points_to_shift))
          .style("fill-opacity", 1)
          .transition()
          .delay(data_exit_delay_duration)
          .duration(data_exit_shift_duration)
          .attr("x", d => d.x)
          .attr("y", d => d.y);

        // Fade away any excess exiting grid-points
        fading_grid_points
          .transition()
          .duration(data_exit_fade_duration)
          .style("opacity", 0);

        // Before removing the exiting grid-points we need to ensure that:
        // - The exit fade and shift transitions have finished
        // - The entering grid-points have fully faded in (potentially on top of 
        //   the shifted exiting grid-points)
        exit
          .transition()
          .delay(
            Math.max(data_exit_shift_duration, data_exit_fade_duration)
            + data_exit_delay_duration
          )
          .remove();
      }
    );
}

// Add the grid lines
svg.append("g")
  .classed("grid-lines", true)
  .lower() // Make sure the grid is below the grid-points
  .attr("stroke-width", stroke_width)
  // Add the vertical grid-lines
  .call(g => g.append("g")
    .classed("vertical-lines", true)
    .selectAll("line")
    .data(d3.range(0, n_cols + 1))
    .join("line")
      // `(stroke_width / 2)` centers the line to adjust for the stroke width on
      // the line's left and right sides.
      .attr("x1", d => (stroke_width / 2) + x_axis(d))
      .attr("x2", d => (stroke_width / 2) + x_axis(d))
      .attr("y1", margin_top)
      .attr("y2", height - margin_bottom)
  )
  // Add the horizontal grid-lines
  .call(g => g.append("g")
    .classed("horizontal-lines", true)
    .selectAll("line")
    .data(d3.range(0, n_rows + 1))
    .join("line")
      .attr("y1", d => (stroke_width / 2) + y_axis(d))
      .attr("y2", d => (stroke_width / 2) + y_axis(d))
      .attr("x1", margin_left)
      // Extends the first line to fill a `stroke_width` wide gap in the corner
      .attr("x2", (d, i) => width - margin_right + (i == 0 ? stroke_width : 0))
  );

filter_posts = function(post_data, category) {
    return post_data
      .filter(post => post.categories.includes(category))
      .slice(0, max_posts_to_show);
}

// Populate the post filter <select> button with the `post_category_options`
// and add an on-change function to update the post data.
d3.select("#category-filter")
  .selectAll("option")
  .data(post_category_options)
  .join("option")
  .text(d => d)
  .attr("value", d => d);

previous_selection = [default_post_category_option];

// When the category selector is changed, filter the posts and record the
// selection in `previous_selection`.
d3.select("#category-filter")
  .on("change", function() {
    const category = d3.select(this).property("value");
    const filtered_posts = filter_posts(posts, category);
    const previous_posts = filter_posts(posts, previous_selection.pop());
    previous_selection.push(category);
    
    update(filtered_posts, previous_posts);
  });

update(filter_posts(posts, default_post_category_option), posts, true);