import {
  getLocaleAmount
} from "./chunk-PXYDR7WQ.js";
import {
  LinkButton
} from "./chunk-7AV5EJJ5.js";
import {
  VARIANT_DETAIL_FIELDS
} from "./chunk-WCEMRNW4.js";
import {
  ProductSellerSection
} from "./chunk-QOQSXNEF.js";
import {
  SectionRow
} from "./chunk-3XPXUIK3.js";
import {
  PlaceholderCell
} from "./chunk-PHOCVOZ5.js";
import {
  TwoColumnPage
} from "./chunk-E74OUNA3.js";
import {
  _DataTable,
  useDataTable
} from "./chunk-KYPPQGGE.js";
import {
  NoRecords
} from "./chunk-634XVU3D.js";
import {
  TwoColumnPageSkeleton
} from "./chunk-INNFZYX2.js";
import {
  ActionMenu
} from "./chunk-BDGZ4EQO.js";
import {
  useDeleteVariant,
  useProduct,
  useProductVariant
} from "./chunk-5CK6XEFV.js";

// src/pages/product-variants/product-variant-detail/product-variant-detail.tsx
import { Children } from "react";
import { useLoaderData, useParams } from "react-router-dom";

// src/pages/product-variants/product-variant-detail/components/variant-general-section/variant-general-section.tsx
import { Component, PencilSquare, Trash } from "@medusajs/icons";
import { Badge, Container, Heading, usePrompt } from "@medusajs/ui";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { jsx, jsxs } from "react/jsx-runtime";
function VariantGeneralSection({
  variant
}) {
  const { t } = useTranslation();
  const prompt = usePrompt();
  const navigate = useNavigate();
  const hasInventoryKit = (variant.inventory_items?.length ?? 0) > 1;
  const { mutateAsync } = useDeleteVariant(variant.product_id, variant.id);
  const handleDelete = async () => {
    const res = await prompt({
      title: t("general.areYouSure"),
      description: t("products.variant.deleteWarning", {
        title: variant.title
      }),
      confirmText: t("actions.delete"),
      cancelText: t("actions.cancel")
    });
    if (!res) {
      return;
    }
    await mutateAsync(void 0, {
      onSuccess: () => {
        navigate("..", { replace: true });
      }
    });
  };
  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("div", { children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(Heading, { children: variant.title }),
          hasInventoryKit && /* @__PURE__ */ jsx("span", { className: "text-ui-fg-muted font-normal", children: /* @__PURE__ */ jsx(Component, {}) })
        ] }),
        /* @__PURE__ */ jsx("span", { className: "text-ui-fg-subtle txt-small mt-2", children: t("labels.productVariant") })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx(
        ActionMenu,
        {
          groups: [
            {
              actions: [
                {
                  label: t("actions.edit"),
                  to: "edit",
                  icon: /* @__PURE__ */ jsx(PencilSquare, {})
                }
              ]
            },
            {
              actions: [
                {
                  label: t("actions.delete"),
                  onClick: handleDelete,
                  icon: /* @__PURE__ */ jsx(Trash, {})
                }
              ]
            }
          ]
        }
      ) })
    ] }),
    /* @__PURE__ */ jsx(SectionRow, { title: t("fields.sku"), value: variant.sku }),
    variant.options?.map((o) => /* @__PURE__ */ jsx(
      SectionRow,
      {
        title: o.option?.title,
        value: /* @__PURE__ */ jsx(Badge, { size: "2xsmall", children: o.value })
      },
      o.id
    ))
  ] });
}

// src/pages/product-variants/product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx
import { useTranslation as useTranslation4 } from "react-i18next";
import { Buildings as Buildings2, Component as Component2 } from "@medusajs/icons";
import { Container as Container2, Heading as Heading2 } from "@medusajs/ui";

// src/pages/product-variants/product-variant-detail/components/variant-inventory-section/inventory-actions.tsx
import { useTranslation as useTranslation2 } from "react-i18next";
import { Buildings } from "@medusajs/icons";
import { jsx as jsx2 } from "react/jsx-runtime";
var InventoryActions = ({ item }) => {
  const { t } = useTranslation2();
  return /* @__PURE__ */ jsx2(
    ActionMenu,
    {
      groups: [
        {
          actions: [
            {
              icon: /* @__PURE__ */ jsx2(Buildings, {}),
              label: t("products.variant.inventory.navigateToItem"),
              to: `/inventory/${item.id}`
            }
          ]
        }
      ]
    }
  );
};

// src/pages/product-variants/product-variant-detail/components/variant-inventory-section/use-inventory-table-columns.tsx
import { createColumnHelper } from "@tanstack/react-table";
import { useMemo } from "react";
import { useTranslation as useTranslation3 } from "react-i18next";
import { jsx as jsx3 } from "react/jsx-runtime";
var columnHelper = createColumnHelper();
var useInventoryTableColumns = () => {
  const { t } = useTranslation3();
  return useMemo(
    () => [
      columnHelper.accessor("title", {
        header: t("fields.title"),
        cell: ({ getValue }) => {
          const title = getValue();
          if (!title) {
            return /* @__PURE__ */ jsx3(PlaceholderCell, {});
          }
          return /* @__PURE__ */ jsx3("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: title }) });
        }
      }),
      columnHelper.accessor("sku", {
        header: t("fields.sku"),
        cell: ({ getValue }) => {
          const sku = getValue();
          if (!sku) {
            return /* @__PURE__ */ jsx3(PlaceholderCell, {});
          }
          return /* @__PURE__ */ jsx3("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: sku }) });
        }
      }),
      columnHelper.accessor("required_quantity", {
        header: t("fields.requiredQuantity"),
        cell: ({ getValue }) => {
          const quantity = getValue();
          if (Number.isNaN(quantity)) {
            return /* @__PURE__ */ jsx3(PlaceholderCell, {});
          }
          return /* @__PURE__ */ jsx3("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: quantity }) });
        }
      }),
      columnHelper.display({
        id: "inventory_quantity",
        header: t("fields.inventory"),
        cell: ({ row: { original: inventory } }) => {
          if (!inventory.location_levels?.length) {
            return /* @__PURE__ */ jsx3(PlaceholderCell, {});
          }
          let quantity = 0;
          let locations = 0;
          inventory.location_levels.forEach((level) => {
            quantity += level.available_quantity;
            locations += 1;
          });
          return /* @__PURE__ */ jsx3("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: t("products.variant.tableItem", {
            availableCount: quantity,
            locationCount: locations,
            count: locations
          }) }) });
        }
      }),
      columnHelper.display({
        id: "actions",
        cell: ({ row }) => /* @__PURE__ */ jsx3(InventoryActions, { item: row.original })
      })
    ],
    [t]
  );
};

// src/pages/product-variants/product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
var PAGE_SIZE = 20;
function VariantInventorySectionConnected({
  variant
}) {
  if (!variant.manage_inventory) {
    return /* @__PURE__ */ jsx4(InventorySectionPlaceholder, {});
  }
  const inventoryItems = variant.inventory_items?.map((i) => ({
    ...i.inventory,
    required_quantity: i.required_quantity,
    variant
  })) ?? [];
  return /* @__PURE__ */ jsx4(VariantInventorySection, { inventoryItems });
}
function VariantInventorySection({
  inventoryItems
}) {
  const { t } = useTranslation4();
  const columns = useInventoryTableColumns();
  const { table } = useDataTable({
    data: inventoryItems ?? [],
    columns,
    count: inventoryItems.length,
    enablePagination: true,
    getRowId: (row) => row.id,
    pageSize: PAGE_SIZE
  });
  const hasKit = inventoryItems.length > 1;
  return /* @__PURE__ */ jsxs2(Container2, { className: "divide-y p-0", children: [
    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
      /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx4(Heading2, { level: "h2", children: t("fields.inventoryItems") }) }),
      /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx4(
        ActionMenu,
        {
          groups: [
            {
              actions: [
                {
                  label: t(
                    hasKit ? "products.variant.inventory.manageKit" : "products.variant.inventory.manageItems"
                  ),
                  to: "manage-items",
                  icon: hasKit ? /* @__PURE__ */ jsx4(Component2, {}) : /* @__PURE__ */ jsx4(Buildings2, {})
                }
              ]
            }
          ]
        }
      ) })
    ] }),
    /* @__PURE__ */ jsx4(
      _DataTable,
      {
        table,
        columns,
        pageSize: PAGE_SIZE,
        count: inventoryItems.length,
        navigateTo: (row) => `/inventory/${row.id}`
      }
    )
  ] });
}
function InventorySectionPlaceholder() {
  const { t } = useTranslation4();
  return /* @__PURE__ */ jsx4(Container2, { className: "divide-y p-0", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
      /* @__PURE__ */ jsx4(Heading2, { level: "h2", children: t("fields.inventoryItems") }),
      /* @__PURE__ */ jsx4("span", { className: "txt-small text-ui-fg-subtle", children: t("products.variant.inventory.notManagedDesc") })
    ] }),
    /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx4(LinkButton, { to: "edit", children: t("products.variant.edit.header") }) })
  ] }) });
}

// src/pages/product-variants/product-variant-detail/components/variant-prices-section/variant-prices-section.tsx
import { useState } from "react";
import { useTranslation as useTranslation5 } from "react-i18next";
import { CurrencyDollar } from "@medusajs/icons";
import { Button, Container as Container3, Heading as Heading3 } from "@medusajs/ui";
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
function VariantPricesSection({
  variant
}) {
  const { t } = useTranslation5();
  const prices = variant.prices?.filter((p) => !Object.keys(p.rules || {}).length).sort((p1, p2) => p1.currency_code?.localeCompare(p2.currency_code));
  const hasPrices = !!prices?.length;
  const [pageSize, setPageSize] = useState(3);
  const displayPrices = prices?.slice(0, pageSize);
  const onShowMore = () => {
    setPageSize(pageSize + 3);
  };
  return /* @__PURE__ */ jsxs3(Container3, { className: "flex flex-col divide-y p-0", children: [
    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", children: [
      /* @__PURE__ */ jsx5(Heading3, { level: "h2", children: t("labels.prices") }),
      /* @__PURE__ */ jsx5(
        ActionMenu,
        {
          groups: [
            {
              actions: [
                {
                  label: t("actions.edit"),
                  to: `/products/${variant.product_id}/variants/${variant.id}/prices`,
                  icon: /* @__PURE__ */ jsx5(CurrencyDollar, {})
                }
              ]
            }
          ]
        }
      )
    ] }),
    !hasPrices && /* @__PURE__ */ jsx5(NoRecords, { className: "h-60" }),
    displayPrices?.map((price) => {
      return /* @__PURE__ */ jsxs3(
        "div",
        {
          className: "txt-small text-ui-fg-subtle flex justify-between px-6 py-4",
          children: [
            /* @__PURE__ */ jsx5("span", { className: "font-medium", children: price.currency_code.toUpperCase() }),
            /* @__PURE__ */ jsx5("span", { children: getLocaleAmount(price.amount, price.currency_code) })
          ]
        },
        price.id
      );
    }),
    hasPrices && /* @__PURE__ */ jsxs3("div", { className: "txt-small text-ui-fg-subtle flex items-center justify-between px-6 py-4", children: [
      /* @__PURE__ */ jsx5("span", { className: "font-medium", children: t("products.variant.pricesPagination", {
        total: prices.length,
        current: Math.min(pageSize, prices.length)
      }) }),
      /* @__PURE__ */ jsx5(
        Button,
        {
          onClick: onShowMore,
          disabled: pageSize >= prices.length,
          className: "-mr-3 text-blue-500",
          variant: "transparent",
          children: t("actions.showMore")
        }
      )
    ] })
  ] });
}

// src/pages/product-variants/product-variant-detail/product-variant-detail.tsx
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
var Root = ({ children }) => {
  const initialData = useLoaderData();
  const { id, variant_id } = useParams();
  const { product: rawProduct } = useProduct(id, {
    fields: "*seller"
  });
  const product = rawProduct;
  const { variant, isLoading, isError, error } = useProductVariant(
    id,
    variant_id,
    { fields: VARIANT_DETAIL_FIELDS },
    {
      initialData
    }
  );
  if (isLoading || !variant) {
    return /* @__PURE__ */ jsx6(
      TwoColumnPageSkeleton,
      {
        mainSections: 2,
        sidebarSections: 1,
        showJSON: true,
        showMetadata: true
      }
    );
  }
  if (isError) {
    throw error;
  }
  return Children.count(children) > 0 ? /* @__PURE__ */ jsx6(TwoColumnPage, { data: variant, showJSON: true, showMetadata: true, hasOutlet: true, children }) : /* @__PURE__ */ jsxs4(TwoColumnPage, { data: variant, showJSON: true, showMetadata: true, hasOutlet: true, children: [
    /* @__PURE__ */ jsxs4(TwoColumnPage.Main, { children: [
      /* @__PURE__ */ jsx6(VariantGeneralSection, { variant }),
      /* @__PURE__ */ jsx6(VariantInventorySectionConnected, { variant })
    ] }),
    /* @__PURE__ */ jsxs4(TwoColumnPage.Sidebar, { children: [
      /* @__PURE__ */ jsx6(ProductSellerSection, { seller: product?.seller }),
      /* @__PURE__ */ jsx6(VariantPricesSection, { variant })
    ] })
  ] });
};
var ProductVariantDetailPage = Object.assign(Root, {
  Main: TwoColumnPage.Main,
  Sidebar: TwoColumnPage.Sidebar,
  MainGeneralSection: VariantGeneralSection,
  MainInventorySection: VariantInventorySectionConnected,
  SidebarSellerSection: ProductSellerSection,
  SidebarPricesSection: VariantPricesSection
});

export {
  ProductVariantDetailPage
};
