<style>
    .heater-row .vertical_align_center {
        margin: auto 0;
    }

    .colHeaterIcons {
        width: 68px;
    }

    .canvasjs-chart-tooltip>div {
        border-radius: 10px !important;
    }

</style>

<template>
    <div>
        <v-card>
            <v-toolbar flat dense>
                <v-toolbar-title>
                    <span class="subheading"><v-icon left>mdi-thermometer-lines</v-icon>{{ $t("Dashboard.Temperatures") }}</span>
                </v-toolbar-title>
                <v-spacer></v-spacer>
                <v-item-group class="v-btn-toggle" name="controllers">
                    <v-menu :offset-y="true" title="Preheat" v-if="this['gui/getPreheatPresets'].length">
                        <template v-slot:activator="{ on, attrs }">
                            <v-btn small class="px-2 minwidth-0" color="primary" v-bind="attrs" v-on="on" :disabled="['printing', 'paused'].includes(printer_state)">{{ $t("Dashboard.Presets") }} <v-icon small>mdi-menu-down</v-icon></v-btn>
                        </template>
                        <v-list dense class="py-0">
                            <v-list-item v-for="preset of this['gui/getPreheatPresets']" v-bind:key="preset.index" link @click="preheat(preset)">
                                <v-list-item-icon class="mr-0">
                                    <v-icon small>mdi-fire</v-icon>
                                </v-list-item-icon>
                                <v-list-item-content>
                                    <v-list-item-title v-text="preset.name"></v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list>
                        <v-divider></v-divider>
                        <v-list dense class="py-0">
                            <v-list-item link @click="cooldown()">
                                <v-list-item-icon class="mr-0">
                                    <v-icon small>mdi-snowflake</v-icon>
                                </v-list-item-icon>
                                <v-list-item-content>
                                    <v-list-item-title>{{ $t("Dashboard.Cooldown") }}</v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list>
                    </v-menu>
                    <v-btn small class="px-2 minwidth-0" color="primary" @click="cooldown()" v-if="this['gui/getPreheatPresets'].length === 0"><v-icon small class="mr-1">mdi-snowflake</v-icon>{{ $t("Dashboard.Cooldown") }}</v-btn>
                    <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Dashboard.SetupTemperatures')">
                        <template v-slot:activator="{ on, attrs }">
                            <v-btn small class="px-2 minwidth-0" color="grey darken-3" v-bind="attrs" v-on="on"><v-icon small>mdi-cog</v-icon></v-btn>
                        </template>
                        <v-list>
                            <v-list-item class="minHeight36">
                                <v-checkbox class="mt-0" v-model="boolTempchart" hide-details :label="$t('Dashboard.ShowChart')"></v-checkbox>
                            </v-list-item>
                            <v-list-item class="minHeight36">
                                <v-checkbox class="mt-0" v-model="autoscaleTempchart" hide-details :label="$t('Dashboard.AutoscaleChart')"></v-checkbox>
                            </v-list-item>
                        </v-list>
                    </v-menu>
                </v-item-group>
            </v-toolbar>
            <v-card-text class="px-0 py-2 content">
                <v-container class="px-0">
                    <v-row align="center">
                        <v-col class="py-2 font-weight-bold" style="padding-left: 68px;">{{ $t("Dashboard.Name") }}</v-col>
                        <v-col class="py-2 text-center font-weight-bold d-none d-sm-block">{{ $t("Dashboard.State") }}</v-col>
                        <v-col class="py-2 text-center font-weight-bold">{{ $t("Dashboard.Current") }}</v-col>
                        <v-col class="py-2 pr-8 text-center font-weight-bold">{{ $t("Dashboard.Target") }}</v-col>
                    </v-row>
                    <div v-for="(heater, index) in heaters" v-bind:key="index" >
                        <v-divider class="my-2"></v-divider>
                        <v-row align="center">
                            <v-col class="pl-8 pr-0 flex-grow-0 py-2 colHeaterIcons">
                                <v-icon :color="heater.color">mdi-{{ heater.icon }}</v-icon>
                            </v-col>
                            <v-col class="py-2 font-weight-bold"><span style="cursor: pointer;" @click="openHeater(heater)">{{ convertName(heater.name) }}</span></v-col>
                            <v-col class="py-2 text-center d-none d-sm-block"><small>{{ heater.target > 0 ? (heater.power !== null ? (heater.power > 0 ? (heater.power * 100).toFixed(0)+'%' : "0%") : "active") : "off" }}</small></v-col>
                            <v-col class="py-2 text-center">
                                <span class="d-block">{{ heater.temperature ? heater.temperature.toFixed(1) : 0 }}°C</span>
                                <span v-for="(values, key) of heater.additionValues" v-bind:key="key" class="d-block">{{ values.value.toFixed(1) }} {{ values.unit }}</span>
                            </v-col>
                            <v-col class="text-center py-2 pr-8 vertical_align_center">
                                <toolInput :name="heater.name" :target="heater.target" :min_temp="heater.min_temp" :max_temp="heater.max_temp" :items="heater.presets" command="SET_HEATER_TEMPERATURE" attribute-name="HEATER" ></toolInput>
                            </v-col>
                        </v-row>
                    </div>
                    <div v-for="(fan, index) in temperatureFans" v-bind:key="index+99" >
                        <v-divider class="my-2"></v-divider>
                        <v-row align="center">
                            <v-col class="flex-grow-0 py-2 pl-8 pr-0  colHeaterIcons">
                                <v-icon :color="(fan.target ? 'grey lighten-5' : 'grey darken-2')" :class="(fan.speed ? ' icon-rotate' : '')">mdi-fan</v-icon>
                            </v-col>
                            <v-col class="py-2 font-weight-bold"><span style="cursor: pointer;" @click="openHeater(fan)">{{ convertName(fan.name) }}</span></v-col>
                            <v-col class="py-2 text-center d-none d-sm-block"><small>{{ fan.target > 0 && fan.speed > 0 ? (fan.speed * 100).toFixed(0)+"%" : (fan.target > 0 ? "standby" : "off") }}</small></v-col>
                            <v-col class="py-2 text-center">
                                <span class="d-block">{{ fan.temperature ? fan.temperature.toFixed(1) : 0}}°C</span>
                                <span v-for="(values, key) of fan.additionValues" v-bind:key="key" class="d-block">{{ values.value.toFixed(1) }} {{ values.unit }}</span>
                            </v-col>
                            <v-col class="text-center py-2 pr-8 pr-0  vertical_align_center">
                                <toolInput :name="fan.name" :target="fan.target" command="SET_TEMPERATURE_FAN_TARGET" attribute-name="temperature_fan" :items="fan.presets" ></toolInput>
                            </v-col>
                        </v-row>
                    </div>
                    <div v-for="(sensor,index) in temperatureSensors" v-bind:key="index+999">
                        <v-divider class="my-2"></v-divider>
                        <v-row align="center">
                            <v-col class="flex-grow-0 py-2 pl-8 pr-0 colHeaterIcons">
                                <v-icon color="grey darken-2" :title="$t('Dashboard.Min')+sensor.min_temp+'° / ' + $t('Dashboard.Max')+sensor.max_temp+'°'">{{ sensor.icon }}</v-icon>
                            </v-col>
                            <v-col class="py-2 font-weight-bold">
                              <span style="cursor: pointer;" @click="openHeater(sensor)">{{ convertName(sensor.name) }}</span>
                            </v-col>
                            <v-col class="py-2 d-none d-sm-block"><span>&nbsp;</span></v-col>
                            <v-col class="py-2 text-center">
                              <v-tooltip top>
                                <template v-slot:activator="{ on, attrs }">
                                  <span
                                      style="cursor: default;"
                                      class="d-block px-0"
                                      v-bind="attrs"
                                      v-on="on"
                                  >{{ sensor.temperature ? sensor.temperature.toFixed(1) : 0 }}°C</span>
                                </template>
                                <span>{{ $t('Dashboard.Min') }}{{ sensor.measured_min_temp ? sensor.measured_min_temp.toFixed(1) : 0}}°<br />{{ $t('Dashboard.Max')}}{{ sensor.measured_max_temp ? sensor.measured_max_temp.toFixed(1) : 0 }}°</span>
                              </v-tooltip>
                              <span v-for="(values, key) of sensor.tempListAdditionValues" v-bind:key="key" class="d-block">{{ values.value.toFixed(1) }} {{ values.unit }}</span>
                            </v-col>
                            <v-col class="text-center py-2 pr-8 vertical_align_center"><span>&nbsp;</span></v-col>
                        </v-row>
                    </div>
                    <v-divider class="my-2" v-if="boolTempchart"></v-divider>
                    <v-row v-if="boolTempchart">
                        <v-col class="px-8 pt-6">
                            <temp-chart ></temp-chart>
                        </v-col>
                    </v-row>
                </v-container>
            </v-card-text>
        </v-card>
        <v-dialog v-model="editHeater.bool" persistent :width="400">
            <v-card dark>
                <v-toolbar flat dense color="primary">
                    <v-toolbar-title>
                    <span class="subheading">
                        <v-icon left>mdi-{{ 'icon' in editHeater.object ? editHeater.object.icon : "info" }}</v-icon>
                        {{ 'name' in editHeater.object ? convertName(editHeater.object.name) : "UNKNOWN" }}
                    </span>
                    </v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-btn small class="minwidth-0" @click="editHeater.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
                </v-toolbar>
                <v-card-text class="pt-3">
                    <v-container class="px-0 py-0">
                        <v-row v-if="'chartTemperature' in editHeater.object && editHeater.object.chartTemperature">
                            <v-col class="col-12">
                                <v-checkbox
                                    v-model="editHeater.boolTemperature"
                                    :label="$t('Dashboard.ShowCurrentTemperatureInChart')"
                                    hide-details
                                    class="mt-0"
                                    @change="setVisible('temperature')"
                                ></v-checkbox>
                            </v-col>
                        </v-row>
                        <v-row v-if="'chartTarget' in editHeater.object && editHeater.object.chartTarget">
                            <v-col class="col-12">
                                <v-checkbox
                                    v-model="editHeater.boolTarget"
                                    :label="$t('Dashboard.ShowTargetTemperatureInChart')"
                                    hide-details
                                    class="mt-0"
                                    @change="setVisible('target')"
                                ></v-checkbox>
                            </v-col>
                        </v-row>
                        <v-row v-if="'chartPower' in editHeater.object && editHeater.object.chartPower">
                            <v-col class="col-12">
                                <v-checkbox
                                    v-model="editHeater.boolPower"
                                    :label="$t('Dashboard.ShowPWMPowerInChart')"
                                    hide-details
                                    class="mt-0"
                                    @change="setVisible('power')"
                                ></v-checkbox>
                            </v-col>
                        </v-row>
                        <v-row v-if="'chartSpeed' in editHeater.object && editHeater.object.chartSpeed">
                            <v-col class="col-12">
                                <v-checkbox
                                    v-model="editHeater.boolSpeed"
                                    :label="$t('Dashboard.ShowPWMPowerInChart')"
                                    hide-details
                                    class="mt-0"
                                    @change="setVisible('speed')"
                                ></v-checkbox>
                            </v-col>
                        </v-row>
                        <v-row v-for="key in Object.keys(editHeater.additionSensors)" v-bind:key="key">
                            <v-col class="col-12">
                                <v-checkbox
                                    v-model="editHeater.additionSensors[key]"
                                    :label="$t('Dashboard.Show')+key+$t('Dashboard.InList')"
                                    hide-details
                                    class="mt-0"
                                    @change="setVisibleAdditionalSensor(key)"
                                ></v-checkbox>
                            </v-col>
                        </v-row>
                        <v-row>
                            <v-col class="col-12 text-center">
                                <v-color-picker
                                    hide-canvas
                                    hide-mode-switch
                                    mode="hexa"
                                    v-model="editHeater.color"
                                    @input="setChartColor"
                                    class="mx-auto"
                                ></v-color-picker>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-card-text>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import toolInput from '../../inputs/ToolInput'
    import TempChart from '@/components/charts/TempChart'
    import {convertName} from "@/plugins/helpers"

    export default {
        components: {
            toolInput,
            TempChart,
        },
        data: function() {
            return {
                editHeater: {
                    bool: false,
                    object: {},
                    boolTemperature: false,
                    boolTarget: false,
                    boolPower: false,
                    boolSpeed: false,
                    additionSensors: {},
                    color: "",
                }
            }
        },
        computed: {
            ...mapState({
                datasets: state => state.printer.tempHistory.datasets,
                boolTempchart: state => state.gui.dashboard.boolTempchart,
                printer: state => state.printer,
                cooldownGcode: state => state.gui.cooldownGcode,
                printer_state: state => state.printer.print_stats.state,
            }),
            ...mapGetters([
                'gui/getPreheatPresets'
            ]),
            heaters: {
                get () {
                    return this.$store.getters["printer/getHeaters"]
                }
            },
            temperatureFans: {
                get () {
                    return this.$store.getters["printer/getTemperatureFans"]
                }
            },
            temperatureSensors: {
                get () {
                    return this.$store.getters["printer/getTemperatureSensors"]
                }
            },
            boolTempchart: {
                get() {
                    return this.$store.state.gui.dashboard.boolTempchart
                },
                set: function(newVal) {
                    return this.$store.dispatch("gui/setSettings", { dashboard: { boolTempchart: newVal } })
                }
            },
            autoscaleTempchart: {
                get() {
                    return this.$store.state.gui.tempchart.autoscale
                },
                set: function(newVal) {
                    return this.$store.dispatch("gui/setSettings", { tempchart: { autoscale: newVal } })
                }
            }
        },
        created() {

        },
        methods: {
            convertName: convertName,
            cssBorderLeftColor(color) {
                return {
                  "border-left-color": color
                }
            },
            preheat(preset) {
                for (const [name, attributes] of Object.entries(preset.values)) {
                    if (attributes.bool) {
                        let gcode = "SET_HEATER_TEMPERATURE HEATER="+name+" TARGET="+attributes.value

                        if (attributes.type === "temperature_fan") {
                            const fanName = name.replace("temperature_fan ", "")
                            gcode = "SET_TEMPERATURE_FAN_TARGET temperature_fan="+fanName+" TARGET="+attributes.value
                        }

                        this.$store.commit('server/addEvent', { message: gcode, type: 'command' })
                        this.$socket.sendObj('printer.gcode.script', { script: gcode })
                    }
                }

                if (preset.gcode !== "") {
                    setTimeout(() => {
                        this.$store.commit('server/addEvent', { message: preset.gcode, type: 'command' })
                        this.$socket.sendObj('printer.gcode.script', { script: preset.gcode })
                    }, 100)
                }
            },
            cooldown() {
                this.$store.commit('server/addEvent', { message: this.cooldownGcode, type: 'command' })
                this.$socket.sendObj('printer.gcode.script', { script: this.cooldownGcode })
            },
            openHeater(object) {
                this.editHeater.object = object

                this.editHeater.color = object.chartColor
                this.editHeater.boolTemperature = 'chartTemperature' in object && object.chartTemperature !== undefined && 'visible' in object.chartTemperature ? object.chartTemperature.visible : false
                this.editHeater.boolTarget = 'chartTarget' in object && object.chartTarget !== undefined && 'visible' in object.chartTarget ? object.chartTarget.visible : false
                this.editHeater.boolPower = 'chartPower' in object && object.chartPower !== undefined && 'visible' in object.chartPower ? object.chartPower.visible : false
                this.editHeater.boolSpeed = 'chartSpeed' in object && object.chartSpeed !== undefined && 'visible' in object.chartSpeed ? object.chartSpeed.visible : false

                let additionalSensors = {}
                Object.keys(object.additionValues).forEach(sensor => {
                    additionalSensors[sensor] = object.additionValues[sensor]['gui']['boolList']
                })
                this.editHeater.additionSensors = Object.assign(additionalSensors)

                this.editHeater.bool = true
            },
            setVisible(type) {
              if ("name" in this.editHeater.object) {
                this.$store.commit('printer/tempHistory/setVisible', { name: this.editHeater.object.name, type: type, value: this.editHeater['bool'+type.charAt(0).toUpperCase() + type.slice(1)] })
                this.$store.dispatch('gui/setTempchartDatasetSetting', { name: this.editHeater.object.name, type: type, value: this.editHeater['bool'+type.charAt(0).toUpperCase() + type.slice(1)] })
              }
            },
            setVisibleAdditionalSensor(sensor) {
                if ("name" in this.editHeater.object) {
                    this.$store.dispatch('gui/setTempchartDatasetAdditionalSensorSetting', { name: this.editHeater.object.name, sensor: sensor, value: this.editHeater.additionSensors[sensor] })
                }
            },
            setChartColor(value) {
                if ("name" in this.editHeater.object) {
                    if (typeof value === "object" && 'hex' in value) value = value.hex
                    this.$store.commit('printer/tempHistory/setColor', { name: this.editHeater.object.name, value: value })
                    this.$store.dispatch('gui/setTempchartDatasetSetting', { name: this.editHeater.object.name, type: 'color', value: value })
                }
            }
        },
    }
</script>