// CDN build: `ApexMaps` is a global (see index.html). With a bundler:
//   import ApexMaps from 'apexmaps'

// Premium feature: runs with a watermark until licensed. ApexMaps.setLicense(key) clears it.

// One option turns a states map into a states-into-counties drilldown:
// drilldown: { map: 'us/counties' }. Which counties belong to a state is not
// configured, it is detected from a property the child pack carries (TIGER
// counties carry state_abbr). Click a state, or drillTo it from code; data for
// the level being entered is filled in from the `drilldown` event.

// A stand-in for a per-level fetch: give every key a value.
const fill = (keys) => keys.map((key, i) => ({ key, value: ((i * 37) % 80) + 10 }))

const STATES = [
  'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA',
  'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
  'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT',
  'VA', 'WA', 'WV', 'WI', 'WY', 'DC',
]

const series = (data) => ({
  name: 'Adoption',
  joinBy: { data: 'key' },
  data,
  scale: { palette: 'purples' },
  drilldown: {
    map: 'us/counties',
    breadcrumb: { rootLabel: 'United States' },
  },
})

const map = new ApexMaps(document.getElementById('map'), {
  chart: { height: 520 },
  geo: { map: 'us' },
  series: [series(fill(STATES))],
})

// The child level is already on screen when this fires, so the handler fills in
// its data. A real app would fetch here, keyed on the parent that was entered.
map.on('drilldown', ({ name, featureCount }) => {
  map.updateSeries([series(fill(map.geo.features.map((f) => f.key)))])
  console.log(`${featureCount} counties in ${name}`)
})
// Going back never refetches; restore the top level once fully up.
map.on('drillup', ({ depth }) => {
  if (depth === 0) map.updateSeries([series(fill(STATES))])
})

map.render()

// Drill from code exactly as a click would, and walk back up.
document.getElementById('ca').addEventListener('click', () => map.drillTo('CA'))
document.getElementById('tx').addEventListener('click', () => map.drillTo('TX'))
document.getElementById('up').addEventListener('click', () => map.drillUp())