<template>
  <Container
    v-bind="{ ...orderTitleOptions, ...blockStyle }"
    class="order-aside-block py-xl mb-l"
  >
    <BaseText :dark-mode="true" class="mb-m">
      {{ $_tr(`customs.SUPPLIES.aside.${type}.description`) }}
    </BaseText>

    <Link :href="formattedLink" :inline="false">
      <Button
        appearance="primary"
        :type="type === 'admin' ? 'admin' : 'primary'"
      >
        {{ $_tr(`customs.SUPPLIES.aside.${type}.label`) }}
      </Button>
    </Link>
  </Container>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'

import { BaseText } from 'inside-collection/atoms'
import { Button, Container, Link } from 'inside-collection/components'

export default {
  name: 'OrderAsideBlock',
  $_i18nRootPath: 'customs.SUPPLIES.aside',
  components: { Block, BaseText, Button, Container, Link },
  props: {
    type: {
      type: String,
      validator: value => ['myOrders', 'admin'].includes(value)
    },
    titleOptions: {
      type: Object
    }
  },
  data() {
    return {
      blockStyle: {
        border: false,
        background: true,
        backgroundColor: this.$_theme('colorPrimary600')
      }
    }
  },
  computed: {
    orderTitleOptions() {
      const defaultOptions = {
        title: this.$t(`customs.SUPPLIES.aside.${this.type}.title`),
        titleOptions: { darkMode: true, tag: 'h3', alignment: 'center' }
      }

      return this.titleOptions || defaultOptions
    },
    formattedLink() {
      return {
        name: this.type === 'admin' ? 'OrdersListingPage' : 'MyOrdersPage'
      }
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.order-aside-block {
  text-align: center;

  @include tablet {
    height: 100%;
    min-width: 250px;
  }
}
</style>
