import {
  getStylizedAmount
} from "./chunk-PXYDR7WQ.js";
import {
  SingleColumnPage
} from "./chunk-XIZLPYEE.js";
import {
  SingleColumnPageSkeleton
} from "./chunk-INNFZYX2.js";
import {
  usePayout
} from "./chunk-XDZGOUCR.js";

// src/pages/payouts/payout-detail/payout-detail.tsx
import { Children } from "react";
import { useParams } from "react-router-dom";

// src/pages/payouts/payout-detail/components/payout-general-section.tsx
import { Container, Heading, StatusBadge, Text } from "@medusajs/ui";
import { useTranslation } from "react-i18next";
import { jsx, jsxs } from "react/jsx-runtime";
var payoutStatusColor = (status) => {
  switch (status) {
    case "paid":
      return "green";
    case "processing":
      return "orange";
    case "pending":
      return "grey";
    case "failed":
    case "canceled":
      return "red";
    default:
      return "grey";
  }
};
var PayoutGeneralSection = ({ payout }) => {
  const { t } = useTranslation();
  const statusText = payout.status.charAt(0).toUpperCase() + payout.status.slice(1);
  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
      /* @__PURE__ */ jsxs(Heading, { children: [
        "#",
        payout.display_id
      ] }),
      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2", children: /* @__PURE__ */ jsx(StatusBadge, { color: payoutStatusColor(payout.status), children: statusText }) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: t("fields.amount") }),
      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: getStylizedAmount(payout.amount, payout.currency_code) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: t("fields.createdAt") }),
      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: new Date(payout.created_at).toLocaleDateString(void 0, {
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit"
      }) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: t("fields.updatedAt") }),
      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: new Date(payout.updated_at).toLocaleDateString(void 0, {
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit"
      }) })
    ] })
  ] });
};

// src/pages/payouts/payout-detail/payout-detail.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var Root = ({ children }) => {
  const { id } = useParams();
  const { payout, isLoading, isError, error } = usePayout(id);
  if (isLoading || !payout) {
    return /* @__PURE__ */ jsx2(SingleColumnPageSkeleton, { sections: 1 });
  }
  if (isError) {
    throw error;
  }
  return Children.count(children) > 0 ? /* @__PURE__ */ jsx2(SingleColumnPage, { data: payout, showJSON: true, showMetadata: true, children }) : /* @__PURE__ */ jsx2(SingleColumnPage, { data: payout, showJSON: true, showMetadata: true, children: /* @__PURE__ */ jsx2(PayoutGeneralSection, { payout }) });
};
var PayoutDetailPage = Object.assign(Root, {
  GeneralSection: PayoutGeneralSection
});

export {
  PayoutDetailPage
};
