<template>
  <section class="container-fuild bg-pic">
    <h4 class="text-uppercase mb-4">Dashboard</h4>
    <div class="row">
      <div class="col-12 col-md-4">
        <div class="card">
          <div class="card-body">
            <h4 class="text-dark font-weight-bold mb-3">Calendar</h4>
            <div class="text-center">
              <b-calendar v-model="selectedDT" locale="en-US" @context="onContext"></b-calendar>
            </div>
          </div>
        </div>
        <div class="card mt-3">
          <div class="card-body bg-pic">
            <h4 class="text-dark font-weight-bold mb-2">Activities</h4>
            <div class="d-flex flex-column border rounded p-3 my-3" v-for="video in videos" :key="video.recid">
              <p class="text-dark font-weight-bold mb-2">Activity {{video.recid}}</p>
              <span class="text-muted" v-show="video.type==1">Mathematics</span>
              <span class="text-muted" v-show="video.type==2">Science</span>
              <a href="#" @click="() =>{setVideoURL(video.url)}">{{video.url}}</a>
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-12 col-md-6">
          
        <div class="card mt-3">
          <div class="card-body">
            <h4 class="text-dark font-weight-bold mb-4">Video Bar</h4>
            <div class="embed-responsive embed-responsive-21by9">
              <iframe width="560" height="315" :src="video_url" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
            </div>

            <!-- <div class="d-flex align-items-center justify-content-between border rounded">
              <b-button v-b-modal.activities class="text-white" variant="success">Suggested Activties <i
                  class="fas fa-arrow-right ml-1"></i></b-button>
              <b-button class="text-white" variant="success">View Progress <i class="fas fa-chart-line ml-2"></i>
              </b-button>
            </div> -->

          </div>
        </div>
        
      </div>
      <div class="col-12 col-md-2">
        <div class="mt-3"><basic-vue-chat :new-message="message" :title="'Activities Suggetions'"
                @newOwnMessage="onNewActivity" :initial-feed="feedActivities" /></div>
      </div>
    </div>
  </section>
</template>
<script>
  import BasicVueChat from "basic-vue-chat";
  import ApiService from '@/services/api.service';
  import moment from 'moment'
  export default {
    data() {
      return {
        selectedDT: moment().format("YYYY-MM-DD"),
        videos: [],
        video_url:'',
        feedActivities: [],
        currentUserId: 0,
        userObj:'',
        user:null,
        message: {
          id: 0,
          author: 'Person',
          contents: 'hi there',
          date: '16:30'
        },
      }
    },
    components: {
      BasicVueChat
    },
    created() {
      const user = JSON.parse(window.localStorage.getItem('user'));
      this.user = user;
      this.currentUserId = user.parent_id
      this.getVideoURL()
      this.showActivities()
    },
    mounted() {

    },
    methods: {
      onContext(ctx) {
        this.selectedDT = moment(ctx.activeDate).format("YYYY-MM-DD")
        this.getVideoURL();
      },
      getVideoURL() {
        ApiService.post("/quiz-records",{date : this.selectedDT})
          .then(response => {
            this.videos = response.data.quiz_records
          })
      },
      getUserInfo( id ) {
         ApiService.get('/user-info/'+ id )
          .then(response => {
            return response.data.user;
          }).catch(e=>console.log(e))
      },
      setVideoURL(url) {
        this.video_url = url
      },
      showActivities() {
        const self =this;
        ApiService.get('/activities/get/' + self.currentUserId)
          .then(response => {
              response.data.activities.forEach(element => {
                  //if(element.parent_id==self.currentUserId){
                    self.feedActivities.push({
                      id: element.parent_id == self.currentUserId ? 0 : 1,
                      author: element.parent_id == self.currentUserId ? "Me" : element.name,
                      contents: element.feedback,
                      date: new Date(element.date).toISOString().substring(0, 10)
                    })
                  //}
              });
          })
          .catch(error => {
              console.log(error)
          })
       },
      onNewActivity( content ) {
          const activityObj = {
              name: this.user.username,
              parent_id: this.user.student_id,
              subject: 'maths',
              feedback: content,
              date: '2021-02-17',
              time: '12:00:00',
          }
          ApiService.post('/activities/create', activityObj)
              .then(response => {
                  console.log(response)
              })
              .catch(error => {
                  console.log(error)
              })
      }
    },

  }
</script>