/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import Modal from "@/components/elements/Modal";
import useAxios from "@/hooks/useAxios";
import { IOffers } from "@/types/types";
import RoundedButton from "@/components/elements/RoundedButton";
import OffersItem from "./OffersItem";
import {
  InfiniteData,
  QueryObserverResult,
  RefetchOptions,
} from "@tanstack/react-query";
import { useTranslation } from "react-i18next";

type ConfirmModalProps = {
  isOpen: boolean;
  onClose: () => void;
  item: IOffers | null;
  mode?: "sent" | "received";
  refetch: (
    options?: RefetchOptions
  ) => Promise<QueryObserverResult<InfiniteData<any, unknown>, Error>>;
};

function ConfirmModal({ isOpen, onClose, item, mode = "received", refetch }: ConfirmModalProps) {
  const { t } = useTranslation("common");
  const { request } = useAxios();
  const updateHandler = async (offerId: string | null, action: string) => {
    try {
      await request("POST", "/offers/update-status", {
        offerId,
        action,
      });
      refetch();
      onClose();
    } catch (error: unknown) {
      console.log(error);
    }
  };
  return (
    <Modal height="440px" isOpen={isOpen} onClose={onClose}>
      <div className="flex flex-col items-center gap-6 mt-5">
        {item && <OffersItem item={item} mode={mode} />}
        <div className="grid grid-cols-2 gap-4">
          <RoundedButton
            variant="primary"
            className="mt-4 h-9 w-36"
            onClick={() => {
              updateHandler(item?._id || "", "accept");
            }}
          >
            {t("settings.offers.statusAccepted")}
          </RoundedButton>
          <RoundedButton
            className="mt-4 h-9 w-36"
            onClick={() => {
              updateHandler(item?._id || "", "reject");
            }}
          >
            {t("settings.offers.statusRejected")}
          </RoundedButton>
        </div>
      </div>
    </Modal>
  );
}

export default ConfirmModal;
