import {
  getStylizedAmount
} from "./chunk-XCHKUSUU.js";
import "./chunk-IQPN4PZJ.js";
import {
  SingleColumnPage
} from "./chunk-YV6MK4PZ.js";
import {
  SingleColumnPageSkeleton
} from "./chunk-INNFZYX2.js";
import {
  usePayout
} from "./chunk-J2XUEO2E.js";
import "./chunk-ZA2KFUFR.js";
import "./chunk-DTGEFKK4.js";
import "./chunk-NBMM2TZK.js";

// src/pages/payouts/[id]/payout-detail-page.tsx
import { Children } from "react";
import { useParams } from "react-router-dom";
import { WidgetZone } from "@mercurjs/dashboard-shared";

// src/pages/payouts/[id]/_components/payout-general-section.tsx
import { Container, Heading, StatusBadge, Text } from "@medusajs/ui";
import { DisplayExtensionZone, DisplayField } from "@mercurjs/dashboard-shared";
import { useTranslation } from "react-i18next";
import { jsx, jsxs } from "react/jsx-runtime";
var GENERAL_FIELD_IDS = [
  "display_id",
  "status",
  "amount",
  "created_at",
  "updated_at"
];
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 = t(`payouts.status.${payout.status}`, {
    defaultValue: 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__ */ jsx(DisplayField, { model: "payout", zone: "general", id: "display_id", data: payout, children: /* @__PURE__ */ jsxs(Heading, { children: [
        "#",
        payout.display_id
      ] }) }),
      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2", children: /* @__PURE__ */ jsx(DisplayField, { model: "payout", zone: "general", id: "status", data: payout, children: /* @__PURE__ */ jsx(StatusBadge, { color: payoutStatusColor(payout.status), children: statusText }) }) })
    ] }),
    /* @__PURE__ */ jsx(DisplayField, { model: "payout", zone: "general", id: "amount", data: payout, children: /* @__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__ */ jsx(DisplayField, { model: "payout", zone: "general", id: "created_at", data: payout, children: /* @__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__ */ jsx(DisplayField, { model: "payout", zone: "general", id: "updated_at", data: payout, children: /* @__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"
      }) })
    ] }) }),
    /* @__PURE__ */ jsx(
      DisplayExtensionZone,
      {
        model: "payout",
        zone: "general",
        data: payout,
        builtInFieldIds: GENERAL_FIELD_IDS
      }
    )
  ] });
};

// src/pages/payouts/[id]/payout-detail-page.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 /* @__PURE__ */ jsx2(SingleColumnPage, { showMetadata: true, children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsx2(WidgetZone, { id: "payouts.detail.main", data: payout, children: /* @__PURE__ */ jsx2(PayoutGeneralSection, { payout }) }) });
};
var PayoutDetailPage = Object.assign(Root, {
  GeneralSection: PayoutGeneralSection
});
export {
  PayoutDetailPage
};
