/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react/no-array-index-key */

import { useEffect, useState } from "react";

import { Button } from "@/components/ui/button/button";
import { Skeleton } from "@/components/ui/skeleton/skeleton";
import BookingRequestListItem from "@/features/demand/components/demand-list/components/booking-request-list-item";
import FlightRequestListItem from "@/features/demand/components/demand-list/components/flight-request-list-item";
import RentACarRequestListItem from "@/features/demand/components/demand-list/components/rent-a-car-request-list-item";
import TransferRequestListItem from "@/features/demand/components/demand-list/components/transfer-request-list-item";
import { useBookingRequestsMutation } from "@/services/eva-display/booking-request/booking-request.service";

interface BookingRequestListDataProps {
  moduleName?: "HotelModule" | "FlightModule" | "CarRentalModule";
  status?: null | string;
  query?: string;
  isOnlyCurrentUser?: boolean;
}

const BookingRequestListData = (props: BookingRequestListDataProps) => {
  const bookingRequestQuery = useBookingRequestsMutation();
  const [page, setPage] = useState(1);

  function getData() {
    bookingRequestQuery.mutate({
      filter: {
        ModuleName: props.moduleName ?? undefined,
        RequestStatus: props.status ?? undefined,
        OnlyCurrentUser: props.isOnlyCurrentUser ?? undefined,
        SearchTerm: props.query ?? undefined,
      },
      pagination: {
        pageNumber: page,
        pageSize: 10,
      },
      sort: {
        sortColumn: "Id",
      },
    });
  }

  useEffect(() => {
    getData();
  }, [page]);

  useEffect(() => {
    if (page === 1) {
      getData();
    } else {
      setPage(1);
    }
  }, [props.moduleName, props.status, props.isOnlyCurrentUser, props.query]);

  const items = bookingRequestQuery.data?.items || [];

  if (!bookingRequestQuery.isSuccess) {
    return (
      <div>
        {Array(10)
          .fill(10)
          .map((_, i) => (
            <Skeleton className="mb-6 h-[200px] w-full" key={i} />
          ))}
      </div>
    );
  }

  if (bookingRequestQuery.data?.items.length === 0) {
    return <div className="text-center">Kayıt bulunamadı</div>;
  }

  const lastPage = Math.ceil(
    bookingRequestQuery.data.pagination.recordsFiltered / 10,
  );

  return (
    <div className="pb-20">
      {items.map((item: any) => {
        const moduleType = item.moduleName;
        if (moduleType === "Hotel") {
          return <BookingRequestListItem item={item} key={item.id} />;
        }
        if (moduleType === "Flight") {
          return <FlightRequestListItem item={item} key={item.id} />;
        }
        if (moduleType === "CarRental") {
          return <RentACarRequestListItem item={item} key={item.id} />;
        }
        return <TransferRequestListItem item={item} key={item.id} />;
      })}

      <div className="mt-10 flex w-full items-center justify-between text-gray-500">
        <div className="min-w-[85px]">
          {page > 1 && (
            <Button
              variant="outline"
              onClick={() => {
                setPage(page - 1);
                window.scrollTo({ top: 0, behavior: "instant" });
              }}
            >
              Önceki
            </Button>
          )}
        </div>
        <div className="flex items-center gap-3 text-sm">
          <span>{page}</span>
          <span>/</span>
          <span>{lastPage}</span>
        </div>
        <div className="min-w-[85px]">
          {page < lastPage && (
            <Button
              variant="outline"
              onClick={() => {
                setPage(page + 1);
                window.scrollTo({ top: 0, behavior: "instant" });
              }}
            >
              Sonraki
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};

export default BookingRequestListData;