<template>
  <div>
    <div class="bg-dark p-2">
      <b-container class="align-items-center d-flex">
        <b-btn :to="myAccountRoute" variant="link">
          <icon name="back-arrow" class="text-white icon-size-3 mr-2" />
        </b-btn>
        <b-img :src="companyLogo" class="icon-size-4" />
        <span class="h3 pt-3 ml-3 text-white">
          {{ $t('MyAccount.Subscription.TitleSubscription') }}
        </span>
      </b-container>
    </div>
    <order-steps-template class="eshop vh-min-100" :steps="steps" :active-index="currentIndex">
      <slot class="px-0 px-md-2" />
    </order-steps-template>
  </div>
</template>
<script>
import OrderStepsTemplate from '@/app/_global/components/templates/OrderStepsTemplate'
import EshopDefaultIcons from '@/app/_global/fixtures/eshop-order-default-icons'
import { MY_ACCOUNT as URL_PREFIX } from '@/config/url-prefix'
import Routes from '../../router'
import _ from 'lodash'

export default {
  name: 'SubscriptionTemplate',
  components: { OrderStepsTemplate },
  data() {
    return {
      routes: Routes[0].children,
      myAccountRoute: URL_PREFIX + '/subscription',
      icons: EshopDefaultIcons,
      companyLogo: this.$const.constImage.COMPANY_LOGO,
    }
  },
  mounted() {},
  methods: {},
  computed: {
    steps() {
      let self = this
      let routes = _.chain(this.routes)
        .filter(route => route.path !== undefined)
        .map(route => {
          let name = route.name.toLowerCase().replace('subscription', '')
          return {
            path: route.path,
            name: name,
            icon: _.find(self.icons, ['name', name]).icon,
            title: _.find(self.icons, ['name', name]).title,
          }
        })
        .unionBy(self.icons, 'name')
        .sortBy('order')
        .value()
      routes[0].title = this.$t('MyAccount.Subscription.Subscription')
      routes[0].path = this.myAccountRoute
      return routes
    },
    currentIndex() {
      let self = this
      return this.steps.findIndex(steps => {
        return steps.path === self.$route.path
      })
    },
  },
}
</script>
