import defaultPaintProperty from '../constants/default_widgets'
import echartWidgets from '../constants/echart_widgets'
import getSeries from './get_series'
import util from './util'

function getOption(paint, type) {
  let widgets = echartWidgets[type]
  let option = {}
  widgets.forEach(wgt => {
    switch (wgt) {
      case 'legend':
        option.legend = getLegend(paint.legend)
        break
      case 'xAxis':
        option.xAxis = getAxis(paint.xAxis).xAxis
        break
      case 'yAxis':
        option.yAxis = getAxis(undefined, paint.yAxis).yAxis
        break
      case 'angleAxis':
        option.angleAxis = getAngleAxis(paint.angleAxis)
        break
      case 'radiusAxis':
        option.radiusAxis = getRadiusAxis(paint.radiusAxis)
        break
      case 'grid':
        option.grid = getGrid(paint.grid)
        break
      case 'tooltip':
        option.tooltip = getTooltip(type, paint.tooltip)
        break
      case 'radar':
        option.radar = getRadar(paint.radar)
        break
      case 'series':
        option.series = getSeries(paint, type)
        break
    }
  })
  return option
}

function getLegend(property) {
  let newLegend = util.mergeObjs(
    JSON.parse(JSON.stringify(defaultPaintProperty.legend)),
    property || {}
  )
  const legend = {
    show: newLegend.show,
    orient: newLegend.orient,
    left: newLegend.left,
    top: newLegend.top,
    textStyle: {
      color: newLegend.fontColor,
      fontSize: newLegend.fontSize
    },
    itemGap: newLegend.itemGap,
    align: newLegend.align,
    itemWidth: newLegend.itemWidth,
    itemHeight: newLegend.itemHeight,
    tooltip: {
      show: true
    },
    data: []
  }
  if (newLegend.formatLabel) {
    legend.formatter = value => {
      if (value.length > 3) {
        return value.substr(0, 3) + '...'
      }
      return value
    }
  } else {
    legend.formatter = null
  }
  return legend
}

function getAxis(xProperty, yProperty) {
  let newXAxis = util.mergeObjs(
    JSON.parse(JSON.stringify(defaultPaintProperty.xAxis)),
    xProperty || {}
  )
  let newYAxis = util.mergeObjs(
    JSON.parse(JSON.stringify(defaultPaintProperty.yAxis)),
    yProperty || {}
  )
  let getCommonConfig = config => {
    return {
      show: config.show,
      name: config.name,
      position: config.position,
      triggerEvent: true,
      nameTextStyle: {
        color: config.nameColor,
        fontSize: config.nameSize
      },
      axisLine: {
        show: config.showLine,
        lineStyle: {
          color: config.lineColor
        }
      },
      axisTick: {
        show: config.showLine
      },
      axisLabel: {
        show: config.showLabel,
        formatter: config.formatter || null,
        textStyle: {
          color: config.labelColor,
          fontSize: config.labelSize
        }
      },
      splitLine: {
        show: config.showGrid,
        interval: config.gridInterval,
        lineStyle: {
          width: config.gridWidth,
          type: config.gridType,
          color: config.gridColor
        }
      },
      inverse: config.inverse
    }
  }
  const xAxis = getCommonConfig(newXAxis)
  util.mergeObjs(xAxis, {
    type: 'category',
    axisLabel: {
      interval: newXAxis.interval,
      rotate: newXAxis.labelRotate
    }
  })
  if (newXAxis.formatLabel) {
    xAxis.axisLabel.formatter = value => {
      if (value.length > 3) {
        return value.substr(0, 3) + '...'
      }
      return value
    }
  }
  const yAxis = getCommonConfig(newYAxis)
  util.mergeObjs(yAxis, {
    type: 'value',
    min: newYAxis.min,
    max: newYAxis.max,
    interval: newYAxis.interval
  })
  if (newYAxis.formatLabel) {
    yAxis.axisLabel.formatter = value => {
      value = Number(value)
      if (value >= 10000) {
        return value / 10000 + 'w'
      } else if (value >= 1000) {
        return value / 1000 + 'k'
      } else {
        return value
      }
    }
  }
  return { xAxis, yAxis }
}

function getAngleAxis(property) {
  let newAngleAxis = util.mergeObjs(
    JSON.parse(JSON.stringify(defaultPaintProperty.angleAxis)),
    property || {}
  )
  return {
    name: newAngleAxis.name,
    show: newAngleAxis.show,
    min: newAngleAxis.min,
    max: newAngleAxis.max,
    interval: newAngleAxis.interval,
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: newAngleAxis.lineColor
      }
    },
    axisLabel: {
      textStyle: {
        color: newAngleAxis.labelColor,
        fontSize: newAngleAxis.labelSize
      }
    }
  }
}

function getRadiusAxis(property) {
  let newRadiusAxis = util.mergeObjs(
    JSON.parse(JSON.stringify(defaultPaintProperty.radiusAxis)),
    property || {}
  )
  const radiusAxis = {
    type: 'category',
    z: 10,
    show: newRadiusAxis.show,
    name: newRadiusAxis.name,
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: newRadiusAxis.lineColor
      }
    },
    axisLabel: {
      textStyle: {
        color: newRadiusAxis.labelColor,
        fontSize: newRadiusAxis.labelSize
      }
    }
  }
  if (newRadiusAxis.formatLabel) {
    radiusAxis.axisLabel.formatter = value => {
      if (value.length > 3) {
        return value.substr(0, 3) + '...'
      }
      return value
    }
  } else {
    radiusAxis.axisLabel.formatter = null
  }
  return radiusAxis
}

function getGrid(property) {
  return util.mergeObjs(
    JSON.parse(JSON.stringify(defaultPaintProperty.grid)),
    property || {}
  )
}

function getTooltip(type, property) {
  let hasAxis = [
    'bar',
    'bar_h',
    'bar_custom',
    'bubble',
    'line',
    'double_axis',
    'scatter'
  ]
  let config = util.mergeObjs(
    JSON.parse(JSON.stringify(defaultPaintProperty.tooltip)),
    property || {}
  )
  return {
    show: config.show,
    trigger: hasAxis.indexOf(type) !== -1 ? 'axis' : 'item',
    axisPointer: {
      type: 'none'
    },
    confine: true,
    formatter: config.formatter,
    textStyle: {
      color: config.textColor,
      fontSize: config.textSize
    }
  }
}

function getRadar(property) {
  let newRadar = util.mergeObjs(
    util.deepCopy(defaultPaintProperty.radar),
    property || {}
  )
  return {
    name: {
      color: newRadar.labelColor,
      fontSize: newRadar.labelSize
    },
    indicator: [],
    shape: newRadar.shape,
    splitLine: {
      lineStyle: {
        color: newRadar.lineColor,
        width: newRadar.lineWidth
      }
    },
    splitArea: {
      areaStyle: {
        color: newRadar.areaColor
      }
    },
    center: newRadar.center,
    radius: newRadar.radius
  }
}
export default getOption
