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)