<template>
  <div class="d-flex flex-column-reverse flex-lg-row gap-3">
    <v-tabs
      height="56"
      background-color="transparent"
      show-arrows
      @change="$emit('input', $event)">
      <v-tab
        v-for="item in items"
        :key="item.label"
        :to="item.to"
        :ripple="false"
        class="text-h3-headline"
        exact-path>
        {{ item.label }}
      </v-tab>
    </v-tabs>
    <v-spacer />
    <div class="d-flex gap-3">
      <div
        v-if="errors.length"
        :style="{ width: '280px' }"
        class="d-flex align-center">
        <v-text-field
          :value="errorSelected ? `${errorSelected.at} - ${errorSelected.error}` : ''"
          :placeholder="$t('excel.error')"
          class="navigator-errors error--text body-2"
          color="#de6b4f"
          background-color="#ffffff"
          item-color="#de6b4f"
          item-text="at"
          return-object
          hide-details
          outlined
          readonly
          dense
          @input="$emit('update:error-selected', $event)">
          <template #label>
            <span class="body-2 error--text">{{ $t('excel.errors', [errors.length]) }}</span>
          </template>
          <template #append>
            <div class="d-flex align-center gap-1">
              <div class="caption grey--text">
                {{ errorSelected ? errorSelected.seq : 1 }}/{{ errors.length }}
              </div>
              <v-btn
                color="grey"
                height="24"
                width="24"
                icon
                @click="navigatorErrorUp($event)">
                <v-icon>
                  mdi-chevron-up
                </v-icon>
              </v-btn>
              <v-divider vertical />
              <v-btn
                color="grey"
                height="24"
                width="24"
                icon
                @click="navigatorErrorDown($event)">
                <v-icon>mdi-chevron-down</v-icon>
              </v-btn>
            </div>
          </template>
        </v-text-field>
      </div>
      <slot name="action"></slot>
    </div>
  </div>
</template>

<script>
import {
  VTabs,
  VTab,
  VTextField,
  VBtn,
  VIcon,
  VDivider,
  VSpacer
} from 'vuetify/lib'

export default {
  components: {
    VTabs,
    VTab,
    VTextField,
    VBtn,
    VIcon,
    VDivider,
    VSpacer
  },
  props: {
    items: {
      type: Array,
      default: () => ([])
    },
    errorSelected: {
      type: Object,
      default: () => ({})
    },
    errors: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    navigatorErrorUp () {
      let errorSelected = this.errorSelected
      const index = this.errors.findIndex((it) => it.at === errorSelected.at)
      if (this.errors[index - 1]) {
        errorSelected = this.$_.cloneDeep(this.errors[index - 1])
        errorSelected.seq = (index + 1) - 1
      }
      this.$emit('update:error-selected', errorSelected)
    },
    navigatorErrorDown () {
      let errorSelected = this.errorSelected
      const index = this.errors.findIndex((it) => it.at === errorSelected.at)
      if (this.errors[index + 1]) {
        errorSelected = this.$_.cloneDeep(this.errors[index + 1])
        errorSelected.seq = (index + 1) + 1
      }
      this.$emit('update:error-selected', errorSelected)
    }
  }
}
</script>

<style lang="scss" scoped>
.v-tabs {
  ::v-deep .v-slide-group__content {
    background-color: var(--v-background-base);
  }
  ::v-deep .v-tab {
    background-color: #ececec;
    margin-right: 8px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    min-width: 197px;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    overflow: hidden;
  }
  ::v-deep .v-tab:not(.v-tab--active) {
    color: var(--v-secondary-base) !important;
  }
  ::v-deep .v-tab--active {
    background-color: white;
    color: var(--v-primary-base);
    &:before {
      opacity: 0 !important;
    }
  }
  ::v-deep .v-tabs-slider-wrapper {
    display: flex;
    justify-content: center;
  }
  ::v-deep .v-tabs-slider {
    width: 85%;
  }
}
.navigator-errors {
  z-index: 10;
}
</style>
