<template lang="pug">
  base-notification(
  :can-remove="false",
  :has-icon="false",
  :read-after-click="false",
  :notification="{}",
  @click="action",
  )
    div.text-center(slot="content")
      div.username-notification-title {{ $t('setUsernameNotificationTitle') }}
      div {{ $t('setUsernameNotificationBody') }}
      div.current-username-container.mx-auto
        label.font-weight-bold {{ $t('currentUsername') + " " }}
        label @
        label {{ user.auth.local.username }}
      .notifications-buttons
        .btn.btn-small.btn-secondary(@click.stop="changeUsername()") {{ $t('goToSettings') }}
</template>
<style lang='scss'>
  @import '../../../assets/scss/colors.scss';

  .username-notification-title {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: bold;
    color: $purple-300;
  }

  .current-username-container {
    border-radius: 2px;
    background-color: #f9f9f9;
    border: solid 1px #e1e0e3;
    padding: 8px 16px 8px 16px;
    display: inline-block;
    margin-top: 16px;
    margin-bottom: 16px;

    label {
      display: inline;
    }

    .notification-buttons {
      display: inline-block;
    }
  }

</style>
<script>
  import BaseNotification from './base';
  import { mapState } from 'client/libs/store';
  import axios from 'axios';

  export default {
    props: ['notification'],
    components: {
      BaseNotification,
    },
    computed: {
      ...mapState({user: 'user.data'}),
    },
    methods: {
      action () {
        this.$router.push({ name: 'site' });
      },
      async confirmUsername () {
        await axios.put('/api/v4/user/auth/update-username', {username: this.user.auth.local.username});
      },
      changeUsername () {
        this.$router.push({ name: 'site' });
      },

    },
  };
</script>
