<template>
    <div>
        <section class="mx-auto max-w-6xl py-5">
            <div class="flex flex-col">
                <div
                    class="flex flex-col md:flex-row justify-center items-center"
                >
                    <div
                        class="transition-all ease-in-out duration-1000 flex flex-col justify-center"
                    >
                        <div slot="middle-right" class="max-w-xs">
                            <div class="flex flex-col justify-center h-48 p-3">
                                <div
                                    class="flex flex-col items-center  shadow hover:shadow-lg rounded-lg p-3"
                                >
                                    <img :src="source.logo" class="h-16 w-16" />
                                    <div
                                        class="text-3xl font-bold text-gray-800 text-center MvAamu mt-2"
                                    >
                                        {{ source.name }}
                                    </div>
                                </div>

                                <div
                                    class="text-sm my-3 MvTyper text-center leading-6"
                                    style="direction:rtl;"
                                >
                                    {{ source.name }} ނޫހުން ޝާޢިޢުކޮއްފައިވާ
                                    ލިޔުންތަށް
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="grid grid-cols-2 sm:grid-cols-3  md:grid-cols-4 gap-2 mb-10 mt-8"
                >
                    <div
                        v-for="article in articles"
                        :key="article.id"
                        class="transition-all ease-in-out duration-1000 flex  flex-col justify-center mr-0 md:mr-2"
                    >
                        <div slot="bottom-left" class="max-w-xs">
                            <div class="p-5 shadow-md m-2 mt-4">
                                <a :href="'/article/' + article.id">
                                    <img
                                        class="object-scale-down h-30"
                                        :src="article.featured_image"
                                        :alt="article.meta['title']"
                                    />
                                </a>

                                <div
                                    class="text-xs font-bold uppercase text-gray-500 text-right mt-1 mb-2 MvTyper"
                                >
                                    {{ article.source.name }}
                                </div>
                                <p
                                    class="font-semibold text-gray-400 text-xs MvTyper"
                                    style="direction: rtl;"
                                >
                                    {{ article.published_date | dhivehiDate }}
                                </p>

                                <a :href="'/article/' + article.id">
                                    <div
                                        class="text-md font-bold leading-7 mb-2 mt-1 text-gray-800 MvTyper text-right hover:underline"
                                    >
                                        {{ article.title }}
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-center">
                <div v-show="loading">
                    <lottie-player
                        src="https://assets9.lottiefiles.com/private_files/lf30_bIUWq7.json"
                        background="transparent"
                        speed="3"
                        style="width: 100px; height: 100px;"
                        loop
                        autoplay
                    ></lottie-player>
                </div>

                <button
                    v-show="loading == 0"
                    v-if="moreArticles"
                    @click="fetchNewArticles()"
                    class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium"
                >
                    {{ loading ? "Loading...." : "Show more" }}
                </button>
            </div>
        </section>
    </div>
</template>

<script>
import * as moment from "moment";

export default {
    props: {
        source: Object
    },
    name: "source-view",

    data() {
        return {
            articles: [],
            current_page: 0,
            totalCount: {
                count: 0
            },
            loading: 0
        };
    },

    mounted() {
        axios.get(`/api/source/${this.source.slug}`).then(response => {
            this.current_page = response.data.articles.current_page;
            this.totalCount.count = response.data.articles.total;
            this.articles = response.data.articles.data;
        });
    },

    computed: {
        moreArticles() {
            //Calculating if there is any more articles
            return this.articles.length < this.totalCount.count;
        }
    },

    filters: {
        dhivehiDate: function(date) {
            if (!date) return "";
            moment.locale("dv");
            return moment(date).format("Do MMMM YYYY  h:mm");
        }
    },

    methods: {
        fetchNewArticles() {
            this.loading = true;
            sleep(2000).then(() => {
                axios
                    .get(
                        `/api/source/${this.source.slug}?page=${this
                            .current_page + 1}`
                    )
                    .then(response => {
                        this.current_page = response.data.articles.current_page;
                        // spread the array item into individual arguments
                        this.articles.push(...response.data.articles.data);
                        this.loading = false;
                    });
            });
        }
    }
};
</script>
