<template>
  <q-card class="col-12" height="">
    <q-card-section v-if="isThisSession(session.token)" class="text-caption">
      Diese Session.
    </q-card-section>
    <q-card-section>
      <div class="row">
        <div class="col-xs-12 col-sm-6">
          Browser:
          <q-icon :name="getBrowserIcon(session.browser)" size="24px" />
          {{ session.browser }}
        </div>
        <div class="col-xs-12 col-sm-6">
          Plattform:
          <q-icon :name="getPlatformIcon(session.platform)" size="24px" />
          {{ session.platform }}
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-6">
          Lebenszeit:
          {{ session.lifetime }}
        </div>
        <div class="col-xs-12 col-sm-6">Läuft aus: {{ session.expires }}</div>
      </div>
    </q-card-section>
    <q-card-actions align="right">
      <q-btn
        flat
        round
        dense
        icon="mdi-delete"
        @click="deleteSession(session.token)"
      />
    </q-card-actions>
  </q-card>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
  name: 'Sessions',
  props: {
    session: {
      required: true
    }
  },
  setup(_, { root }) {
    function getBrowserIcon(browser: string) {
      return browser == 'firefox'
        ? 'mdi-firefox'
        : browser == 'chrome'
        ? 'mdi-google-chrome'
        : browser == 'safari'
        ? 'mdi-apple-safari'
        : 'mdi-help';
    }
    function getPlatformIcon(platform: string) {
      return platform == 'linux'
        ? 'mdi-linux'
        : platform == 'windows'
        ? 'mdi-microsoft-windows'
        : platform == 'apple'
        ? 'mdi-apple'
        : 'mdi-help';
    }

    function deleteSession(token: string) {
      root.$store.dispatch('sessions/deleteSession', token).catch(error => {
        console.warn(error);
      });
    }
    function isThisSession(token: string) {
      return root.$store.getters['user/session'].token == token;
    }

    return {
      getBrowserIcon,
      getPlatformIcon,
      isThisSession,
      deleteSession
    };
  }
});
</script>