<template>

<div class="col-span-5 modal-body flex flex-col">

    <div class="modal-head mb-3 px-2 py-4 md:py-4 md:px-6 flex justify-between items-center border-b border-indigo-100">
        <div class="flex items-center space-x-4">
            <inertia-link :href="route('profile.user', user.username)" class="flex-shrink-0 block">
                <user-avatar  :user='user' size='small' class="w-12 h-12 md:w-16 md:h-16 border-2 border-orange text-lg" />
            </inertia-link>
            <inertia-link :href="route('profile.user', user.username)" class="flex flex-col">
                <p class="text-base md:text-xl font-semibold text-gray">{{user.name}}</p>
                <p class="min-h-[24px]">
                    <span v-show="user.count_posts" class="md:mt-1 text-sm text-gray-light">{{user.count_posts}} {{countPosts}}</span>
                </p>
            </inertia-link>
        </div>
        <div class="text-white">
          <dropdown-menu-point>
                 <MenuItems class="origin-top-right absolute right-0 mt-2 w-64 bg-indigo-200 shadow-lg max-h-60 rounded-md  text-base ring-1 ring-indigo-100 overflow-auto focus:outline-none">
                        <MenuItem v-if="user.id === $page.props.auth.user.id">
                            <button @click="onRemoveFeed()" class="w-full group flex items-center px-4 py-2 text-base hover:bg-indigo-300 text-gray-light">
                                <MinusCircleIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
                                Удалить
                            </button>
                        </MenuItem>
                        <MenuItem v-if="user.id !== $page.props.auth.user.id">
                            <inertia-link :href="route('video.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-300 text-gray-light">
                                <ExclamationIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
                                Пожаловаться
                            </inertia-link>
                        </MenuItem>
                    </MenuItems>
            </dropdown-menu-point>

        </div>
    </div>

    <div data-simplebar class="modal-feed max-h-[29rem] overflow-auto">
        <div class="p-2 md:py-4 md:px-6 space-y-3 md:space-y-6">

            <div v-if="entity.body" class="comment-line comment-line--head flex flex-col text-gray text-sm">
                <div class="flex group">
                    <inertia-link :href="route('profile.user', user.username)" class="flex-shrink-0 block mr-3">
                        <user-avatar :user='user' size='small' class="w-10 h-10 border border-orange text-xs" />
                    </inertia-link>
                    <div>
                        <inertia-link :href="route('profile.user', user.username)" class="font-semibold underline inline-block mr-2">
                            {{user.username}}
                        </inertia-link>
                        {{entity.body}}
                        <div class="transition-opacity opacity-0 group-hover:opacity-100 flex space-x-4">
                            <span class="text-xs text-gray-light">{{entity.created_at_humans}}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div v-for="comment in comments" :key='comment.id' class="comment-line flex flex-col text-gray text-sm">
                <user-comment :creator_id='user.id' :comment='comment' />
            </div>
        </div>
    </div>

    <div class="modal-footer mt-auto p-2 md:py-4 md:px-6 border-t border-indigo-100">

            <feed-paid-block
                @onReplaceFeed='onReplaceFeed'
                :is_paid='entity.is_paid'
                :user_id='user.id'
                :price='entity.price'
                :feed_id='feed_id'
                :paid_open='entity.paid_open'
                class="text-white"
            />

        <div class="misc-info mt-2 md:mt-0 mb-2 flex flex-row-reverse">
            <div class="flex space-x-4">
                <like-count @likeFeed='likeFeed' :likes='entity.likes' :liked='entity.liked' />
                <comment-count :comments='entity.comments' />
                <share-count />
            </div>
            <div class="mr-auto flex text-gray-light">
                <button class="default">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 flex-shrink-0"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
                </button>
            </div>
        </div>
        <div class="modal-send flex">
                <div class="flex-1">
                    <textarea required v-model="new_comment" class="pl-0 pr-2 resize-none bg-indigo-300 w-full  outline-none focus:ring-transparent  focus:border-transparent focus:ring-offset-0 text-base text-gray border-transparent" placeholder="Написать комментарий..."></textarea>
                </div>
                <div class="mt-1 flex-shrink-0 text-pink">
                    <button @click="addComment" class="default">
                        <svg class="w-8 h-8 flex-shrink-0">
                            <use xlink:href="#arrow-circle"></use>
                        </svg>
                    </button>
                </div>
        </div>
    </div>

</div>

</template>

<script>
import { Inertia } from "@inertiajs/inertia";
import axios from "axios";
import helper from "@/includes/helper";
import DropdownMenuPoint from "@/Shared/Form/DropdownMenuPoint";
import { MenuItem, MenuItems } from "@headlessui/vue";
import { MinusCircleIcon, ExclamationIcon } from "@heroicons/vue/solid";
import FeedPaidBlock from "@/Shared/FeedList/FeedPaidBlock";
import UserAvatar from "@/Shared/Misc/UserAvatar";
import LikeCount from "@/Shared/Misc/LikeCount";
import CommentCount from "@/Shared/Misc/CommentCount";
import ShareCount from "@/Shared/Misc/ShareCount";
import UserComment from "@/Shared/Partials/UserComment";
export default {
  components: {
    DropdownMenuPoint,
    MenuItem,
    MenuItems,
    MinusCircleIcon,
    ExclamationIcon,
    UserAvatar,
    LikeCount,
    ShareCount,
    CommentCount,
    UserComment,
    FeedPaidBlock,
  },
  props: {
    user: Object,
    entity: Object,
    feed_id: Number,
  },
  emits: ["disableModal", "onRemoveFeed"],
  data() {
    return {
      new_comment: null,
      comments: [],
    };
  },

  mounted() {
      console.log(this.entity)
    this.loadComments();
    this.loadCountPostsUser();
  },
  unmounted() {
    this.comments = [];
  },
  computed: {
    countPosts() {
      return helper.declNumPosts(this.user.count_posts);
    },
  },
  methods: {

    onReplaceFeed(data) {
          this.entity.collection_medias = data.collection;
          this.entity.preview = data.preview;
          this.entity.paid_open = 1;
    },

    loadCountPostsUser() {
      if (
        typeof this.user.count_posts === "undefined" ||
        parseInt(this.user.count_posts, 10) === 0
      ) {
        axios.post(route("user.posts.count", this.user.id)).then(({ data }) => {
          this.user.count_posts = data;
        });
      }
    },

    onRemoveFeed() {
      this.$emit("onRemoveFeed", this.feed_id);
    },
    loadComments() {
      this.$emit("disableModal", 1);
      axios.post(route("feed.comments", this.feed_id)).then(({ data }) => {
        for (const prop in data) {
          this.comments.push(data[prop]);
        }
        this.$emit("disableModal", 0);
      });
    },

    addComment() {
      this.$emit("disableModal", 1);
      axios
        .post(route("feed.comments.add", this.feed_id), {
          body: this.new_comment,
        })
        .then(({ data }) => {
          this.comments.push(data);
          this.entity.comments++;
          this.$emit("disableModal", 0);
        });
      this.new_comment = null;
    },

    likeFeed() {
      Inertia.post(
        route("feed.like", this.feed_id),
        {},
        {
          preserveScroll: true,
          preserveState: true,
        }
      );
      if (this.entity.liked) {
        this.entity.liked = false;
        this.entity.likes--;
      } else {
        this.entity.liked = true;
        this.entity.likes++;
      }
    },
  },
};
</script>
