<template>
  <b-card bg-variant="light" border-variant="light">
    <b-row class="d-flex justify-content-between align-items-center">
      <b-col sm="6" lg="8" class="mb-2 mt-2">
        <dl>
          <dt>{{ $t('pageOverview.bmcTime') }}</dt>
          <dd
            v-if="liveDate && liveTime"
            data-test-id="overviewQuickLinks-text-bmcTime"
          >
            {{ liveDate }} {{ liveTime }}
            <!--{{ isUtcDisplay ? $t('pageProfileSettings.UTC') : timezone }}-->
          </dd>
          <dd v-else>--</dd>
        </dl>
      </b-col>
      <b-col sm="6" lg="4" class="mb-2 mt-2" style="max-width: 300px">
        <b-button
          to="/operations/serial-over-lan"
          variant="secondary"
          data-test-id="overviewQuickLinks-button-solConsole"
          class="d-flex justify-content-between align-items-center sol-burron"
        >
          {{ $t('pageOverview.solConsole') }}
          <icon-arrow-right />
        </b-button>
      </b-col>
    </b-row>
  </b-card>
</template>

<script>
import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16';
import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
import LocalTimezoneLabelMixin from '@/components/_sila/Mixins/LocalTimezoneLabelMixin';

export default {
  name: 'QuickLinks',
  components: {
    IconArrowRight: ArrowRight16,
  },
  mixins: [BVToastMixin, LocalTimezoneLabelMixin],
  computed: {
    timeZone() {
      return this.$store.getters['global/timeZone'];
    },
    liveDate() {
      return this.$store.getters['global/liveDate'];
    },
    liveClock() {
      return this.$store.getters['global/liveClock'];
    },
    liveTime() {
      if (!this.liveClock || !this.timeZone) {
        return;
      }

      return (
        this.$store.getters['global/liveClock'] +
        ' ' +
        this.timeZone.split(' ')[0]
      );
    },
    timezone() {
      return this.localOffset();
    },
    /*isUtcDisplay() {
      return this.$store.getters['global/isUtcDisplay'];
    },*/
  },
  created() {
    Promise.all([this.$store.dispatch('global/getBmcTime')]).finally(() => {
      this.$root.$emit('overview-quicklinks-complete');
    });
  },
};
</script>

<style lang="scss" scoped>
dd,
dl {
  margin: 0;
}
</style>
