<template>
  <meta-head title="Оповещения"></meta-head>

  <modal-feed
    :modal-feed="modalFeed"
    :is_exist_menu="false"
    :open="show"
    @close-modal="closeModal"
  />

  <div class="xl:container xl:mx-auto px-2 md:px-3">
    <div class="mt-16 shadow-classic rounded-md bg-indigo-200">
      <div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
        <settings-menu />

        <div class="col-span-4">
          <div v-if="notifications.length" data-simplebar
               class="max-h-[500px] overflow-auto my-4 lg:my-8"
          >
            <div class="divide-y divide-indigo-300">
              <div v-for="notification in notifications" :key="notification.id"
                   class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4"
              >
                <div class="col-span-4 flex items-center">
                  <inertia-link :href="route('profile.user', notification.user.username)" class="flex-shrink-0 block mr-5">
                    <user-avatar :user="notification.user" size="small"
                                 class="w-14 h-14 md:w-20 md:h-20 text-xl"
                    />
                  </inertia-link>
                  <inertia-link :href="route('profile.user', notification.user.username)" class="flex flex-col">
                    <p class="truncate text-base lg:text-lg font-semibold text-orange">
                      {{ notification.user.name }}
                    </p>
                    <p class="truncate lg:mt-1 text-base text-gray-light">
                      {{ notification.created_at }}
                    </p>
                  </inertia-link>
                </div>
                <div class="col-span-6 text-white xl:text-xl">
                  <notify-text
                    :type="notification.type"
                    :content="notification.data"
                  />
                </div>
                <div v-if="notification.feed" class="col-span-2 flex lg:justify-end">
                  <feed-preview class="w-20 h-20 object-cover cursor-pointer"
                                :type="notification.feed.type"
                                :source="notification.feed.entity.preview"
                                @click="openModal(notification.feed)"
                  />
                </div>
              </div>
            </div>
          </div>
          <div v-else class="m-4 lg:m-8 text-lg text-gray-light">
            Оповещений нет
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Layout from '@/Shared/Layout.vue'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import ModalFeed from '@/Shared/Overlay/ModalFeed.vue'
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
import NotifyText from '@/Shared/Notification/NotifyText.vue'

export default {
    components: {
        MetaHead,
        SettingsMenu,
        ModalFeed,
        UserAvatar,
        FeedPreview,
        NotifyText,
    },
    layout: Layout,

    props: {
        notifications: Array,
    },

    data() {
        return {
            show: false,
            modalFeed: {},
        }
    },

    methods: {
        openModal(feed) {
            this.show = true
            this.modalFeed = feed
        },
        closeModal() {
            this.show = false
        },
    },
}
</script>
