<template>
  <div ref="container" class="chart-container">
    <div class="canvas-container">
      <div class="currency">
        <img ref="iconCurrency" :src="'/img/currency-'+currency+'.png'">
      </div>
      <div class="canvas-charts">
        <canvas class="canvas-hover" ref="canvasHover"></canvas>
        <canvas class="canvas-liquid" ref="canvasSell"/>
        <canvas class="canvas-liquid" ref="canvasBuy"/>
      </div>
      <div class="nav-zoom">
        <button @click="zoom(false)" :class="{'disabled-zoom':disabledZoomM}" :disabled="disabledZoomM"><c-icon name="zoom+"></c-icon></button>
        <button @click="zoom(true)" :class="{'disabled-zoom':disabledZoomP}" :disabled="disabledZoomP"><c-icon name="zoom-"></c-icon></button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  @import "~assets/styles/base.scss";

  .bucketList {
    position: absolute;
    color: $color-base3;
    background-color: $color-base0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    ul {
      list-style: none;
    }
  }

  .chart-container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-right: 5px;
    .currency{
      color: white;
      fill: white;
      display: none;
    }
    .nav-zoom{
      position: absolute;
      top: 41%;
      left: 70px;
      width: 20px;
      height: 70px;
      button{
        width: 20px;
        height: 20px;
        padding: 0;
        background: none;
        border: none;
        color: $color-base3-dark;
        &.disabled-zoom{
          color: $color-base1;
        }
      }
      :first-child{
        margin-bottom: 10px;
      }
      :last-child{
        margin-top: 10px;
      }
    }
  }

  .canvas-container {
    position: relative;
    min-height: 500px;
  }

  .chart-text {
    width: 50%;
    padding: 0;
    margin: 0;
    margin-left: 50%;
    padding-left: 5px;
    position: absolute;
    color: $color-base0;
    li {
      list-style: none;
      line-height: 19px;
      font-size: 15px;
      .item {

      }
      .item--red {
        color: $color-negative0;
      }
    }
  }
  .canvas-charts{
    position: relative;
    height: 500px;
  }
  canvas.canvas-hover{
    position: absolute;
    width: 100%;
    min-height: 500px;
    height: 100%;
  }
  canvas.canvas-liquid {
    display: block;
    width: 100%;
    max-height: 250px;
    height: 100%;
  }
</style>

<script>
  import {mapState} from 'vuex'
  import cloneL from 'lodash/clone'
  import cloneLD from 'lodash/cloneDeep'
  export default {
    props:{
      currency: {
        type: String,
        default: 'usd'
      },
      rawData: {
        type: Array,
        default: []
      },
    },
    data: () => ({
      sizePoint: 2,
      groupingUnit: 0,
      disabledZoomP: true,
      disabledZoomM: true,
      cxSell: undefined,
      cxBuy: undefined,

      pointsBuy: undefined,
      pointsSell: undefined,

      maxVolume: null,
      minVolume: null,
    }),
    mounted () {
      this.handleDepth(this.rawData);

      this.getWindowWidth();
      this.$nextTick(function () {
        window.addEventListener('resize', this.getWindowWidth);
      });
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.getWindowWidth);
    },
    computed: {
      ...mapState({
        positive: state => state.views.positive,
        negative: state => state.views.negative,
        positiveOp: state => state.views.positiveOp4,
        negativeOp: state => state.views.negativeOp4,
        base3: state => state.views.base3,
        base3Dark: state => state.views.base3Dark,
      }),
    },
    watch:{
      navBar: function(val) {
        this.getWindowWidth();
      },
    },
    methods: {
      redraw() {
        if (this.cxSell === undefined) {this.cxSell = this.$refs.canvasSell.getContext('2d');}
        if (this.cxBuy === undefined) {this.cxBuy = this.$refs.canvasBuy.getContext('2d');}
        let cxSell = this.cxSell;
        let cxBuy = this.cxBuy;
        cxSell.clearRect(-0.5, -0.5, this.canvasWidth, this.canvasHeight);
        cxBuy.clearRect(-0.5, -0.5, this.canvasWidth, this.canvasHeight);

      },
      getWindowWidth() {
        this.updateSize();
        this.redraw();
      },
      updateSize () {
        let cSell = this.$refs.canvasSell;
        let cBuy = this.$refs.canvasBuy;
        let c2 = this.$refs.canvasHover;
        cSell.width = cSell.offsetWidth;
        cSell.height = cSell.offsetHeight;
        cBuy.width = cSell.offsetWidth;
        cBuy.height = cSell.offsetHeight;
        c2.width = cSell.offsetWidth;
        c2.height = cSell.offsetHeight*2;
        this.canvasWidth = cSell.width;
        this.canvasHeight = cSell.height;
      },
      drawLiquidChart(cx, points, revers = false){


      },
      handleDepth(data){
        let newData = cloneL(data);
        newData.sort(this.sortList);
        let buy = this.clean(newData, 'buy');
        let sell = this.clean(newData, 'sell');
        if (this.groupingUnit > 0) {
          buy = this.group(buy);
          sell = this.group(sell);
        }
        this.pointsBuy = this.accumulate(buy);
        this.pointsSell = this.accumulate(sell, true);
        this.maxVolume = Math.max(this.pointsSell[0][1], this.last(this.pointsBuy)[1]);
        this.minVolume = Math.min(this.last(this.pointsSell)[1], this.pointsBuy[0][1]);
      },
      clean(data, type){
        let newData = [];
        for(let i = 0; i < data.length; i++){
          if(data[i].action === type){
            newData.push([data[i].price, data[i].amount]);
          }
        }
        return newData
      },
      group(from) {
        let j = 0, newData = [];
        for (let i = this.floor(from[0][0], this.groupingUnit); i >= this.floor(this.last(from)[0], this.groupingUnit); i -= this.groupingUnit) {
          let volume = 0;
          while (j < from.length && this.floor(from[j][0], this.groupingUnit) === parseFloat(i.toFixed(2))) {
            volume += from[j][1];
            j++;
          }
          if(volume !== 0){
            newData.push([parseFloat(i.toFixed(2)), volume]);
          }
        }
        return newData;
      },
      floor(number, unit) {
        return parseFloat((Math.floor(number / unit) * unit).toFixed(2))
      },
      last(array) {
        return array[array.length - 1]
      },
      accumulate(arrayL, reverse) {
        let array = cloneLD(arrayL);
        reverse = typeof reverse !== 'undefined' ? reverse : false;

        let start = reverse ? array.length - 2 : 1,
          end = reverse ? -1 : array.length,
          step = reverse ? -1 : 1;

        for (let i = start; reverse ? i > end : i < end; i += step) {
          array[i][1] += array[i - step][1]
        }
        return array;
      },
      sortList(a, b) {
        if (a.price < b.price) {
          return 1
        }
        if (a.price > b.price) {
          return -1
        }
        return 0;
      },
    },
  }
</script>