/* eslint-disable max-lines */
import { useDashboardData } from "api/hooks/dashboard/useDashboardData";
import { useEffect, useState } from "react";
import { isAdminSite } from "utils/appUtils";
import { getColumnTotal } from "utils/helper";

import { rowsPerPageOptions } from "constants/data";
import { SubHeading } from "constants/enums";
import { images } from "constants/images";
import { paymentHistoryColumns } from "pages/bookings/paymentHistoryTable";
import { Box, Card, Loader, IconButton, Image } from "uiCore";
import { DetailsCard } from "uiCore/detailsCard/DetailsCard";

import { excelDownload } from "../downloadList";
import { BookingFilter } from "../Filter";
import { PaymentDetailsDialog } from "../PaymentDetailsModel";
import { BookingTable } from "../Table";
import { useStyle } from "./style";

export interface FilterProps {
  gameId?: string;
  courtId?: string;
  startDate?: string;
  endDate?: string;
  createdEndDate?: string;
  createdStartDate?: string;
}

export interface Props {
  isUpcomingBooking?: boolean;
}

export const ManageBookings = ({ isUpcomingBooking = false }: Props) => {
  const [upcomingLimit, setUpcomingLimit] = useState(10);
  const [bookingHistoryLimit, setBookingHistoryLimit] = useState(10);
  const initialFilterData = {
    page: 1,
    limit: upcomingLimit,
    gameId: "",
    courtId: "",
    startDate: "",
    endDate: "",
    createdEndDate: "",
    createdStartDate: "",
    isClear: false,
    isUpcoming: isUpcomingBooking,
  };

  const [filterData, setFilterData] = useState(initialFilterData);
  const [totalAmount, setTotalAmount] = useState(0);

  const [filterOpen, setFilterOpen] = useState(false);
  const classes = useStyle({ filterOpen });
  const [queryData, setQueryData] = useState(filterData);
  const [openPaymentDetailModal, setOpenPaymentDetailModal] = useState(false);
  const [isFilterApplied, setIsFilterApplied] = useState(false);
  const [selectedOrderId, setSelectedOrderId] = useState("");
  const [isExcelDataLoading, setIsExcelDataLoading] = useState(false);

  const { dashboardData, isDashboardLoading, isDashboardSuccess } =
    useDashboardData(queryData);

  useEffect(() => {
    if (dashboardData?.data?.paymentLogs?.length) {
      const amount = getColumnTotal(dashboardData.data.paymentLogs, "amount");
      setTotalAmount(amount);
    }
  }, [dashboardData]);

  useEffect(() => {
    if (filterData.isClear) {
      isFilterApplied && setQueryData({ ...filterData });
      setFilterData({ ...filterData, isClear: false });
      setIsFilterApplied(false);
    }
  }, [filterData]);

  useEffect(() => {
    setQueryData({
      ...initialFilterData,
      limit: isUpcomingBooking ? upcomingLimit : bookingHistoryLimit,
      isUpcoming: isUpcomingBooking,
    });
    setFilterData(initialFilterData);
  }, [isUpcomingBooking]);

  const handleFilter = () => {
    setFilterOpen(!filterOpen);
  };

  const handleSetFilterData = (filterProps: FilterProps) => {
    setFilterData((prev) => ({
      ...prev,
      ...filterProps,
    }));
  };

  const handleFilterSubmit = () => {
    let dateData = {};
    if (filterData.startDate && !filterData.endDate) {
      dateData = { endDate: filterData.startDate };
    }

    if (filterData.createdStartDate && !filterData.createdEndDate) {
      dateData = { createdEndDate: filterData.createdStartDate };
    }
    setQueryData((prev) => ({
      ...prev,
      ...filterData,
      isUpcoming: isUpcomingBooking,
      ...dateData,
    }));
    setFilterOpen(false);
    setIsFilterApplied(true);
  };
  const handleFilterClear = () => {
    setFilterData({
      ...initialFilterData,
      isClear: true,
      isUpcoming: isUpcomingBooking,
    });
  };

  const handlePageChange = (newPage: number) => {
    setQueryData({ ...queryData, page: newPage + 1 });
  };
  const handlePageSizeChange = (limit: number) => {
    if (queryData.isUpcoming) {
      setUpcomingLimit(limit);
    } else {
      setBookingHistoryLimit(limit);
    }
    setQueryData({ ...queryData, page: 1, limit });
  };

  const closePaymentDetailsDialog = () => {
    setOpenPaymentDetailModal(false);
  };

  const handleExport = async () => {
    const totalCount = isUpcomingBooking
      ? dashboardData?.data?.totalUpcomingBookings
      : dashboardData?.data?.totalBooking;
    if (totalCount && dashboardData?.data?.paymentLogs?.length) {
      try {
        await excelDownload({
          totalCount,
          queryData,
          setIsExcelDataLoading,
        });
      } finally {
        setIsExcelDataLoading(false);
      }
    }
  };

  const {
    courtId,
    createdEndDate,
    createdStartDate,
    endDate,
    gameId,
    startDate,
  } = filterData;

  const buttonDisable =
    !gameId &&
    !courtId &&
    !startDate &&
    !endDate &&
    !createdStartDate &&
    !createdEndDate;

  return (
    <>
      <Box className={classes.topCardsGroup}>
        {!isUpcomingBooking && (
          <>
            <DetailsCard
              label={isAdminSite ? "Total Earnings" : "Total Paid"}
              isLoading={isDashboardLoading}
              data={dashboardData?.data?.totalEarning}
              rupeesIcon
              decimal={2}
              icon={images.totalAmount.default}
            />
            <DetailsCard
              label="Total Bookings"
              isLoading={isDashboardLoading}
              data={dashboardData?.data?.totalBooking}
              icon={images.booking.default}
              isTotalBooking
            />
          </>
        )}
        <DetailsCard
          label="Total Amount"
          isLoading={isDashboardLoading}
          rupeesIcon
          data={
            dashboardData?.data?.paymentLogs.length > 0
              ? Number(totalAmount)
              : 0
          }
          icon={images.totalAmount.default}
          decimal={2}
        />
      </Box>
      <Card
        title={
          isUpcomingBooking
            ? SubHeading.upcomingBookings
            : SubHeading.bookingHistory
        }
        headerActionClassName={classes.DashboardHeaderAction}
        sx={{ boxShadow: 5 }}
        action={
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <IconButton
              onClick={handleExport}
              id="export-image"
              title="Export"
              color="primary"
              disabled={dashboardData?.data?.paymentLogs?.length === 0}
            >
              {isExcelDataLoading ? (
                <Loader size={22} />
              ) : (
                <Image src={images.download.default} />
              )}
            </IconButton>
            {(dashboardData?.data?.paymentLogs?.length > 0 ||
              !buttonDisable) && (
              <IconButton onClick={handleFilter} color="primary" title="Filter">
                <Image
                  src={images.filter.default}
                  className={classes.dashboardFilterIcon}
                />
              </IconButton>
            )}
          </Box>
        }
      >
        <Box className={classes.dashboardMain}>
          <Box className={classes.dashboardCard}>
            <Box className={classes.top}>
              <Box className={classes.dashboardFilter}>
                <Box className={classes.dashboardFilterIconMain}>
                  {filterOpen && (
                    <BookingFilter
                      gameId={filterData.gameId}
                      courtId={filterData.courtId}
                      endDate={filterData.endDate}
                      startDate={filterData.startDate}
                      createdEndDate={filterData.createdEndDate}
                      createdStartDate={filterData.createdStartDate}
                      handleFilterSubmit={handleFilterSubmit}
                      handleFilterClear={handleFilterClear}
                      handleSetFilterData={handleSetFilterData}
                    />
                  )}
                </Box>
              </Box>
            </Box>
            <Box className={classes.bottom}>
              <Box className={classes.tablesection}>
                <BookingTable
                  rowData={dashboardData?.data?.paymentLogs}
                  columns={paymentHistoryColumns(
                    setOpenPaymentDetailModal,
                    setSelectedOrderId,
                    isUpcomingBooking
                  )}
                  page={queryData.page - 1}
                  rowCount={
                    queryData.isUpcoming
                      ? dashboardData?.data?.totalUpcomingBookings
                      : dashboardData?.data?.totalBooking
                  }
                  pageSize={queryData.limit}
                  onPageSizeChange={handlePageSizeChange}
                  onPageChange={handlePageChange}
                  rowsPerPageOptions={rowsPerPageOptions}
                  loading={isDashboardLoading || !isDashboardSuccess}
                />
              </Box>
            </Box>
          </Box>
        </Box>
      </Card>
      <PaymentDetailsDialog
        closePaymentDetailsDialog={closePaymentDetailsDialog}
        openPaymentDetailModal={openPaymentDetailModal}
        selectedOrderId={selectedOrderId}
      />
    </>
  );
};