<template>
  <div class="vc-wizard-navigation">
    <slot name="navigation">
      <div class="left-actions">
        <VcButton
          size="large"
          color="secondary"
          type="outline"
          icon="vc-icon-cancel"
          @click="onCancel"
        >
          {{ cancelButtonText }}
        </VcButton>
      </div>
      <div
        v-if="$slots['extra-actions']"
        class="extra-actions"
      >
        <slot name="extra-actions" />
      </div>
      <div class="right-actions px-5">
        <div class="default-actions">
          <div class="action-item">
            <VcButton
              v-if="showPrevBtn"
              type="borderless"
              icon="vc-icon-back"
              size="large"
              @click="onPrev"
            >
              {{ backButtonText }}
            </VcButton>
          </div>
          <div
            v-if="showNextBtn"
            class="action-item"
          >
            <VcButton
              :loading="loading"
              :disabled="disabledNextBtn"
              size="large"
              @click="onNext"
            >
              <span>
                {{ nextButtonText }}
              </span>
              <i class="vc-icon-next icon-base" />
            </VcButton>
          </div>
          <div
            v-if="showFinalBtn"
            class="action-item"
          >
            <VcButton
              :loading="loading"
              icon="vc-icon-Save"
              size="large"
              @click="onFinal"
            >
              {{ finalButtonText }}
            </VcButton>
          </div>
        </div>
        <div
          v-if="showFinalAddSlot"
          class="additional-actions"
        >
          <slot name="additional-actions" />
        </div>
      </div>
    </slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import VcButton from '@/components/VcButton/VcButton.vue'

export default defineComponent({
  name: 'VcWizardNavigation',
  components: { VcButton },
  props: {
    cancelName: {
      type: String,
      default: ''
    },
    backName: {
      type: String,
      default: ''
    },
    nextName: {
      type: String,
      default: ''
    },
    finalName: {
      type: String,
      default: ''
    },
    showPrevBtn: {
      type: Boolean,
      default: false
    },
    showNextBtn: {
      type: Boolean,
      default: true
    },
    disabledNextBtn: {
      type: Boolean,
      default: false
    },
    showFinalBtn: {
      type: Boolean,
      default: true
    },
    showFinalAddSlot: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['on-cancel', 'on-prev', 'on-next', 'on-final'],
  computed: {
    cancelButtonText () {
      return this.cancelName ? this.cancelName : this.$tVU.t('wizard.navigation.cancel')
    },
    backButtonText () {
      return this.backName ? this.backName : this.$tVU.t('wizard.navigation.back')
    },
    nextButtonText () {
      return this.nextName ? this.nextName : this.$tVU.t('wizard.navigation.next')
    },
    finalButtonText () {
      return this.finalName ? this.finalName : this.$tVU.t('wizard.navigation.finish')
    }
  },
  methods: {
    onCancel (): void {
      this.$emit('on-cancel')
    },
    onPrev (): void {
      this.$emit('on-prev')
    },
    onNext (): void {
      this.$emit('on-next')
    },
    onFinal (): void {
      this.$emit('on-final')
    }
  }
})
</script>

<style lang="scss">
.vc-wizard-navigation {
  @apply border-t-2 border-field-borders flex justify-between items-center py-3 px-4 lg:px-8 xl:px-15;
  flex: 0 0 var(--vc-wizard-navigation);

  .left-actions {
    @apply px-5;
  }
  .extra-actions {
    @apply flex-grow;
  }
  .right-actions {
    @apply flex justify-start items-center;

    .default-actions, .additional-actions {
      @apply flex justify-start items-center;
    }
    .default-actions {
      .action-item {
        @apply py-0 px-1 xl:px-3;
      }
      .vc-icon-next {
        @apply ml-2;
      }
    }
    .additional-actions {
      @apply py-0 px-3;
    }
  }
}

[dir='rtl'] {
  .vc-wizard-navigation {
    .action-item {
      i {
        transform: rotate(180deg);
      }
      .vc-icon-next {
        @apply mr-2 ml-0;
      }
    }
  }
}
</style>
