<template>
  <div>
    <span>{{ title }}</span>
    <div class="row items-center q-mt-sm">
      <q-btn
        :unelevated="step >= 1"
        :outline="step == 0"
        rounded
        color="primary"
        :label="$t('services.emulation.emulationStepImport')"
        disable
      />
      <div class="relative-position">
        <q-btn
          v-if="hasProcessStarted && step === 1"
          class="play-btn absolute-center z-top"
          color="primary"
          icon="play_arrow"
          :disable="interagenciesLoading"
          @click="onMzClick"
        />
        <q-separator
          class="q-mx-xs emulator-step-separator"
          :color="step >= 2 ? (disable ? 'primary-disabled' : 'primary') : ''"
        />
      </div>

      <q-btn
        :class="{ 'no-pointer-events': hasProcessStarted }"
        :unelevated="step >= 2"
        :outline="step <= 1"
        rounded
        color="primary"
        :label="$t('services.emulation.emulationStepInteragency')"
        :disable="disable || (hasProcessStarted && isStepSet && step >= 2)"
        @click="selectEmulationStep(2)"
      />
      <div class="relative-position">
        <q-btn
          v-if="hasInteragenciesSucceed"
          class="play-btn absolute-center z-top"
          color="primary"
          icon="play_arrow"
          :loading="checksLoading"
          @click="onPlayClick"
        />
        <q-separator
          class="q-mx-xs emulator-step-separator"
          :color="step === 3 ? (disable ? 'primary-disabled' : 'primary') : ''"
        />
      </div>
      <q-btn
        :class="{ 'no-pointer-events': hasProcessStarted }"
        :unelevated="step === 3"
        :outline="step <= 2"
        rounded
        color="primary"
        :label="$t('services.emulation.emulationStepChecks')"
        :disable="disable || (hasProcessStarted && isStepSet && step >= 3)"
        @click="selectEmulationStep(3)"
      />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { MIN_STEP } from '../utils';

export default Vue.extend({
  props: {
    title: String,
    disable: Boolean,
    currentStep: Number,
    hasProcessStarted: Boolean,
    hasInteragenciesSucceed: Boolean,
    checksLoading: Boolean,
    interagenciesLoading: Boolean,
  },
  data() {
    return {
      step: 0,
    };
  },
  mounted() {
    if (this.isStepSet) {
      this.step = this.currentStep;
    }
  },
  watch: {
    currentStep(v) {
      this.step = v;
    },
  },
  computed: {
    isStepSet() {
      return typeof this.currentStep !== 'undefined';
    },
  },
  methods: {
    selectEmulationStep(step: number) {
      if (this.step === step) {
        this.step = MIN_STEP;
      } else {
        this.step = step;
        if (this.hasProcessStarted) {
          this.$emit('go-to-next-stage', this.step);
        }
      }
      this.$emit('select', this.step);
    },
    onPlayClick() {
      this.$emit('get-checks');
    },
    onMzClick() {
      this.$emit('get-interagencies');
    },
  },
});
</script>

<style scoped>
.emulator-step-separator {
  width: 56px;
}

.bg-primary-disabled {
  background: #7a96ad !important;
}

.play-btn {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
</style>