How to use the tinycolor2.mostReadable function in tinycolor2

// Hover label text
    var hoverinfoParts = [];
    if(catViewModel.parcatsViewModel.hoverinfoItems.indexOf('count') !== -1) {
        hoverinfoParts.push(['Count:', labels.countLabel].join(' '));
    }
    if(catViewModel.parcatsViewModel.hoverinfoItems.indexOf('probability') !== -1) {
        hoverinfoParts.push('P(color ∩ ' + catLabel + '): ' + labels.probabilityLabel);
        hoverinfoParts.push('P(' + catLabel + ' | color): ' + pCatGivenColor.toFixed(3));
        hoverinfoParts.push('P(color | ' + catLabel + '): ' + pColorGivenCat.toFixed(3));
    }

    var hovertext = hoverinfoParts.join('<br>');

    // Compute text color
    var textColor = tinycolor.mostReadable(bandViewModel.color, ['black', 'white']);

    return {
        trace: trace,
        x: hoverCenterX - rootBBox.left,
        y: hoverCenterY - rootBBox.top,
        // name: 'NAME',
        text: hovertext,
        color: bandViewModel.color,
        borderColor: 'black',
        fontFamily: 'Monaco, "Courier New", monospace',
        fontColor: textColor,
        fontSize: 10,
        idealAlign: hoverLabelIdealAlign,
        hovertemplate: trace.hovertemplate,
        hovertemplateLabels: labels,
        eventData: [{

// Text color will always be the same for secondary buttons
  if (color === colors.white) {
    return colors.grey.darker;
  }

  switch (feel) {
    case "raised":
      // Set the base (meaning no pseudo-selectors) text color for raised
      // buttons. Otherwise return `undefined` to not change the color.
      //
      // We have some special logic for the raised color; set the text color to
      // be what is most readable between white and the default text color and
      // the _hover_ color's background. This is overrideable by the user, but
      // it shouldn't need to be.
      return !mode
        ? tinycolor
            .mostReadable(
              getHoverBackgroundColor({ color, feel, theme }),
              [colors.white, colors.grey.darker],
              {
                level: "AA",
                size: "small",
              }
            )
            .toString()
        : undefined;
    case "flat":
      if (color === defaultColor) {
        return theme === "dark" ? colors.grey.light : colors.grey.darker;
      }

      // We have a custom color and we're in dark mode, lighten the base and

// @flow

import * as React from 'react'
import {sto} from '../../../lib/colors'
import {TabBarIcon} from '@frogpond/navigation-tabs'
import {type TopLevelViewPropsType} from '../../types'
import * as logos from '../../../../images/streaming'
import {RadioControllerView} from './index'
import tinycolor from 'tinycolor2'
import {ThemeProvider} from '@frogpond/app-theme'
import {type PlayerTheme} from './types'

let tintColor = '#37a287'
const colors: PlayerTheme = {
	tintColor,
	buttonTextColor: tinycolor
		.mostReadable(tintColor, [sto.white, sto.black])
		.toRgbString(),
	textColor: tintColor,
	imageBorderColor: 'transparent',
	imageBackgroundColor: tinycolor(tintColor)
		.complement()
		.setAlpha(0.2)
		.toRgbString(),
}

export class KstoStationView extends React.Component {
	static navigationOptions = {
		tabBarLabel: 'KSTO',
		tabBarIcon: TabBarIcon('radio'),
	}

export default function scatterThings() {
  var colors = ['#7FDBFF', '#0074D9', '#001F3F', '#39CCCC', '#3D9970',
    '#FF4136', '#85144B', '#FF851B', '#B10DC9', '#FFDC00', '#F012BE',
    '#aaa', '#fff', '#ddd']

  var takeOne = arr => pullAt(arr, random(arr.length - 1))

  var rootNode = document.querySelector('#stuffs')
  document.body.style.backgroundColor = takeOne(colors)
  document.querySelector('#source > a').style.color = tinycolor.mostReadable(
    document.body.style.backgroundColor,
    colors
  ).toHexString()
  // for (let j = 0; j < 7; ++j) {
  //   createElement(63, 63, 'div', rootNode)
  // }

  createElement(
    242 + 132 * Math.random(),
    242 + 132 * Math.random(),
    'iframe',
    rootNode,
    function (e) {
      var iframe = e.target
      iframe.style.border = 'none'
      iframe.contentDocument.write('this is an iframe (WIP)')

const getBestTextColor = (
  background: string,
  colorOptions: {
    [color: string]: string
  }
) => {
  return Color.mostReadable(background, Object.values(colorOptions)).toHexString()
}

export function getMostReadableColor( colors, colorValue ) {
	return tinycolor.mostReadable(
		colorValue,
		map( colors, 'color' )
	).toHexString();
}

static mostReadable(baseColor: any, colorList: any[]): string {
    colorList.map((color) => {
      return TinyColor(color);
    });
    return TinyColor.mostReadable(TinyColor(baseColor), colorList).toRgbString();
  }
}

export function normalizeIconObject( icon ) {
	if ( isValidIcon( icon ) ) {
		return { src: icon };
	}

	if ( has( icon, [ 'background' ] ) ) {
		const tinyBgColor = tinycolor( icon.background );

		return {
			...icon,
			foreground: icon.foreground ? icon.foreground : mostReadable(
				tinyBgColor,
				ICON_COLORS,
				{ includeFallbackColors: true, level: 'AA', size: 'large' }
			).toHexString(),
			shadowColor: tinyBgColor.setAlpha( 0.3 ).toRgbString(),
		};
	}

	return icon;
}

export function firstReadable(
	background: string,
	possibilities: Array,
) {
	possibilities = possibilities.map(c => tinycolor(c))
	let readable = possibilities.find(c => tinycolor.isReadable(c, background))
	if (readable) {
		return readable
	}
	return tinycolor.mostReadable(background, [black, white])
}