/* By Bo Ericsson, https://www.linkedin.com/in/boeric00/ */

/* eslint-disable no-multi-spaces, operator-linebreak, indent, no-plusplus, no-nested-ternary,
   func-names */
/* global d3 */

/*
  Please note that indentation rules follow D3 praxis, that is, any method that alters the
  selection is indented with two spaces, and all other methods are indented with four spaces.
  There is no easy eslint rule to fix this...
*/

const itemCount = 9;
const data = [];

// Body dimensions
const bodyMargin = 0;
const bodyWidth = 940;  // To fit https://bl.ocks.org width requirement
const bodyHeight = 480; // To fit https://bl.ocks.org height requirement
const bodyPadding = 10;

// Title and subtitle container height
const titleHeight = 20;

// Controls container dimensions
const controlsHeight = 20;
const controlsMarginBottom = 30;

// Content container dimensions
const contentContainerMarginTop = 10;

const contentContainerMaxHeight =
  bodyHeight -                             // Total height of body
  titleHeight -                            // Height of title container
  controlsHeight - controlsMarginBottom -  // Total height of controls container
  titleHeight -                            // Height of subtitle
  contentContainerMarginTop;               // Content container top margin

// Set body dimensions
d3.select('body')
    .style('margin', `${bodyMargin}px`)
    .style('height', `${bodyHeight}px`)
    .style('width', `${bodyWidth}px`)
    .style('padding', `${bodyPadding}px`);

// Item dimensions
const width = 40;
const height = 15;
const margin = 10;
const border = 3;
const padding = 8;
const outline = 1;

// Create data
for (let i = 0; i < itemCount; i++) {
  data.push(`Item ${i}`);
}

// Options for the select control
const justifyContentOptions = [
  { value: 'space-evenly', default: false, idx: 0 },
  { value: 'space-between', default: true, idx: 1 },
  { value: 'space-around', default: false, idx: 2 },
  { value: 'center', default: false, idx: 3 },
  { value: 'flex-end', default: false, idx: 4 },
  { value: 'flex-start', default: false, idx: 5 },
];

// Set initial flexbox direction
let direction = 'row';

// Set default flexbox direction
const defaultJustifyContent = justifyContentOptions.find(d => d.default);
const defaultJustifyIdx = defaultJustifyContent.idx;
let justifyContent = defaultJustifyContent.value;

// Define the input controls
const controls = {
  useMargin: {
    type: 'checkbox',
    pos: 0,
    label: 'Use Margin',
    checked: true,
    title: 'Use Margin',
  },
  useBorder: {
    type: 'checkbox',
    pos: 1,
    label: 'Use Border',
    checked: true,
    title: 'Use Border',
  },
  usePadding: {
    type: 'checkbox',
    pos: 2,
    label: 'Use Padding',
    checked: true,
    title: 'Use Porder',
  },
  useOutline: {
    type: 'checkbox',
    pos: 3,
    label: 'Use Outline',
    checked: true,
    title: 'Use Outline',
  },
  useScroll: {
    type: 'checkbox',
    pos: 4,
    label: 'Overflow scroll',
    checked: true,
    title: 'Scroll or hide overflow',
  },
  useMaxSize: {
    type: 'checkbox',
    pos: 5,
    label: 'Max Container Size',
    checked: true,
    title: 'Use Max Size of Container',
  },
  flexRow: {
    type: 'radio',
    pos: 6,
    label: 'Row',
    checked: direction === 'row',
    title: 'Row Direction',
  },
  flexColumn: {
    type: 'radio',
    pos: 7,
    label: 'Column',
    checked: direction === 'column',
    title: 'Column Direction',
  },
  useFlex: {
    type: 'checkbox',
    pos: 8,
    label: 'Use Flexbox',
    checked: true,
    title: 'Use Flex',
  },
};

// Update the visualization
function updateViz() {
  // Update container
  const flex = controls.useFlex.checked;
  const maxSize = controls.useMaxSize.checked;
  const scroll = controls.useScroll.checked;

  // Compute dimensions
  const marginUsed = controls.useMargin.checked ? margin : null;
  const borderUsed = controls.useBorder.checked ? border : null;
  const paddingUsed = controls.usePadding.checked ? padding : null;
  const outlineUsed = controls.useOutline.checked ? outline : null;

  // Generate dimension strings
  const totalMargin = (marginUsed || 0) * 2;
  const totalBorder = (borderUsed || 0) * 2;
  const totalPadding = (paddingUsed || 0) * 2;

  const totalWidth = width + totalPadding + totalBorder + totalMargin;
  const totalHeight = height + totalPadding + totalBorder + totalMargin;

  const coreStr = `Core: ${width}px/${height}px`;
  const marginStr = `Margin: ${totalMargin}px`;
  const borderStr = `Border: ${totalBorder}px`;
  const paddingStr = `Padding: ${totalPadding}px`;
  const totalStr = `Total: ${totalWidth}px/${totalHeight}px`;
  const dimStr = `${coreStr}, ${paddingStr}, ${borderStr}, ${marginStr}, ${totalStr}`;

  // Update content container
  const contentContainer = d3.select('.contentContainer')
      .style('display', flex ? 'flex' : 'inline-block')
      // .style('display', flex ? 'flex' : 'inline')
      .style('flex-direction', flex ? direction : null)
      .style('justify-content', flex ? justifyContent : null)
      .style('width', maxSize ? '100%' : 'auto')
      .style('height', maxSize ? `${contentContainerMaxHeight}px` : null)
      .style('overflow', scroll ? 'scroll' : 'hidden');

  // Determine selection
  const updateSelection = contentContainer.selectAll('span').data(data);
  const enterSelection = updateSelection.enter();
  const enterSelectionSize = enterSelection.size();
  const selection = enterSelectionSize === 0 ? updateSelection : enterSelection.append('span');

  // Update items
  selection
      .attr('class', 'innerElem')
      .style('margin', marginUsed !== null ? `${marginUsed}px` : null)
      .style('border', borderUsed !== null ? `${borderUsed}px solid #2196f3` : null)
      .style('padding', paddingUsed !== null ? `${paddingUsed}px` : null)
      .style('outline', outlineUsed !== null ? `${outlineUsed}px solid red` : null)
      .style('width', `${width}px`)
      .style('height', `${height}px`)
      .style('display', direction === 'row' ? 'inline-block' : 'block')
      .text((d) => d);

  // Update overlay
  const overlay = d3.select('.overlay');
  overlay.selectAll('*').remove();

  const overlayItem = overlay
    .append('div')
      .style('display', 'flex')
      .style('flex-direction', 'row');

  // Add an outer wrapper to the 'Item' that will be added below
  const itemContainer = overlayItem
    .append('div')
      .style('outline', '1px solid orange')
      .style('display', 'inline-block');

  // Add an item instance inside the item container
  itemContainer.append('span')
      .attr('class', 'innerElem')
      .style('margin', marginUsed !== null ? `${marginUsed}px` : null)
      .style('border', borderUsed !== null ? `${borderUsed}px solid #2196f3` : null)
      .style('padding', paddingUsed !== null ? `${paddingUsed}px` : null)
      .style('outline', outlineUsed !== null ? `${outlineUsed}px solid red` : null)
      .style('width', `${width}px`)
      .style('height', `${height}px`)
      .style('display', direction === 'row' ? 'inline-block' : 'block')
      .text('Item');

  // Add text to the right of the item
  overlayItem.append('div')
      .style('margin-left', '10px')
      .text('Orange rectangle represents total dimension');

  const infoContainer = overlay.append('div')
      .attr('class', 'infoContainer');

  const itemDimensionContainer = infoContainer.append('div')
      .attr('class', 'textBold')
      .style('margin-top', '10px')
      .text('Item Dimensions');

  itemDimensionContainer.append('div')
      .attr('class', 'textNormal')
      .style('margin-left', '10px')
      .text(dimStr);

  const itemStyleContainer = infoContainer.append('div')
      .attr('class', 'textBold')
      .style('margin-top', '10px')
      .text('Item Inline Styles');

  itemStyleContainer.append('div')
      .attr('class', 'textNormal')
      .style('margin-left', '10px')
      .text(selection.nodes()[0].style.cssText);

  const contentStyleContainer = infoContainer.append('div')
      .attr('class', 'textBold')
      .style('margin-top', '10px')
      .text('Container Inline Styles');

  contentStyleContainer.append('div')
      .attr('class', 'textNormal')
      .style('margin-left', '10px')
      .text(contentContainer.nodes()[0].style.cssText);
}

// Set dimensions of the container that contains the input controls (checkboxes, radios and select)
const controlsContainer = d3.select('.controlsContainer')
    .style('height', `${controlsHeight}px`)
    .style('margin-bottom', `${controlsMarginBottom}px`);

// Create span elem wrapper for each input control
const keys = Object.keys(controls).sort((a, b) => (a.pos > b.pos ? 1 : a.pos < b.pos ? -1 : 0));
const spans = controlsContainer.selectAll('span')
    .data(keys)
    .enter()
  .append('span')
    .style('margin-right', '5px');

// Create checkboxes and radios, and add event handler
spans.append('input')
    .attr('type', (d) => controls[d].type)
    .attr('name', (d) => d)
    .attr('title', (d) => controls[d].title)
    .property('checked', (d) => controls[d].checked)
    .on('change', function(d) {
      const checked = d3.select(this).property('checked');

      // Manage radios without form
      const radios = d3.selectAll('input[type="radio"]');

      switch (d) {
        case 'useFlex':
          controls[d].checked = checked;
          // Disable select if flexbox is not used
          d3.select('.justifySelect').property('disabled', !checked);
          break;
        case 'flexRow':
          direction = 'row';
          controls.flexRow.checked = true;
          controls.flexColumn.checked = false;
          // Update the radios
          radios.nodes()[0].checked = true;
          radios.nodes()[1].checked = false;
          break;
        case 'flexColumn':
          direction = 'column';
          controls.flexRow.checked = false;
          controls.flexColumn.checked = true;
          // Update the radios
          radios.nodes()[0].checked = false;
          radios.nodes()[1].checked = true;
          break;
        default:
          controls[d].checked = checked;
      }

      // Update content
      updateViz(data);
    });

// Create labels for the checkboxes and radios
spans.append('label')
    .attr('for', (d) => d)
    .attr('title', (d) => controls[d].title)
    .text((d) => controls[d].label);

// Create select control
const selectControl = controlsContainer.append('select')
    .attr('class', 'justifySelect')
    .on('change', function () {
      const option = d3.select(this).node().value;
      justifyContent = option;
      updateViz();
    });

// Add options to select
selectControl.selectAll('option')
    .data(justifyContentOptions)
    .enter()
  .append('option')
    .text((d) => d.value);

// Set default (pre-preselected value) of select
selectControl.property('selectedIndex', defaultJustifyIdx);

// Add height to title container
d3.select('.titleContainer')
    .style('height', `${titleHeight}px`);

// Add height to subtitle container
d3.select('.subTitleContainer')
    .style('height', `${titleHeight}px`);

// Set top margin and background color of content container
d3.select('.contentContainer')
    .style('margin-top', `${contentContainerMarginTop}px`);

// Initial update
updateViz();