import { Button, Sprite } from '@amcharts/amcharts4/core'
import { configureMapSeries, getCountryFromQuery, setCountryHome, setCountryEvents } from '@modules/map/country-service'

import { configEuButton, euHome } from '@modules/map/eu-service'
export class MapBuilder{
  constructor(map, options){
    this.map              = map
    this.options          = options
    this.map.MapBuilder   = this
    this.map.maxZoomLevel = 256
    this.locale           = options.locale

    configureMapSeries(this)
    configEuButton(this)
    setCountryEvents(this)

    this.homeButton()

    this.events.on('ready', this.ready())
    // this.mapSeries.mapPolygons.template.events.on('hit', (ev) => { console.log('hit', ev) })
    this.map.seriesContainer.events.on('ready', this.initCountryHomeSetting())
    // this.mapSeries.mapPolygons.template.events.on('over', (ev) => {
    //   console.log(ev.target.dataItem.dataContext.name)
    //   ev.target.tooltipHTML= '<strong>xxxxx {name} xxxxxx</strong>'
    // })
    this.mapSeries.toFront()

    if(options.devMode) this.devMode()
    // const self = this

    // const flag = euPolygon.createChild(Image)

    // flag.href = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgODEwIDU0MCI+CjxkZXNjPkV1cm9wZWFuIGZsYWc8L2Rlc2M+CjxkZWZzPgo8ZyBpZD0icyI+CjxnIGlkPSJjIj4KPHBhdGggaWQ9InQiIGQ9Ik0wLDB2MWgwLjV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0xKXJvdGF0ZSgxOCkiLz4KPHVzZSB4bGluazpocmVmPSIjdCIgdHJhbnNmb3JtPSJzY2FsZSgtMSwxKSIvPgo8L2c+CjxnIGlkPSJhIj4KPHVzZSB4bGluazpocmVmPSIjYyIgdHJhbnNmb3JtPSJyb3RhdGUoNzIpIi8+Cjx1c2UgeGxpbms6aHJlZj0iI2MiIHRyYW5zZm9ybT0icm90YXRlKDE0NCkiLz4KPC9nPgo8dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InNjYWxlKC0xLDEpIi8+CjwvZz4KPC9kZWZzPgo8cmVjdCBmaWxsPSIjMDM5IiB3aWR0aD0iODEwIiBoZWlnaHQ9IjU0MCIvPgo8ZyBmaWxsPSIjZmMwIiB0cmFuc2Zvcm09InNjYWxlKDMwKXRyYW5zbGF0ZSgxMy41LDkpIj4KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iLTYiLz4KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iNiIvPgo8ZyBpZD0ibCI+Cjx1c2UgeGxpbms6aHJlZj0iI3MiIHg9Ii02Ii8+Cjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0icm90YXRlKDE1MCl0cmFuc2xhdGUoMCw2KXJvdGF0ZSg2NikiLz4KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwKXRyYW5zbGF0ZSgwLDYpcm90YXRlKDI0KSIvPgo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InJvdGF0ZSg2MCl0cmFuc2xhdGUoMCw2KXJvdGF0ZSgxMikiLz4KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJyb3RhdGUoMzApdHJhbnNsYXRlKDAsNilyb3RhdGUoNDIpIi8+CjwvZz4KPHVzZSB4bGluazpocmVmPSIjbCIgdHJhbnNmb3JtPSJzY2FsZSgtMSwxKSIvPgo8L2c+Cjwvc3ZnPgo=';
    // flag.width = 20;
    // flag.height = 20;
    // flag.nonScaling = true;
    // flag.tooltipText = 'eu flag';
  }

  get labelSeries (){ return this.getSeriesById('labelSeries') }

  get labelSeriesAlt (){ return this.getSeriesById('labelSeriesAlt') }

  get euSeries (){ return this.getSeriesById('euSeries') }

  get events (){ return this.map.events }

  get mapSeries (){ return this.getSeriesById('mapSeries') }
  
  get template (){ return this.getSeriesById('mapSeries').mapPolygons.template }

  addCountryEvent(type, fn){  this.mapSeries.mapPolygons.template.events.on(type, fn) }

  getCountry(id){ return this.mapSeries.getPolygonById(id) }
  
  getSeriesById(id){
    let series

    this.map.series.each((s) => {
      if(s.id !== id) return
      series = s
    })

    return series
  }

  initCountryHomeSetting(){
    const self = this
    
    return () => {
      const code = getCountryFromQuery(self.options)
      
      if(!code) return
      
      if([ 'EU', 'EUR' ].includes(code)) return setTimeout(() => euHome(self), 200)

      setTimeout(() => setCountryHome(code, self), 1000)
    }
  }
  

  ready(){
    const self = this
    
    return () => {
      // self.map.seriesContainer.events.on("hit", (ev) => console.log(self.map.svgPointToGeo(ev.svgPoint)));
      // setCountryEvents(self)
      
      //self.addCountryEvent('hit', (ev) => { console.log('country hit', ev) })
      //self.addCountryEvent('hit',  countryClick(self.options))
      // self.addCountryEvent('over', onHover(mapBuilder))
      // self.addCountryEvent('out',  outCountry(mapBuilder))

      
      const { map, setAnimationDelay, stopStartDelayAnimation } = self
      const { events } = map.seriesContainer

      self.animation = map.animate({ property: 'deltaLongitude', to: 200000 }, 20000000)

      if(getCountryFromQuery(self.options)) return

      events.on('down',             () => { self.animation.pause() })
      events.on('up',               setAnimationDelay.bind(self))
      events.on('swipe',            stopStartDelayAnimation.bind(self))
      events.on('wheel',            stopStartDelayAnimation.bind(self))
      events.on('zoomlevelchanged', stopStartDelayAnimation.bind(self))

      this.mapSeries.toFront()
      this.euSeries.toFront()
      // setTimeout(()=>console.log(self.euSeries.getPolygonById('flag')), 2000)
    }
  }

  devMode(){
    this.map.seriesContainer.events.on('hit', (ev) => console.log(this.map.svgPointToGeo(ev.svgPoint)))
  }

  stopStartDelayAnimation(){
    this.animation.pause()
    this.setAnimationDelay()
  }

  setAnimationDelay(){
    const { animation, delayed } = this

    if(delayed) clearTimeout(delayed)
  
    this.delayed = setTimeout(() => {
      animation.resume()
      clearTimeout(delayed)
      this.delayed = ''
    }, 3000)
  }


  homeButton(){
    const button = this.map.chartContainer.createChild(Button)
  
    button.padding(5, 5, 5, 5)
    button.align = 'right'
    button.marginRight = 15
    button.events.on('hit', (evt) => {
      const map = evt.target._parent._parent
      
      if(!map.homeGeoPoint) return map.goHome(3000)
  
      map.deltaLatitude = -map.homeGeoPoint.latitude
      map.deltaLongitude = -map.homeGeoPoint.longitude
      map.goHome(3000)
    })
    button.icon = new Sprite()
    button.icon.path = 'M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8'
  }
}