<script>
import {computed} from 'vue'
import {mapGetters, mapMutations, mapActions} from "vuex";
import {useRoute} from 'vue-router'
import DoubleSwitch from "@/components/1_atoms/DoubleSwitch.vue";
import Chart from "@molecules/VChart/VChart.vue";
import ECharts from '@store/hooks/Echarts';

export default {
  name: 'ChartsComponent',
  components: {
    Chart,
    DoubleSwitch
  },
  provide() {
    return {
      isChecked: computed(() => this.isChartTypes),
    }
  },
  setup() {
    const route = useRoute()
    const path = computed(() => route.path)
    const query = computed(() => route.query)
    const typeCharts = path.value === '/' && query?.value?.mode && query?.value?.type ? query?.value?.type : ''
    const isChartTypesUrl = typeCharts === 'main' ? false : true
    return { 
      isChartTypesUrl
    }
  },
  data() {
    return {
      isChartTypes: this.isChartTypesUrl,
    }
  },
  computed: {
    ...mapGetters('layout_machines', ['selectedSelects', 'selectsData', 'toggleFilter', 'chartsData', 'activeChartData', 'prevGroupByData', 'activeMenuChartData', 'openMenuChart', 'legendFiltersParams']),
  },
  watch: {
    activeChartData: {
      handler(newValue)  {
        if (newValue.id && newValue.type && newValue.data) {
          const chart = new ECharts(newValue.id)
          const isSelectedLegend = this.legendFiltersParams.length > 0 && this.legendFiltersParams[0].id === newValue.id
          console.log('this.legendFiltersParams', this.legendFiltersParams)
          newValue.data.legendFilterData = isSelectedLegend ? this.legendFiltersParams : []
          this.setTypeFunc(newValue.type, chart, newValue.data)
        }
      },
      // deep: true
    },
    activeMenuChartData: {
      handler(newValue)  {
        if (newValue.groupByInfo && newValue.groupByInfo.chartId) {
          const chart = new ECharts(newValue.groupByInfo.chartId)
          chart.setMenuChart(newValue)
          if (newValue.groupByInfo.isDownloadChart) {
            chart.downloadChart(newValue, this.updateCharts)
          }
        }
      },
    },
  },
  mounted () {
    
  },
  methods: {
    ...mapMutations('machines', ['setSelectedSelect', 'setToggleFilter']),
    ...mapActions('machines', ['updateSelects', 'updateCharts']),
    updateSelectedSelects: function(value) {
      if (value.length > 0) {
        this.updateSelects({key: 'set', value: value})
      }
    },
    removedOption: function(value) {
      this.updateSelects({key: 'removed', value: value})
    },
    onToggleCharts: function(value) {
      console.log('onToggleCharts', value)
      const path = this.$route.path
      const query = this.$route.query
      const chartsType = value ? 'types' : 'main'
      this.$router.push({ path: path, query: {...query, type: chartsType} })
      this.isChartTypes = value
    },
    setTypeFunc: function(type, chart, data) {
      switch(type) {
      case 'pie': return chart.makePieCharts({...data, type: type})
      case 'mount': return chart.makeBarMountCharts({...data, type: type, height: this.height})
      case 'mainMl': return chart.makeBarCharts({...data, type: type})
      case 'default': return chart.makeBarTypesCharts({...data, type: type})
      case 'types': return chart.makeBarTypesCharts({...data, type: type})
      case 'without_first_layout': return chart.makeBarTypesCharts({...data, type: type})
      case 'ml': return chart.makeBarTypesCharts({...data, type: type})
      }
    }
  }
}

</script>


<template>
  <div class="px-2 sm:px-5 pt-1 bg-light">
    <div class="relative">
      <div class="doubleSwitch flex justify-end mt-3 mb-2">
        <DoubleSwitch
          name="chartsView"
          firstColor="#8b5cf6"
          secondColor="#2563eb"
          firstTitle="Общий вид"
          secondTitle="По типам"
          @switched="onToggleCharts"
        />
      </div>
      <div
        v-if="!isChartTypes"
        id="main"
        class="relative flex flex-wrap justify-center w-full h-full mb-3"
      >
        <div 
          v-for="(chart, idx) in chartsData.main"
          :key="idx"
        >
          <Chart
            :id="chart.id"
            :idx="idx"
            :type="chart.type"
            :height="chart.height"
            :maxHeight="chart.maxHeight"
            :data="chart.data"
          />
        </div>
      </div>
      <div
        v-if="isChartTypes"
        id="types"
        class="relative flex flex-wrap justify-center w-full h-full mb-3"
      >
        <div 
          v-for="(chart, idx) in chartsData.types"
          :key="idx"
        >
          <Chart
            :id="chart.id"
            :idx="idx"
            :type="chart.type"
            :height="chart.height"
            :maxHeight="chart.maxHeight"
            :data="chart.data"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>