import { jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { Box, Button, CircularProgress, Stack, Typography } from "@mui/material";
import { useInfiniteScroll } from "ahooks";
import TxLink from "../../components/blockchain/tx.js";
import Status from "../../components/status.js";
import api from "../../libs/api.js";
import { formatBNStr, formatToDate, getPaymentIntentStatusColor } from "../../libs/util.js";
const groupByDate = (items) => {
  const grouped = {};
  items.forEach((item) => {
    const date = new Date(item.created_at).toLocaleDateString();
    if (!grouped[date]) {
      grouped[date] = [];
    }
    grouped[date]?.push(item);
  });
  return grouped;
};
const fetchData = (params = {}) => {
  const search = new URLSearchParams();
  Object.keys(params).forEach((key) => {
    search.set(key, String(params[key]));
  });
  return api.get(`/api/payment-intents?${search.toString()}`).then((res) => res.data);
};
const pageSize = 10;
export default function CustomerPaymentList({ customer_id }) {
  const { t } = useLocaleContext();
  const { data, loadMore, loadingMore, loading } = useInfiniteScroll(
    (d) => {
      const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
      return fetchData({ page, pageSize, customer_id });
    },
    {
      reloadDeps: [customer_id]
    }
  );
  if (loading || !data) {
    return /* @__PURE__ */ jsx(CircularProgress, {});
  }
  if (data && data.list.length === 0) {
    return /* @__PURE__ */ jsx(
      Typography,
      {
        sx: {
          color: "text.secondary"
        },
        children: t("payment.customer.payment.empty")
      }
    );
  }
  const hasMore = data && data.list.length < data.count;
  const grouped = groupByDate(data.list);
  return /* @__PURE__ */ jsxs(
    Stack,
    {
      direction: "column",
      sx: {
        gap: 1,
        mt: 1
      },
      children: [
        Object.entries(grouped).map(([date, payments]) => /* @__PURE__ */ jsxs(Box, { children: [
          /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
          payments.map((item) => /* @__PURE__ */ jsxs(
            Stack,
            {
              direction: {
                xs: "column",
                sm: "row"
              },
              sx: {
                gap: {
                  xs: 0.5,
                  sm: 1.5,
                  md: 3
                },
                flexWrap: "nowrap",
                my: 1
              },
              children: [
                /* @__PURE__ */ jsx(
                  Box,
                  {
                    sx: {
                      flex: 3
                    },
                    children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(item.created_at) })
                  }
                ),
                /* @__PURE__ */ jsx(
                  Box,
                  {
                    sx: {
                      flex: 2
                    },
                    children: /* @__PURE__ */ jsxs(
                      Typography,
                      {
                        sx: {
                          textAlign: "right"
                        },
                        children: [
                          formatBNStr(item.amount_received, item.paymentCurrency.decimal),
                          "\xA0",
                          item.paymentCurrency.symbol
                        ]
                      }
                    )
                  }
                ),
                /* @__PURE__ */ jsx(
                  Box,
                  {
                    sx: {
                      flex: 3
                    },
                    children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getPaymentIntentStatusColor(item.status) })
                  }
                ),
                /* @__PURE__ */ jsx(
                  Box,
                  {
                    sx: {
                      flex: 3
                    },
                    children: /* @__PURE__ */ jsx(Typography, { children: item.description || "-" })
                  }
                ),
                /* @__PURE__ */ jsx(
                  Box,
                  {
                    sx: {
                      flex: 3,
                      minWidth: "220px"
                    },
                    children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash || item.payment_details?.base?.tx_hash) && /* @__PURE__ */ jsx(TxLink, { details: item.payment_details, method: item.paymentMethod, mode: "customer" })
                  }
                )
              ]
            },
            item.id
          ))
        ] }, date)),
        /* @__PURE__ */ jsxs(Box, { children: [
          hasMore && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", color: "inherit", onClick: loadMore, disabled: loadingMore, children: loadingMore ? t("common.loadingMore", { resource: t("payment.customer.payments") }) : t("common.loadMore", { resource: t("payment.customer.payments") }) }),
          !hasMore && data.count > pageSize && /* @__PURE__ */ jsx(
            Typography,
            {
              sx: {
                color: "text.secondary"
              },
              children: t("common.noMore", { resource: t("payment.customer.payments") })
            }
          )
        ] })
      ]
    }
  );
}
