const { getBarPercent } = require('../../utils/util')

/**
 * Trend bar chart - pure CSS (no canvas), matches the calendar-heatmap's
 * rendering approach for consistency.
 *
 * chartData: [{ label, value, valueText, highlight }]
 *   - label:      bottom caption (e.g. "一" / "7月")
 *   - value:      numeric magnitude (seconds); drives bar height
 *   - valueText:  formatted string shown above the bar (e.g. "1分30秒")
 *   - highlight:  truthy -> theme glow + bold label (today / this month)
 *
 * Bar height is strictly proportional to value/max. Zero values render a
 * faint stub so empty dates remain visible without distorting the data.
 */
Component({
  properties: {
    chartData: { type: Array, value: [] }
  },
  data: {
    bars: []
  },
  observers: {
    'chartData'(chartData) {
      this._compute(chartData)
    }
  },
  lifetimes: {
    ready() {
      this._compute(this.properties.chartData)
    }
  },
  methods: {
    _compute(chartData) {
      const arr = Array.isArray(chartData) ? chartData : []
      const max = arr.reduce((m, d) => Math.max(m, Number(d && d.value) || 0), 0)
      const bars = arr.map((d) => {
        const v = Number(d && d.value) || 0
        return {
          label: (d && d.label) || '',
          value: v,
          valueText: (d && d.valueText) || '',
          highlight: !!(d && d.highlight),
          percent: getBarPercent(v, max)
        }
      })
      this.setData({ bars })
    }
  }
})