<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-mx-lg">User General Dashboard</div>
      <q-card class="my-card q-ma-lg">
        <q-card-section class="flex flex-center column text-grey-9">
          <q-avatar size="100px">
            <img :src="authUserImageUrl" alt="user photo" />
          </q-avatar>
          <div class="text-h6 text-bold q-pa-sm">Welcome, Docexams</div>
          <div
            class="text-body1"
          >Manage your Tutor, Qbank and Course subscriptions from this General Dashboard</div>
        </q-card-section>
        <q-card-section>
          <div class="row">
            <div class="col-12 col-md-4 q-px-xs">
              <q-card class="bg-grey-2 q-ma-sm hover-fx" style="min-height: 200px">
                <q-card-section class="q-pa-none">
                  <q-item>
                    <q-item-section>
                      <div class="text-h6">TUTOR</div>
                      <div class="text-caption">(Teach Online)</div>
                      <div class="text-subtitle1">{{tutorCurrentStatusText}}</div>
                    </q-item-section>
                    <q-item-section avatar>
                      <q-avatar size="100px">
                        <img src="statics/tutor-icon.png" alt="Tutor dashboar" />
                      </q-avatar>
                    </q-item-section>
                  </q-item>
                </q-card-section>
                  <q-btn flat class="full-width absolute-bottom" color="primary" :to="tutorLink()">
                    {{tutorActionText}}
                  </q-btn>
              </q-card>
            </div>
            <div class="col-12 col-md-4 q-px-xs">
              <q-card class="bg-grey-2 q-ma-sm hover-fx" style="min-height: 200px">
                <q-card-section class="q-pa-none">
                  <q-item>
                    <q-item-section>
                      <div class="text-h6">MY QBANK</div>
                      <div class="text-caption">(Questions Bank)</div>
                      <div class="text-subtitle1">
                        {{qbankCurrentStatusText}}
                      </div>
                    </q-item-section>
                    <q-item-section avatar>
                      <q-avatar size="100px">
                        <img src="statics/qbank-icon.png" alt="Qbank dashboar" />
                      </q-avatar>
                    </q-item-section>
                  </q-item>
                </q-card-section>
                  <q-btn flat class="full-width absolute-bottom" color="primary" :to="qbankLink()">
                    {{qbankeActionText}}</q-btn>
              </q-card>
            </div>
            <div class="col-12 col-md-4 q-px-xs ">
              <q-card class="bg-grey-2 q-ma-sm hover-fx" style="min-height: 200px">
                <q-card-section class="q-pa-none">
                  <q-item>
                    <q-item-section>
                      <div class="text-h6">MY COURSE</div>
                      <div class="text-caption">(Live Online)</div>
                      <div class="text-subtitle1">
                        {{courseCurrentStatusText}}
                      </div>
                    </q-item-section>
                    <q-item-section avatar>
                      <q-avatar size="100px">
                        <img src="statics/course-icon.png" alt="Course dashboar" />
                      </q-avatar>
                    </q-item-section>
                  </q-item>
                </q-card-section>
                  <q-btn flat class="full-width absolute-bottom" color="primary" :to="courseLink()">
                    {{courseActionText}}</q-btn>
              </q-card>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </transition>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return {}
  },
  mounted () {
    console.log('Component mounted.')
  },
  computed: {
    ...mapGetters('auth',[
      'isTutor',
      'getCoursesCount',
      'hasCourse',
      'hasCourseRequests',
      'authUserImageUrl',
      'hasQbank',
      'getQbanksCount'
    ]),
    tutorCurrentStatusText: function () {
      if (!this.isTutor) {
        return 'You are not a tutor yet at DocExams'
      } else {
        return 'You have already registered as tutor '
      }
    },
    tutorActionText: function () {
      if (!this.isTutor) {
        return 'Become a Tutor Now'
      } else {
        return 'Take me to Tutor Dashboard '
      }
    },
    courseCurrentStatusText: function () {
      if (!this.hasCourse) {
        return 'You have no Course subscriptions yet.'
      } else {
        return `You have ${this.getCoursesCount} active Courses`
      }
    },
    courseActionText: function () {
      if (!this.hasCourse && !this.hasCourseRequests) {
        return 'Find Course'
      } else {
        return 'Take me to Course Dashboard '
      }
    },
    qbankCurrentStatusText: function () {
      if (!this.hasQbank) {
        return 'You have no Qbank subscriptions yet.'
      } else {
        return `You have ${this.getQbanksCount} active Qbanks`
      }
    },
    qbankeActionText: function () {
      if (!this.hasQbank) {
        return 'Find Qbank'
      } else {
        return 'Take me to Qbank Dashboard '
      }
    }
  },
  methods: {
    tutorLink: function () {
      return this.isTutor ? '/tutor/welcome' : '/tutor-create'
    },
    courseLink: function () {
      return this.hasCourse || this.hasCourseRequests
        ? '/course/welcome'
        : '/search/courses'
    },
    qbankLink: function () {
      return this.hasQbank
        ? '/qbank/welcome'
        : '/search/qbanks'
    }
  }
}
</script>
<style lang="css" scoped>
.hover-fx {
    transition: all 0.3s ease-out;
}

.hover-fx:hover {
    box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease-in;
}

</style>
