"use client";

import Container from "@/components/elements/Container";
import RoundedButton from "@/components/elements/RoundedButton";
import CommentModal from "@/components/settings/offers/CommentModal";
import ConfirmModal from "@/components/settings/offers/ConfirmModal";
import OffersItem from "@/components/settings/offers/OffersItem";
import PageTitle from "@/components/settings/PageTitle";
import UserDetails from "@/components/settings/UserDetails";
import useInfiniteScroll from "@/hooks/useInfiniteScroll";
import { IOffers } from "@/types/types";
import React, { useState } from "react";

function Offers() {
  const [filter, setFilter] = useState<string>("درخواست");
  const [showCommentModal, setShowCommentModal] = useState<boolean>(false);
  const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
  const [itemToAction, setItemToAction] = useState<IOffers | null>(null);

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

  const actionHandler = (item: IOffers) => {
    setItemToAction(item);
    if (filter == "دریافت") {
      setShowConfirmModal(true);
    } else {
      if (item?.status === "accepted") {
        setShowCommentModal(true);
      }
    }
  };

  return (
    <Container>
      <PageTitle>درخواست ها</PageTitle>
      <div className="px-4 text-xs md:text-sm">
        <UserDetails />
        <div className="grid grid-cols-2 w-full gap-4 mx-auto max-w-md mt-8">
          <RoundedButton
            className={`h-9 !border-[#0C8002] ${
              filter == "درخواست" ? "bg-[#0C8002] text-white" : ""
            }`}
            onClick={() => setFilter("درخواست")}
          >
            درخواست
          </RoundedButton>
          <RoundedButton
            className={`h-9 !border-[#FF0000] ${
              filter == "دریافت" ? "bg-[#FF000077] text-white" : ""
            }`}
            onClick={() => setFilter("دریافت")}
          >
            دریافت
          </RoundedButton>
        </div>
        <div className="w-full mt-10">
          {data?.pages.length === 0 ||
          (data?.pages[0]?.offer?.length === 0 && !isFetchingNextPage) ? (
            <p className="text-center text-gray-500">تراکنشی ثبت نشده است.</p>
          ) : (
            data?.pages?.map((page, pageIndex) => (
              <React.Fragment key={pageIndex}>
                {page?.offer?.map((item: IOffers) => (
                  <OffersItem
                    key={item?._id}
                    item={item}
                    actionHandler={actionHandler}
                  />
                ))}
              </React.Fragment>
            ))
          )}
        </div>
      </div>
      {showCommentModal && (
        <CommentModal
          isOpen={showCommentModal}
          onClose={() => setShowCommentModal(false)}
          item={itemToAction}
        />
      )}
      {showConfirmModal && (
        <ConfirmModal
          isOpen={showConfirmModal}
          onClose={() => setShowConfirmModal(false)}
          item={itemToAction}
          refetch={refetch}
        />
      )}
    </Container>
  );
}

export default Offers;
