<template>
  <div v-if="values" :style="cssProps" class="trendChart">
    <div class="data">
      <div class="data-info">
        <header>
          <strong class="title">{{ name }}</strong>
        </header>
        <div class="period">
          <span class="period-text">{{ info.month }}</span>
        </div>
        <strong class="value">{{ info.value }}</strong>
      </div>
      <div class="chart">
        <ClientOnly>
          <TrendChart
            :datasets="[dataset]"
            padding="5 0 0 5"
            :min="0"
            :interactive="true"
            @mouse-move="onMouseMove"
          />
        </ClientOnly>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: '',
    },
    values: {
      type: Array,
      default: () => [],
    },
    color: {
      type: String,
      default: 'inherit',
      required: false,
    },
  },

  data() {
    return {
      currentInfo: null,
      months: [
        'Enero',
        'Febrero',
        'Marzo',
        'Abril',
        'Mayo',
        'Junio',
        'Julio',
        'Agosto',
        'Septiembre',
        'Octubre',
        'Noviembre',
        'Diciembre',
      ],
    }
  },
  computed: {
    dataset() {
      return {
        data: this.values,
        showPoints: true,
        fill: true,
        smooth: true,
      }
    },
    cssProps() {
      return {
        '--color': this.color,
      }
    },
    info() {
      return {
        month: this.currentInfo ? this.currentInfo.month : 'Este mes',
        value: this.currentInfo
          ? this.currentInfo.value
          : this.values[11].value,
      }
    },
  },
  methods: {
    onMouseMove(params) {
      if (params) {
        this.currentInfo = {
          month: this.months[params.data[0].month - 1],
          value: params.data[0].value,
        }
      } else {
        this.currentInfo = null
      }
    },
  },
}
</script>

<style lang="scss">
.trendChart {
  border-bottom: 2px solid rgba(var(--color), 0.2);
  .title {
    color: var(--color);
  }
  .data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .value {
      font-size: 30px;
    }
    .chart {
      width: 40%;
    }
  }
  .stroke {
    stroke-width: 2;
    stroke: var(--color);
  }
  .fill {
    opacity: 0.2;
    fill: var(--color);
  }
  .active-line {
    stroke: rgba(0, 0, 0, 0.2);
  }
  .point {
    display: none;
    fill: var(--color);
    stroke: var(--color);
  }
  .point.is-active {
    display: block;
  }
}
</style>
