// sample legend
import React from 'react';
// use react-html-parser
import ReactHtmlParser from 'react-html-parser';
// define prototype truncate function
import './custom.d.ts';

// type def for legend: some are set to optional for now
//perhaps this goes to Types.ts to avoid duplicate and legendProps can be an extension
interface legendListProps {
  // className: string
  // legendType : string,    //'categorical' | 'numeric' | 'date',
  data: {
    label: string; // categorical e.g. "Anopheles gambiae"
    // numeric e.g. "10-20"
    value: number;
    color: string;
  }[];
  variableLabel?: string; // e.g. Species or Age
  quantityLabel?: string; // ** comment below

  onShowFilter?: () => {}; // callback to open up filter panel
  onShowVariableChooser?: () => {}; // callback to open up variable selector
  // divElement : string[]
}

// truncate any string longer than *max* and append *add* at the end (three ellipses by default)
// to avoid type error on this custom function, truncate, it needs to be defined at custom.d.ts
String.prototype.truncate = function (max: number, add: string) {
  add = add || '...';
  return this.length > max ? this.substring(0, max) + add : this;
};

// add commas
function numberWithCommas(x: number) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

export default function LegendList(props: legendListProps) {
  let labels = [];
  // maximum number of list = 10
  let maxList: number = 10;

  // check if number of data is larger than maxList
  if (props.data.length <= maxList) {
    maxList = props.data.length;
  }

  // i = 0 - 9 at best
  for (let i = 0; i < maxList; i++) {
    labels.push(
      '<div class="active-legend-area"><div class="active-legend" title="' +
        props.data[i].label +
        '">' + // add tooltip
        '<i style="background:' +
        props.data[i].color +
        '"></i> ' +
        '<em>' +
        props.data[i].label.truncate(22) +
        '</em>' + // 23 characters in max
        '</div></div>' +
        '<div class="legend-count">' +
        numberWithCommas(props.data[i].value) +
        '</div>'
    );
  }

  // calculate total number of Others and add Others in the end of the list
  if (props.data.length > maxList) {
    // compute total number of others
    let othersSum = 0;
    for (let i = 10; i < props.data.length; i++) {
      othersSum = othersSum + props.data[i].value;
    }
    // add Others in the list
    labels.push(
      '<div class="active-legend-area"><div class="active-legend" title="' +
        'Others' +
        '">' +
        '<i style="background:' +
        'silver' +
        '"></i> ' +
        '<em>' +
        'Others' +
        '</em>' +
        '</div></div>' +
        '<div class="legend-count">' +
        numberWithCommas(othersSum) +
        '</div>'
    );
  } // add Others list

  // let's join labels array
  let SingleLabels = labels.join('<br>');

  // use react-html-parser for converting html string to element
  //Do we need to use DOMPurify before using react-html-parser?
  return (
    <React.Fragment>{ReactHtmlParser(SingleLabels)}</React.Fragment>
    // SingleLabels
  );
}