text: import { createContext, useContext } from 'react'
  
  import { merge } from 'lodash'
  
  // https://personal.sron.nl/~pault/
  // light: muted qualitative, dark: light qualitative (w/ muted purple)
  const defaultColours = [
    { light: '#CC6677', /* rose */ dark: '#FFAABB' /* pink */ },
    { light: '#332288', /* indigo */ dark: '#77AADD' /* light blue */ },
    { light: '#DDCC77', /* sand */ dark: '#EEDD88' /* light yellow */ },
    { light: '#117733', /* green */ dark: '#BBCC33' /* pear */ },
    { light: '#88CCEE', /* cyan */ dark: '#99DDFF' /* light cyan */ },
    { light: '#882255', /* wine */ dark: '#EE8866' /* orange */ },
    { light: '#44AA99', /* teal */ dark: '#44BB99' /* mint */ },
    { light: '#999933', /* olive */ dark: '#AAAA00' /* olive */ },
    { light: '#AA4499', /* purple */ dark: '#AA4499' },
    { light: '#DDDDDD', /* grey */ dark: '#DDDDDD' /* pale grey */ }
  ]
  
  const defaults = {
    chart: {
      definitions: [],
      settings: {
        csv_download: true,
        tooltip: {
          use_nomenclature: true
        }
      }
    },
    datetime_format: 'd MMMM y, HH:mm',
    map: { settings: {} },
    timeline: {
      date_format: {
        heading: 'd MMMM y',
        mobile_nav: 'd MMMM y',
        chart_tooltip: 'd MMMM y'
      }
    },
    nomenclature: []
  }
  
  export const createConfig = (userConfig) => {
    const config = {}
    merge(config, defaults, userConfig)
  
    // normalise options
    const { map, timeline, colors, parameters, charts, chart_tooltip } = config
    if (typeof timeline.date_format === 'string') {
      timeline.date_format = {
        heading: timeline.date_format,
        mobile_nav: timeline.date_format,
        chart_tooltip: timeline.date_format
      }
    }
    if (typeof timeline.frame_length !== 'number') {
      timeline.frame_length = 100
    }
    if (typeof map.settings.default_color_by !== 'string') {
      map.settings.default_color_by = userConfig.parameters[0].id
    }
    if (typeof colors === 'undefined') {
      config.colors = defaultColours
    }
    for (const parameter of parameters) {
      if (typeof parameter.precision === 'number') {
        parameter.precision = {
          mean: parameter.precision,
          range: parameter.precision
        }
      }
    }
    if (typeof chart_tooltip === 'object') {
      config.chart.settings.tooltip = {
        ...chart_tooltip
      }
    }
    if (Array.isArray(charts)) {
      config.chart.definitions = charts
    }
    return config
  }
  
  export const ConfigContext = createContext(defaults)
  
  export const useConfig = () => useContext(ConfigContext)
  