'use client'
import React, { useState, useEffect } from 'react'
import Layout from '../layout/Layout'
import Breadcrumb from '../breadcrumb/Breadcrumb'
import { useRouter } from 'next/router'
import CommonCardSkeleton from '../skeletons/CommonCardSkeleton'
import NewsCard from '../commonComponents/commonCards/NewsCard'
import { useSelector } from 'react-redux'
import { settingsSelector } from '../store/reducers/settingsReducer'
import { useGetRelatedNews } from '@/hooks/queries/useGetRelatedNews'
import { currentLanguageSelector } from '../store/reducers/languageReducer'
import { translate } from '@/utils/translation';
import LoadMoreBtn from '../commonComponents/loadermoreBtn/LoadmoreBtn'
import NoDataFound from '../commonComponents/NoDataFound'

const AllRelatedNews = () => {

    const settingsData = useSelector(settingsSelector)
    const storedLatitude = settingsData?.lat;
    const storedLongitude = settingsData?.long;

    const currentLanguage = useSelector(currentLanguageSelector)
    const router = useRouter()
    const slug = router?.query?.slug;

    const dataPerPage = 8;
    const [loadMore, setLoadMore] = useState(false)
    const [viewAllData, setViewAllData] = useState([])
    const [offset, setOffset] = useState(0)
    const [totalData, setTotalData] = useState('')

    const { data: relatedNewsQueryData, isLoading, isFetching, isError, error } = useGetRelatedNews({
        language_code: currentLanguage?.code,
        category_slug: slug,
        offset: offset * dataPerPage,
        limit: dataPerPage,
        latitude: storedLatitude,
        longitude: storedLongitude,
    });

    useEffect(() => {
        if (isError) {
            setViewAllData([])
            console.log('relatedNews err =>', error?.message)
            return;
        }
        if (!relatedNewsQueryData) return;
        const items = relatedNewsQueryData?.data?.data
            ? [...relatedNewsQueryData.data.data].sort((a, b) => new Date(b.date) - new Date(a.date))
            : [];
        setTotalData(relatedNewsQueryData?.data?.total)
        if (loadMore) {
            setViewAllData((prev) => [...prev, ...items])
        } else {
            setViewAllData(items)
        }
    }, [relatedNewsQueryData, isError]);

    const handleLoadMore = () => {
        setLoadMore(true)
        setOffset((prev) => prev + 1)
    }

    return (
        <Layout>
            <>
                <Breadcrumb secondElement={translate('related-news')} thirdElement={slug} />

                <section className='categoryNews container mt-8 md:mt-12'>
                    {
                        isLoading && !loadMore ? <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 gap-y-10'>
                            {[...Array(4)].map((_, index) => (
                                <div key={index}>
                                    <CommonCardSkeleton />
                                </div>
                            ))}
                        </div>
                            :
                            viewAllData && viewAllData?.length > 0 ? <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 gap-y-10'>
                                {
                                    viewAllData?.map((element) => {
                                        return <NewsCard element={element} />
                                    })
                                }
                            </div> :
                                <>
                                    <NoDataFound />
                                </>
                    }
                    <div className='mt-12'>
                        {totalData > dataPerPage && totalData !== viewAllData?.length ? (
                            <LoadMoreBtn handleLoadMore={handleLoadMore} loadMoreLoading={isFetching && loadMore} />
                        ) : null}
                    </div>
                </section>
            </>
        </Layout>
    )
}

export default AllRelatedNews