<template>
  <div class="feed-header flex items-center justify-between" @click.stop="">
    <div v-if="entity.is_ads" class="flex items-center gap-3">
      <user-avatar :user="user" size="small"
                   class="w-10 h-10 md:w-14 md:h-14 text-lg"
      />
      <div class="flex flex-col">
        <span class="text-sm md:text-base block font-medium text-white">{{ user.name }}</span>
      </div>
    </div>
    <div v-else class="flex items-center">
      <inertia-link :href="route('profile.user', user.username)" class="flex-shrink-0 block mr-2 md:mr-4">
        <user-avatar :user="user" size="small"
                     class="w-10 h-10 md:w-14 md:h-14 text-lg"
        />
      </inertia-link>
      <inertia-link :href="route('profile.user', user.username)" class="flex flex-col">
        <span class="hover:underline text-sm md:text-base block font-medium text-white">{{ user.name }}</span>
        <span class="hover:underline text-xs text-gray-light">{{ created_at }}</span>
      </inertia-link>
    </div>
    <div v-if="entity.is_ads == false" class="flex-shrink-0 text-white">
      <dropdown-menu-point>
        <MenuItems class="origin-top-right absolute right-0 mt-2 w-64 bg-indigo-300 shadow-lg max-h-60 rounded-md  text-base ring-1 ring-indigo-200 overflow-auto focus:outline-none">
          <MenuItem v-if="user.id === $page.props.auth.user.id">
            <inertia-link :href="route(`${entity.type}.edit`, entity.slug)" class="w-full group flex items-center px-4 py-2 text-base hover:bg-indigo-100 text-gray-light">
              <PencilAltIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
              Редактировать
            </inertia-link>
          </MenuItem>

          <MenuItem v-if="user.id === $page.props.auth.user.id">
            <button class="w-full group flex items-center px-4 py-2 text-base hover:bg-indigo-100 text-gray-light" @click="onRemoveFeed()">
              <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('complaint.reason', feed_id)" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-100 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>
</template>

<script>
import { MenuItem, MenuItems } from '@headlessui/vue'
import { MinusCircleIcon, ExclamationIcon, PencilAltIcon } from '@heroicons/vue/solid'

import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
import DropdownMenuPoint from '@/Shared/Form/DropdownMenuPoint.vue'

export default {
    components: {
        UserAvatar,
        DropdownMenuPoint,
        MinusCircleIcon,
        ExclamationIcon,
        PencilAltIcon,
        MenuItem,
        MenuItems,
    },
    props: {
        user: Object,
        created_at: String,
        feed_id: Number,
        entity: Object,
    },
    emits: ['onRemoveFeed'],
    methods: {
        onRemoveFeed() {
            this.$emit('onRemoveFeed')
        },
    },
}
</script>
