"use client"

import { trpc } from "@/lib/trpc/client"
import { Reward } from "@/server/routers/contentstack/reward/output"

import Image from "@/components/Image"
import LoadingSpinner from "@/components/LoadingSpinner"
import Grids from "@/components/TempDesignSystem/Grids"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"

import Redeem from "./Redeem"

import styles from "./current.module.css"

import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"

export default function ClientCurrentRewards({
  initialCurrentRewards,
  showRedeem,
}: CurrentRewardsClientProps) {
  const lang = useLang()
  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
    trpc.contentstack.rewards.current.useInfiniteQuery(
      {
        limit: 3,
        lang,
      },
      {
        getNextPageParam: (lastPage) => lastPage?.nextCursor,
        initialData: {
          pageParams: [undefined, 1],
          pages: [initialCurrentRewards],
        },
      }
    )
  function loadMoreData() {
    if (hasNextPage) {
      fetchNextPage()
    }
  }
  const filteredRewards = data?.pages.filter((page) => page?.rewards) ?? []
  const rewards = filteredRewards
    .flatMap((page) => page?.rewards)
    .filter((reward): reward is Reward => !!reward)

  if (isLoading) {
    return <LoadingSpinner />
  }

  if (!rewards.length) {
    return null
  }

  return (
    <div>
      <Grids.Stackable>
        {rewards.map((reward, idx) => (
          <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
            <div className={styles.content}>
              <Image
                src="/_static/img/loyalty-award.png"
                width={113}
                height={125}
                alt={reward.label || ""}
              />
              <Title
                as="h4"
                level="h3"
                textAlign="center"
                textTransform="regular"
              >
                {reward.label}
              </Title>
            </div>
            {showRedeem && (
              <div className={styles.btnContainer}>
                <Redeem reward={reward} />
              </div>
            )}
          </article>
        ))}
      </Grids.Stackable>
      {hasNextPage &&
        (isFetching ? (
          <LoadingSpinner />
        ) : (
          <ShowMoreButton loadMoreData={loadMoreData} />
        ))}
    </div>
  )
}