import { Chart } from './core'
import { isIE } from './util'

Chart.prototype.show = function(targetIds, options) {
  var $$ = this.internal,
    targets

  targetIds = $$.mapToTargetIds(targetIds)
  options = options || {}

  $$.removeHiddenTargetIds(targetIds)
  targets = $$.svg.selectAll($$.selectorTargets(targetIds))

  targets
    .transition()
    .style('display', isIE() ? 'block' : 'initial', 'important')
    .style('opacity', 1, 'important')
    .call($$.endall, function() {
      targets.style('opacity', null).style('opacity', 1)
    })

  if (options.withLegend) {
    $$.showLegend(targetIds)
  }

  $$.redraw({
    withUpdateOrgXDomain: true,
    withUpdateXDomain: true,
    withLegend: true
  })
}

Chart.prototype.hide = function(targetIds, options) {
  var $$ = this.internal,
    targets

  targetIds = $$.mapToTargetIds(targetIds)
  options = options || {}

  $$.addHiddenTargetIds(targetIds)
  targets = $$.svg.selectAll($$.selectorTargets(targetIds))

  targets
    .transition()
    .style('opacity', 0, 'important')
    .call($$.endall, function() {
      targets.style('opacity', null).style('opacity', 0)
      targets.style('display', 'none')
    })

  if (options.withLegend) {
    $$.hideLegend(targetIds)
  }

  $$.redraw({
    withUpdateOrgXDomain: true,
    withUpdateXDomain: true,
    withLegend: true
  })
}

Chart.prototype.toggle = function(targetIds, options) {
  var that = this,
    $$ = this.internal
  $$.mapToTargetIds(targetIds).forEach(function(targetId) {
    $$.isTargetToShow(targetId)
      ? that.hide(targetId, options)
      : that.show(targetId, options)
  })
}