<template>
  <content-with-sidebar v-if="Object.keys(blogDetail).length" class="cws-container cws-sidebar-right blog-wrapper">

    <!-- content -->
    <div class="blog-detail-wrapper">
      <b-row>
        <!-- blogs -->
        <b-col cols="12">
          <b-card :img-src="blogDetail.blog.img" img-top img-alt="Blog Detail Pic" :title="blogDetail.blog.title">
            <b-media no-body>
              <b-media-aside vertical-align="center" class="mr-50">
                <b-avatar href="javascript:void(0)" size="24" :src="blogDetail.blog.avatar" />
              </b-media-aside>
              <b-media-body>
                <small class="text-muted mr-50">by</small>
                <small>
                  <b-link class="text-body">{{ blogDetail.blog.userFullName }}</b-link>
                </small>
                <span class="text-muted ml-75 mr-50">|</span>
                <small class="text-muted">{{ blogDetail.blog.createdTime }}</small>
              </b-media-body>
            </b-media>
            <div class="my-1 py-25">
              <b-link v-for="tag in blogDetail.blog.tags" :key="tag">
                <b-badge pill class="mr-75" :variant="tagsColor(tag)">
                  {{ tag }}
                </b-badge>
              </b-link>
            </div>
            <!-- eslint-disable vue/no-v-html -->
            <div class="blog-content" v-html="blogDetail.blog.content" />

            <!-- user commnets -->
            <b-media v-for="user in blogDetail.blog.UserComment" :key="user.avatar" no-body>
              <b-media-aside>
                <b-avatar size="60" :src="user.avatar" />
              </b-media-aside>
              <b-media-body>
                <h6 class="font-weight-bolder">
                  {{ user.fullName }}
                </h6>
                <b-card-text>
                  {{ user.comment }}
                </b-card-text>
              </b-media-body>
            </b-media>
            <!-- eslint-enable -->
            <hr class="my-2">

            <div class="d-flex align-items-center justify-content-between">
              <div class="d-flex align-items-center">
                <div class="d-flex align-items-center mr-1">
                  <b-link class="mr-50">
                    <feather-icon icon="MessageSquareIcon" size="21" class="text-body" />
                  </b-link>
                  <b-link>
                    <div class="text-body">
                      {{ kFormatter(blogDetail.blog.comments) }}
                    </div>
                  </b-link>
                </div>
                <div class="d-flex align-items-center">
                  <b-link class="mr-50">
                    <feather-icon size="21" icon="BookmarkIcon" class="text-body" />
                  </b-link>
                  <b-link>
                    <div class="text-body">
                      {{ kFormatter(blogDetail.blog.bookmarked) }}
                    </div>
                  </b-link>
                </div>
              </div>

              <!-- dropdown -->
              <div class="blog-detail-share">
                <b-dropdown variant="link" toggle-class="p-0" no-caret right>
                  <template #button-content>
                    <feather-icon size="21" icon="Share2Icon" class="text-body" />
                  </template>
                  <b-dropdown-item v-for="icon in socialShareIcons" :key="icon" href="#">
                    <feather-icon :icon="icon" size="18" />
                  </b-dropdown-item>
                </b-dropdown>
              </div>
              <!--/ dropdown -->
            </div>
          </b-card>
        </b-col>
        <!--/ blogs -->

        <!-- blog comment -->
        <b-col id="blogComment" cols="12" class="mt-2">
          <h6 class="section-label">
            Comment
          </h6>
          <b-card v-for="(comment, index) in blogDetail.comments" :key="index">
            <b-media no-body>
              <b-media-aside class="mr-75">
                <b-avatar :src="comment.avatar" size="38" />
              </b-media-aside>
              <b-media-body>
                <h6 class="font-weight-bolder mb-25">
                  {{ comment.userFullName }}
                </h6>
                <b-card-text>{{ comment.commentedAt }}</b-card-text>
                <b-card-text>
                  {{ comment.commentText }}
                </b-card-text>
                <b-link>
                  <div class="d-inline-flex align-items-center">
                    <feather-icon icon="CornerUpLeftIcon" size="18" class="mr-50" />
                    <span>Reply</span>
                  </div>
                </b-link>
              </b-media-body>
            </b-media>
          </b-card>
        </b-col>
        <!--/ blog comment -->

        <!-- Leave a Blog Comment -->
        <b-col cols="12" class="mt-2">
          <h6 class="section-label">
            Leave a Comment
          </h6>
          <b-card>
            <b-form>
              <b-row>
                <b-col cols="12">
                  <b-form-group class="mb-2">
                    <b-form-textarea id="comment-text" name="textarea" rows="4" placeholder="請輸入內容" />
                  </b-form-group>
                </b-col>
                <b-col cols="12">
                  <b-form-checkbox id="checkbox-1" v-model="commentCheckmark" name="checkbox-1" class="mb-2">
                    Save my name, email, and website in this browser for the next time I comment.
                  </b-form-checkbox>
                </b-col>
                <b-col cols="12">
                  <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary" @click="postComment">
                    Post Comment
                  </b-button>
                </b-col>
              </b-row>
            </b-form>
          </b-card>
        </b-col>
        <!--/ Leave a Blog Comment -->
      </b-row>
      <!--/ blogs -->
    </div>
    <!--/ content -->

    <!-- sidebar -->
    <div slot="sidebar" class="blog-sidebar py-2 py-lg-0">
      <!-- input search -->
      <b-form-group class="blog-search">
        <b-input-group class="input-group-merge">
          <b-form-input id="search-input" v-model="search_query" placeholder="Search here" />
          <b-input-group-append class="cursor-pointer" is-text>
            <feather-icon icon="SearchIcon" />
          </b-input-group-append>
        </b-input-group>
      </b-form-group>
      <!--/ input search -->

      <!-- recent posts -->
      <div class="blog-recent-posts mt-3">
        <h6 class="section-label mb-75">
          Recent Posts
        </h6>
        <b-media v-for="(recentpost, index) in blogSidebar.recentPosts" :key="index" no-body
          :class="index ? 'mt-2' : ''">
          <b-media-aside class="mr-2">
            <b-link>
              <b-img :src="recentpost.img" :alt="recentpost.img.slice(6)" width="100" rounded height="70" />
            </b-link>
          </b-media-aside>
          <b-media-body>
            <h6 class="blog-recent-post-title">
              <b-link class="text-body-heading">
                {{ recentpost.title }}
              </b-link>
            </h6>
            <span class="text-muted mb-0">
              {{ recentpost.createdTime }}
            </span>
          </b-media-body>
        </b-media>
      </div>
      <!--/ recent posts -->

      <!-- categories -->
      <div class="blog-categories mt-3">
        <h6 class="section-label mb-1">
          Categories
        </h6>

        <div v-for="category in blogSidebar.categories" :key="category.icon"
          class="d-flex justify-content-start align-items-center mb-75">
          <b-link>
            <b-avatar rounded size="32" :variant="tagsColor(category.category)" class="mr-75">
              <feather-icon :icon="category.icon" size="16" />
            </b-avatar>
          </b-link>
          <b-link>
            <div class="blog-category-title text-body">
              {{ category.category }}
            </div>
          </b-link>
        </div>
      </div>
      <!--/ categories -->
    </div>
  </content-with-sidebar>
</template>

<script>
import {
  BFormInput,
  BMedia,
  BAvatar,
  BMediaAside,
  BMediaBody,
  BImg,
  BLink,
  BFormGroup,
  BInputGroup,
  BInputGroupAppend,
  BCard,
  BRow,
  BCol,
  BBadge,
  BCardText,
  BDropdown,
  BDropdownItem,
  BForm,
  BFormTextarea,
  BFormCheckbox,
  BButton,
} from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
import { kFormatter } from '@core/utils/filter'
import ContentWithSidebar from '@core/layouts/components/content-with-sidebar/ContentWithSidebar.vue'
import useJwt from '@/auth/jwt/useJwt'
import { format } from 'date-fns'
import { zhTW } from 'date-fns/locale'
import { getUserData } from '@/auth/utils'

export default {
  components: {
    BFormInput,
    BMedia,
    BAvatar,
    BMediaAside,
    BMediaBody,
    BLink,
    BCard,
    BRow,
    BCol,
    BFormGroup,
    BInputGroup,
    BInputGroupAppend,
    BImg,
    BBadge,
    BCardText,
    BDropdown,
    BForm,
    BDropdownItem,
    BFormTextarea,
    BFormCheckbox,
    BButton,
    ContentWithSidebar,
  },
  directives: {
    Ripple,
  },
  data() {
    return {
      blogId: this.$route.params.id,
      search_query: '',
      commentCheckmark: '',
      blogDetail: [],
      blogSidebar: {},
      socialShareIcons: ['GithubIcon', 'GitlabIcon', 'FacebookIcon', 'TwitterIcon', 'LinkedinIcon'],
    }
  },
  created() {
    this.blogDetail.blog = {};
    this.blogDetail.comments = [];
    this.blogSidebar.recentPosts = [];

    useJwt.getDataset({
      sql: `SELECT title, content, tags, users.id AS userId, users.name AS userFullName, blogs.created_at AS createdTime, bookmarked
      FROM [laravel_kevin].[dbo].[blogs]
      RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]
      WHERE blogs.id=` + this.blogId
    })
      .then(res => {
        this.blogDetail.blog = res.data[0]
        this.blogDetail.blog.createdTime = format(new Date(this.blogDetail.blog.createdTime), 'yyyy-MM-dd hh:mm', { locale: zhTW })
        this.blogDetail.blog.img = require('@/assets/images/banner/banner-27.jpg')
        this.blogDetail.blog.tags = JSON.parse(res.data[0].tags)
        this.blogDetail.blog.avatar = require('@/assets/images/avatars/' + res.data[0].userId + '-small.png')
        this.blogDetail.blog.comment = 2
      })

    useJwt.getDataset({
      sql: `SELECT comment AS commentText, comments.created_at AS commentedAt, users.id AS userId, users.name AS userFullName
      FROM [laravel_kevin].[dbo].[comments]
      RIGHT JOIN [dbo].[users] ON [comments].[writer] = [users].[id]
      WHERE [blogId]=` + this.blogId
    })
      .then(res => {
        var temp;
        res.data.forEach(element => {
          temp = element
          temp.commentedAt = format(new Date(temp.commentedAt), 'yyyy-MM-dd hh:mm', { locale: zhTW })
          temp.avatar = require('@/assets/images/avatars/' + temp.userId + '-small.png')

          this.blogDetail.comments.push(temp)
        });
      })

    useJwt.getDataset({
      sql: `SELECT blogs.id, title, blogs.created_at AS blogPosted
      FROM [laravel_kevin].[dbo].[blogs]
      RIGHT JOIN [dbo].[users] ON [blogs].[writer] = [users].[id]` })
      .then(res => {
        var temp;
        res.data.forEach(element => {
          temp = element
          temp.blogPosted = format(new Date(temp.blogPosted), 'yyyy-MM-dd hh:mm', { locale: zhTW })
          temp.img = require('@/assets/images/banner/banner-27.jpg')

          this.blogSidebar.recentPosts.push({ id: temp.id, img: temp.img, title: temp.title, createdTime: temp.blogPosted })
        });
      })

    this.blogSidebar.categories = [
      { category: 'Fashion', icon: 'WatchIcon' },
      { category: 'Food', icon: 'ShoppingCartIcon' },
      { category: 'Gaming', icon: 'CommandIcon' },
      { category: 'Quote', icon: 'HashIcon' },
      { category: 'Video', icon: 'VideoIcon' },
    ]

    // this.blogDetail.blog = {
    //   "title": "Mouse, sharply and.",
    //   "content": "Trims his belt and his friends shared their never-ending meal, and the Hatter added as an explanation. 'Oh, you're sure to do with this creature when I find a thing,' said the March Hare. 'Then it.",
    //   "tags": [
    //     "Gaming",
    //     "Video",
    //     "Fashion",
    //     "Test"
    //   ],
    //   "userId": "2",
    //   "userFullName": "kevin",
    //   "createdTime": "2022-12-14 06:38:31.603",
    //   "bookmarked": "8677",
    //   "img": "/images/_/_/_/_/MessagePractise/resources/js/src/assets/images/banner/banner-27.jpg",
    //   "avatar": "/images/_/_/_/_/MessagePractise/resources/js/src/assets/images/avatars/2-small.png",
    //   "comment": 2
    // }

    // this.$http.get('/blog/list/data/detail').then(res => {
    //   this.blogDetail = res.data
    // })
    // this.$http.get('/blog/list/data/sidebar').then(res => {
    //   this.blogSidebar = res.data
    // })
  },
  methods: {
    kFormatter,
    tagsColor(tag) {
      if (tag === 'Quote') return 'light-info'
      if (tag === 'Gaming') return 'light-danger'
      if (tag === 'Fashion') return 'light-primary'
      if (tag === 'Video') return 'light-warning'
      if (tag === 'Food') return 'light-success'
      return 'light-primary'
    },
    postComment() {
      useJwt.postComment({
        comment: document.getElementById("comment-text").value,
        blogId: this.$route.params.id,
      })
        .then(res => {
          alert(res.data)
        })

      document.getElementById("comment-text").value = ''
      // this.$router.push({ name: 'blog-detail', params: { id: this.blogId } })
      // return Redirect::refresh()
    }
  },
}
</script>

<style lang="scss">
@import '~@resources/scss/vue/pages/page-blog.scss';
</style>
