<template>
  <meta-head title="Покупки"></meta-head>

  <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="feedLists.length" class="m-4 lg:m-8 grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-2 lg:gap-4">
            <InfinityScroll :node-element="lastNodeLement" :next-cursor="nextCursor"
                            @fromPagination="putFromPagination"
            >
              <div v-for="feed in feedLists" :key="feed.id"
                   :ref="el => { if (el && feed.id === lastElementID) lastNodeLement = el }"
              >
                <inertia-link :href="route('setting.show.purchases', feed.id)" class="block contain relative overflow-hidden">
                  <feed-header-misc :count="1" :type="feed.type" />
                  <div>
                    <feed-preview class="w-full h-36 md:h-72 object-cover" :type="feed.type"
                                  :source="feed.preview"
                    />
                  </div>
                  <p class="mt-2 text-gray-light text-sm">
                    Цена: {{ feed.price }}
                  </p>
                  <p class="mt-2 text-gray-light text-sm">
                    Дата покупки: {{ feed.purchase_date }}
                  </p>
                </inertia-link>
              </div>
            </InfinityScroll>
          </div>
          <div v-else class="m-4 lg:m-8 text-lg text-gray-light">
            Вы еще не совершали покупки
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

import Layout from '@/Shared/Layout.vue'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import FeedHeaderMisc from '@/Shared/Feed/HeaderMisc.vue'
import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
import InfinityScroll from '@/Shared/Misc/InfinityScroll.vue'

export default {
    components: {
        MetaHead,
        SettingsMenu,
        FeedHeaderMisc,
        FeedPreview,
        InfinityScroll,
    },
    layout: Layout,
    props: {
        nextCursor: String,
        feeds: Array,
    },

    setup() {
        const containerRef = ref(null)
        return {
            lastNodeLement: containerRef,
        }
    },
    data() {
        return {
            feedLists: [],
        }
    },

    computed: {
        lastElementID() {
            return this.feedLists[this.feedLists.length - 1]?.id
        },
    },
    mounted() {
        this.feedLists = this.feeds
    },

    methods: {
        putFromPagination(lists) {
            for (let list of lists) {
                this.feedLists.push(list)
            }
        },
    },
}
</script>
