//
<template>
    <div class="card mt-3">
        <div class="card-body">
            <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <input
                    v-model="data.comment.username"
                    placeholder="Username" 
                    type="text" 
                    class="form-control" 
                    id="username">
            </div>
            <div class="mb-3">
                <label for="body" class="form-label">Post</label>
                <textarea 
                    v-model="data.comment.body"
                    placeholder="Post" 
                    rows="3" 
                    cols="50" class="form-control" id="body"></textarea>
            </div>
            <div class="mb-3">
                <button 
                    @click.prevent="storeComment"
                    :disabled="!data.comment.username || !data.comment.body"
                    type="submit" class="btn btn-sm btn-primary">Submit</button>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive } from 'vue'
    import moment from 'moment';
    import { v4 as uuidv4 } from 'uuid';

    //set data
    const data = reactive({
      comment: {
        username: '',
        body: ''
      }
    });

    //emit events
    const emit = defineEmits(['commentAdded']);

    //store comment
    const storeComment = () => {
        const comment = data.comment;
        comment.id = uuidv4();
        comment.time = moment().format('MMMM Do YYYY, h:mm:ss a');
        emit('commentAdded',comment);
        data.comment = {
            username: '',
            body: ''
        };
    };
</script>

<style>
</style>
                                                    
                                                

                                                        
                                                            //
<template>
    <div class="card bg-dark text-white my-2">
        <div class="card-body d-flex flex-column p-2">
            <span>
                <i class="bi bi-person"></i> {{ comment.username }}
            </span>
            <span>
                <i class="bi bi-alarm"></i> {{ comment.time }}
            </span>
            <p class="lead">
                {{ comment.body }}
            </p>
        </div>
    </div>
</template>

<script setup>
    //define props
    const props = defineProps({
        comment: {
            type: Object,
            required: true
        }
    });
</script>

<style>
</style>
                                                        
                                                    

                                                        
                                                            //
<template>
    <div>
        <div class="card mb-2">
            <div class="card-body">
                {{ post.body }}
            </div>
            <div class="card-footer bg-white d-flex justify-content-between align-items-center">
                <span>
                    <i class="bi bi-person"></i> {{ post.username }}
                </span>
                <span @click="storeLike" style="cursor: pointer">
                    <i class="bi bi-heart"></i> {{ getPostLikes(post.id) }}
                </span>
                <span>
                    <i class="bi bi-chat"></i> {{ getPostcomments(post.id).length }}
                </span>
                <span>
                    <i class="bi bi-alarm"></i> {{ post.time }}
                </span>
            </div>
        </div>
        <Comments 
            v-for="comment in getPostcomments(post.id)"
            :key="comment.id"
            :comment="comment"
        />
        <AddComment @commentAdded="commentAdded"/>
    </div>
</template>

<script setup>
    import { useRoute } from 'vue-router'
    import { useLikeStore } from '../stores/useLikeStore'
    import { usePostStore } from '../stores/usePostStore'
    import { useCommentStore } from '../stores/useCommentStore'
    import { v4 as uuidv4 } from 'uuid';
    import AddComment from './AddComment.vue'
    import Comments from './Comments.vue'

    //get like store
    const { addLike, getPostLikes } = useLikeStore();
    //get post store
    const { getPost } = usePostStore();
    //get comment store
    const { addComment, getPostcomments } = useCommentStore();

    //get route params 
    const { params } = useRoute();


    //store like
    const storeLike = () => {
        const like = {
            id: uuidv4(),
            post_id: params.id
        }
        addLike(like);
    }

    //get post
    const post = getPost(params.id);


    //add comment
    const commentAdded = (comment) => {
        comment.post_id = post.id;
        addComment(comment);
    }
</script>

<style>

</style>
                                                        
                                                    

                                                        
                                                            //
<template>
  <div class="row">
    <div class="col-md-8 mx-auto">
      <Form></Form>
      <Posts></Posts>
    </div>
  </div>
</template>

<script setup>
  import Form from './Form.vue'
  import Posts from './Posts.vue'
</script>
                                                        
                                                    

                                                        
                                                            //
<template>
  <div class="container">
    <div class="row my-3">
      <div class="col-md-10 mx-auto">
        <Header></Header>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
  import Header from './components/Header.vue'
</script>


<style>
</style>