<template>
  <div class="progressBarWrapper">
    <template v-for="(step, index) in steps">
      <div class="progressBarStep" :class="{ currentStep: step.flowNodeId == activeStep, finishedStep: finishedSteps.includes(step.flowNodeId) }">
          <img v-if="step.icon && !finishedSteps.includes(step.flowNodeId)" :src="step.icon" />
          <img v-if="step.iconFinished && finishedSteps.includes(step.flowNodeId)" :src="step.iconFinished" />
          <span>
              {{ step.label }}
          </span>
      </div>
      <hr v-if="index != steps.length - 1" :class="{coloredConnection: finishedSteps.includes(step.flowNodeId)}" />
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    name: 'UIProcessProgressBar',
    inject: ['$socket'],
    props: {
        /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
        id: { type: String, required: true },
        props: { type: Object, default: () => ({}) },
        /* state: { type: Object, default: () => ({ enabled: false, visible: false }) } // DEFAULT */
        state: {
            type: Object,
            default: () => ({ enabled: true, visible: true }),
        },
    },
    created() {
        this.steps = this.props.steps;
    },
    computed: {
        ...mapState('data', ['messages']),
        stepFlowNodeIds () {
          return this.steps.map(step => step.flowNodeId);
        },
        activeStep () {
            return this.messages[this.id]?.processProgressBar?.activeStep;
        },
        finishedSteps () {
          return this.messages[this.id]?.processProgressBar?.finishedSteps ?? [];
        },
    },
    data() {
        return {
          steps: [],
        };
    },
    mounted() {
        this.$socket.on('widget-load:' + this.id, (msg) => {
          this.steps = this.props.steps;
          this.$store.commit('data/bind', {
            widgetId: this.id,
            msg,
          });
        });
        this.$socket.on('msg-input:' + this.id, (msg) => {
            this.messages[this.id] = msg;

            this.$store.commit('data/bind', {
                widgetId: this.id,
                msg,
            });
        });
        this.$socket.emit('widget-load', this.id);
    },
    unmounted() {
        this.$socket?.off('widget-load' + this.id);
        this.$socket?.off('msg-input:' + this.id);
    },
    methods: {
    },
};
</script>

<style scoped>
/* CSS is auto scoped, but using named classes is still recommended */
@import '../stylesheets/ui-process-progress-bar.css'
</style>
