'use client'
import React, { useEffect, useState } from 'react'
import Layout from '../../layout/Layout'
import Breadcrumb from '../../breadcrumb/Breadcrumb'
import { translate } from '@/utils/translation'
import { EpisodeCard } from '../../commonComponents/commonCards/EpisodeCard'
import Link from 'next/link'
import { currentLangCode, isLogin } from '@/utils/helpers'
import { useGetPodcasts } from '@/hooks/queries/podcast/useGetPodcasts'
import LoadMoreBtn from '../../commonComponents/loadermoreBtn/LoadmoreBtn'
import { AiOutlineSearch } from 'react-icons/ai'
import { EpisodeCardSkeleton } from '@/components/skeletons/podcast/EpisodeCardSkeleton'
import NoDataFound from '@/components/commonComponents/NoDataFound'
import { useGetMyEpisodes } from '@/hooks/queries/podcast/useGetMyEpisodes'
import { setLoginModalState } from '@/components/store/reducers/helperReducer'
import toast from 'react-hot-toast'

const Podcast = () => {

    const langCode = currentLangCode()

    const dataPerPage = 6;

    const [loadMore, setLoadMore] = useState(false)
    const [data, setData] = useState([])
    const [offset, setOffset] = useState(0)
    const [totalData, setTotalData] = useState('')

    const [searchValue, setSearchValue] = useState(null)
    const [debouncedSearch, setDebouncedSearch] = useState(null)

    const [activeTab, setActiveTab] = useState(0)

    const tabs = [
        {
            id: 0,
            label: translate('allLbl'),
            type: 'all',
        },
        {
            id: 1,
            label: translate('history'),
            type: 'history',
        },
        {
            id: 2,
            label: translate('bookmark'),
            type: 'bookmark',
        },
    ]

    useEffect(() => {
        const timeout = setTimeout(() => {
            setDebouncedSearch(searchValue)
        }, 500);
        return () => clearTimeout(timeout)
    }, [searchValue]);

    useEffect(() => {
        setLoadMore(false)
        setOffset(0)
        setData([])
    }, [activeTab, debouncedSearch]);

    const activeTabType = tabs.find((tab) => tab.id === activeTab)?.type
    const isEpisodesTab = activeTabType === 'history' || activeTabType === 'bookmark'

    const { data: podcastsQueryData, isLoading: isPodcastsLoading, isFetching: isPodcastsFetching, isError: isPodcastsError, error: podcastsError } = useGetPodcasts({
        type: activeTabType,
        search: debouncedSearch,
        offset: offset * dataPerPage,
        limit: dataPerPage,
        enabled: !isEpisodesTab,
    });

    const { data: episodesQueryData, isLoading: isEpisodesLoading, isFetching: isEpisodesFetching, isError: isEpisodesError, error: episodesError } = useGetMyEpisodes({
        type: activeTabType,
        offset: offset * dataPerPage,
        limit: dataPerPage,
        enabled: isEpisodesTab,
    });

    const queryData = isEpisodesTab ? episodesQueryData : podcastsQueryData
    const isLoading = isEpisodesTab ? isEpisodesLoading : isPodcastsLoading
    const isFetching = isEpisodesTab ? isEpisodesFetching : isPodcastsFetching
    const isError = isEpisodesTab ? isEpisodesError : isPodcastsError
    const error = isEpisodesTab ? episodesError : podcastsError

    useEffect(() => {
        if (isError) {
            setData([])
            console.log('podcasts err =>', error?.message)
            return;
        }
        if (!queryData) return;
        const items = isEpisodesTab ? queryData?.data?.episodes : queryData?.data?.data;
        setTotalData(isEpisodesTab ? queryData?.data?.episode_count : queryData?.data?.total)
        if (loadMore) {
            setData((prev) => [...prev, ...(items ?? [])])
        } else {
            setData(items ?? [])
        }
    }, [queryData, isError]);

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

    const handleTabChange = (id) => {
        if (id === 0) {
            setActiveTab(id)
        }
        else {
            if (isLogin()) {
                setActiveTab(id)
            }
            else {
                setLoginModalState({ openModal: true })
                toast.error(translate('loginFirst'))
                setTimeout(() => {
                    setLoginModalState({ openModal: false })
                }, 2000)
                return false
            }
        }

    }

    return (
        <Layout>
            <Breadcrumb secondElement={translate('podcast')} />
            <section className='container commonMT'>

                <div className='flex items-center justify-between md:hidden w-full p-2 sm:p-3 border borderColor rounded-[8px] bg-white dark:secondaryBg'>
                    <input type="text" placeholder={translate('searchPodcast')} className='max-[360px]:w-[150px] w-full !text-black focus:outline-none text-[18px] bg-transparent' onChange={(e) => setSearchValue(e.target.value)} />
                    <button aria-label="Search" className='!primaryColor'><AiOutlineSearch size={23} /></button>
                </div>

                <div className='flex items-center bg-white dark:secondaryBg rounded-2xl p-3 border border-[#EFEFEF] dark:borderColor gap-3 overflow-x-auto customScrollbar commonMT'>
                    <div className="grid grid-rows-1 grid-flow-col gap-3 w-fit">
                        {
                            tabs?.map((tab) => {
                                return <div key={tab?.id} className={`w-28 md:w-[200px] rounded-[8px] p-3 flexCenter font-bold cursor-pointer ${tab.id === activeTab ? 'secondaryBg dark:bodyBgColor text-white' : 'opacity-70'}`}
                                    onClick={() => handleTabChange(tab?.id)}
                                >
                                    {tab?.label}
                                </div>
                            })
                        }
                    </div>

                    {
                        !isEpisodesTab &&
                        <div className='hidden md:flex items-center justify-between w-full p-2 sm:p-3 border borderColor rounded-[8px] bg-white dark:secondaryBg'>
                            <input type="text" placeholder={translate('searchPodcast')} className='max-[360px]:w-[150px] w-full focus:outline-none text-[18px] bg-transparent' onChange={(e) => setSearchValue(e.target.value)} />
                            <button aria-label="Search" className='!primaryColor'><AiOutlineSearch size={23} /></button>
                        </div>
                    }

                </div>
                <div className='grid md:grid-cols-2 lg:grid-cols-3 gap-6 commonMT'>
                    {
                        isLoading && !loadMore ?
                            Array.from({ length: dataPerPage })?.map((_, index) => (
                                <EpisodeCardSkeleton podcastCard={true} key={index} />
                            ))
                            :
                            data?.map((item) => (
                                <Link
                                    key={item?.id}
                                    href={
                                        isEpisodesTab
                                            ? `/${langCode}/podcast/${item?.podcast?.slug}/${item?.slug}`
                                            : `/${langCode}/podcast/${item?.slug}`
                                    }
                                >
                                    <EpisodeCard
                                        podcastCard={!isEpisodesTab}
                                        data={item}
                                        myEpisodesCard={isEpisodesTab}
                                    />
                                </Link>
                            ))
                    }
                </div>

                {
                    !isLoading && data?.length < 1 &&
                    <div>
                        <NoDataFound />
                    </div>
                }
                <div className='mt-12'>
                    {totalData > dataPerPage && totalData !== data?.length && data?.length > 0 ? (
                        <LoadMoreBtn handleLoadMore={handleLoadMore} loadMoreLoading={isFetching && loadMore} />
                    ) : null}
                </div>
            </section>
        </Layout>
    )
}

export default Podcast