"use client";

import Container from "@/components/elements/Container";
import RoundedButton from "@/components/elements/RoundedButton";
import GiftItem from "@/components/settings/gifts/GiftItem";
import GiftReplyModal from "@/components/settings/gifts/GiftReplyModal";
import PageTitle from "@/components/settings/PageTitle";
import UserDetails from "@/components/settings/UserDetails";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import useInfiniteScroll from "@/hooks/useInfiniteScroll";
import { IGift } from "@/types/types";
import React, { useState } from "react";
import { toggleBtnClass } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";

const FILTER_SENT = "sent";
const FILTER_RECEIVED = "received";

function GiftsPage() {
  const { t } = useTranslation("common");
  const [filter, setFilter] = useState<string>(FILTER_SENT);
  const [showReplyModal, setShowReplyModal] = useState(false);
  const [itemToReply, setItemToReply] = useState<IGift | null>(null);

  const { data, isFetchingNextPage, refetch } = useInfiniteScroll({
    endpoint: "/gifts",
    queryKey: ["gifts", filter],
    params: { filter },
  });

  const actionHandler = (item: IGift) => {
    if (filter === FILTER_RECEIVED) {
      setItemToReply(item);
      setShowReplyModal(true);
    }
  };

  return (
    <LocalePageShell>
      <Container>
        <PageTitle>{t("settings.gifts.title")}</PageTitle>
        <div className="text-xs md:text-sm">
          <UserDetails />
          <div className="mx-auto mt-8 grid w-full max-w-md grid-cols-2 gap-4">
            <RoundedButton
              className={cn(toggleBtnClass(filter === FILTER_SENT), "h-9")}
              onClick={() => setFilter(FILTER_SENT)}
            >
              {t("settings.gifts.given")}
            </RoundedButton>
            <RoundedButton
              className={cn(toggleBtnClass(filter === FILTER_RECEIVED), "h-9")}
              onClick={() => setFilter(FILTER_RECEIVED)}
            >
              {t("settings.gifts.received")}
            </RoundedButton>
          </div>
          <div className="mt-10 w-full">
            {data?.pages.length === 0 ||
            (data?.pages[0]?.gifts?.length === 0 && !isFetchingNextPage) ? (
              <p className="text-center text-gray-500">
                {t("settings.gifts.empty")}
              </p>
            ) : (
              data?.pages?.map((page, pageIndex) => (
                <React.Fragment key={pageIndex}>
                  {page?.gifts?.map((item: IGift) => (
                    <GiftItem
                      key={item?._id}
                      item={item}
                      mode={filter === FILTER_RECEIVED ? "received" : "sent"}
                      actionHandler={actionHandler}
                    />
                  ))}
                </React.Fragment>
              ))
            )}
          </div>
        </div>
        <GiftReplyModal
          isOpen={showReplyModal}
          onClose={() => setShowReplyModal(false)}
          item={itemToReply}
          onReplied={() => void refetch()}
        />
      </Container>
    </LocalePageShell>
  );
}

export default GiftsPage;
