<template>
    <div v-if="drawChart" style="max-width: 1000px;">
        <Row>
            <Col span="12">
                <LineChart :width="600" :height="600" :labels="dates" :datasets="datasets.kcal" style="margin-bottom: 10px"/>
            </Col>
            <Col span="12">
                <LineChart :width="600" :height="600" :labels="dates" :datasets="datasets.nutrition" style="margin-bottom: 10px"/>
            </Col>
        </Row>
        <Button v-if="chartValue==='day'" type="primary" @click="changeView('month')">
            Miesięcznie
        </Button>
        <Button v-else type="primary" @click="changeView('day')">
            Dziennie
        </Button>
    </div>
</template>

<script>
    import LineChart from "../components/History/LineChart";

    export default {
        name: 'history',
        components: {LineChart},
        data() {
            return {
                drawChart: false,
                dates: [],
                kcal: [],
                carbohydrates: [],
                protein: [],
                fat: [],
                chartValue: 'day',
                datasets: null
            }
        },
        mounted() {
            this.getChartData(this.chartValue);
        },
        methods: {
            setDatasets() {
                this.datasets = {
                    'nutrition': [
                        {
                            label: 'Węglowodany',
                            data: this.carbohydrates,
                            borderColor: '#f8bc7d',
                            fill: false
                        },
                        {
                            label: 'Białka',
                            data: this.protein,
                            borderColor: '#59b159',
                            fill: false
                        },
                        {
                            label: 'Tłuszcze',
                            data: this.fat,
                            borderColor: '#7da9f8',
                            fill: false
                        }
                    ],
                    'kcal': [{
                        label: 'Kalorie',
                        data: this.kcal,
                        borderColor: '#f87979',
                        fill: false
                    }]
                };
                this.drawChart = true;
            },
            getChartData(value) {
                this.dates = [];
                this.kcal = [];
                this.carbohydrates = [];
                this.protein = [];
                this.fat = [];
                this.$axios.get('/user/history', {
                    params: {
                        groupBy: value
                    }
                })
                    .then((res) => {
                        const data = res.data.data.history;
                        for (let info of data) {
                            this.dates.push(info.date);
                            this.kcal.push(info.kcal);
                            this.carbohydrates.push(info.carbohydrates);
                            this.protein.push(info.protein);
                            this.fat.push(info.fat)
                        }
                        this.setDatasets();
                    })
            },
            changeView(value) {
                this.chartValue = value;
                this.drawChart = false;
                this.getChartData(this.chartValue);
            }
        }
    }
</script>

<style scoped>

</style>