import {
  VARIANT_DETAIL_FIELDS,
  variantLoader
} from "./chunk-RSOV55K7.js";
import {
  SectionRow
} from "./chunk-4TLP3TAA.js";
import {
  SingleColumnPage
} from "./chunk-YV6MK4PZ.js";
import {
  TwoColumnPageSkeleton
} from "./chunk-INNFZYX2.js";
import {
  ActionMenu
} from "./chunk-BDGZ4EQO.js";
import "./chunk-LAVHRER2.js";
import "./chunk-Y7QKP6QU.js";
import "./chunk-RLRWDHME.js";
import "./chunk-K5324KIX.js";
import "./chunk-FV76G2D7.js";
import "./chunk-GHDLST2P.js";
import "./chunk-YVYYOBAE.js";
import "./chunk-L2NJPDUD.js";
import "./chunk-P7UBW2EI.js";
import "./chunk-MR6REQKT.js";
import "./chunk-EPSDO2MJ.js";
import "./chunk-BHEU34FL.js";
import "./chunk-W34KDYZA.js";
import "./chunk-II3CLUXA.js";
import "./chunk-XKEYHWBS.js";
import "./chunk-J2XUEO2E.js";
import "./chunk-656G74I2.js";
import "./chunk-VWPNMEOE.js";
import "./chunk-O72AIZUN.js";
import "./chunk-VUWAOX7H.js";
import "./chunk-5DKUSZQ7.js";
import "./chunk-DIAWPVYS.js";
import "./chunk-4U2BLH45.js";
import {
  useDeleteVariant,
  useProductVariant,
  useUpdateProductVariant
} from "./chunk-YAUGB4LD.js";
import "./chunk-A5DJIOHN.js";
import "./chunk-RHKRREUU.js";
import "./chunk-ZA2KFUFR.js";
import "./chunk-DTGEFKK4.js";
import "./chunk-NBMM2TZK.js";

// src/pages/product-variants/product-variant-detail/breadcrumb.tsx
import { jsx } from "react/jsx-runtime";
var ProductVariantDetailBreadcrumb = (props) => {
  const { id, product_id, variant_id } = props.params || {};
  const productId = id || product_id;
  const { variant } = useProductVariant(
    productId,
    variant_id,
    {},
    {
      initialData: props.data,
      enabled: Boolean(productId) && Boolean(variant_id)
    }
  );
  if (!variant) {
    return null;
  }
  return /* @__PURE__ */ jsx("span", { children: variant.title });
};

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

// 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 as jsx2, 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__ */ jsx2(Heading, { children: variant.title }),
          hasInventoryKit && /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted font-normal", children: /* @__PURE__ */ jsx2(Component, {}) })
        ] }),
        /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-subtle txt-small mt-2", children: t("labels.productVariant") })
      ] }),
      /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx2(
        ActionMenu,
        {
          groups: [
            {
              actions: [
                {
                  label: t("actions.edit"),
                  to: "edit",
                  icon: /* @__PURE__ */ jsx2(PencilSquare, {})
                }
              ]
            },
            {
              actions: [
                {
                  label: t("actions.delete"),
                  onClick: handleDelete,
                  icon: /* @__PURE__ */ jsx2(Trash, {})
                }
              ]
            }
          ]
        }
      ) })
    ] }),
    /* @__PURE__ */ jsx2(SectionRow, { title: t("fields.sku"), value: variant.sku }),
    (variant.options ?? []).map((opt) => {
      const title = opt.option?.title;
      if (!title || !opt.value) return null;
      return /* @__PURE__ */ jsx2(
        SectionRow,
        {
          title,
          value: /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap items-center gap-1", children: /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", children: opt.value }) })
        },
        opt.id
      );
    })
  ] });
}

// src/pages/product-variants/product-variant-detail/components/variant-media-section/variant-media-section.tsx
import { useState } from "react";
import { PencilSquare as PencilSquare2, ThumbnailBadge } from "@medusajs/icons";
import {
  Button,
  Checkbox,
  clx,
  CommandBar,
  Container as Container2,
  Heading as Heading2,
  Text,
  toast,
  Tooltip,
  usePrompt as usePrompt2
} from "@medusajs/ui";
import { useTranslation as useTranslation2 } from "react-i18next";
import { Link } from "react-router-dom";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var getVariantImages = (variant) => (variant.images ?? []).filter(
  (image) => (image.variants ?? []).some((v) => v.id === variant.id)
);
var VariantMediaSection = ({
  variant
}) => {
  const { t } = useTranslation2();
  const prompt = usePrompt2();
  const [selection, setSelection] = useState({});
  const media = getMedia(variant);
  const { mutateAsync } = useUpdateProductVariant(
    variant.product_id,
    variant.id
  );
  const handleCheckedChange = (id) => {
    setSelection((prev) => {
      if (prev[id]) {
        const { [id]: _, ...rest } = prev;
        return rest;
      }
      return { ...prev, [id]: true };
    });
  };
  const handleDelete = async () => {
    const ids = Object.keys(selection);
    const includingThumbnail = ids.some(
      (id) => media.find((m) => m.id === id)?.isThumbnail
    );
    const res = await prompt({
      title: t("general.areYouSure"),
      description: includingThumbnail ? t("products.media.deleteWarningWithThumbnail", { count: ids.length }) : t("products.media.deleteWarning", { count: ids.length }),
      confirmText: t("actions.delete"),
      cancelText: t("actions.cancel")
    });
    if (!res) {
      return;
    }
    const linkedIds = new Set(getVariantImages(variant).map((i) => i.id));
    const remove = ids.filter((id) => linkedIds.has(id));
    await mutateAsync(
      {
        images: { remove },
        thumbnail: includingThumbnail ? "" : void 0
      },
      {
        onSuccess: () => {
          toast.success(t("products.media.successToast"));
          setSelection({});
        },
        onError: (error) => {
          toast.error(error.message);
        }
      }
    );
  };
  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__ */ jsx3(Heading2, { level: "h2", children: t("products.media.label") }),
      /* @__PURE__ */ jsx3(
        ActionMenu,
        {
          groups: [
            {
              actions: [
                {
                  label: t("actions.edit"),
                  to: "media",
                  icon: /* @__PURE__ */ jsx3(PencilSquare2, {})
                }
              ]
            }
          ]
        }
      )
    ] }),
    media.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", children: media.map((image) => {
      const isSelected = selection[image.id];
      return /* @__PURE__ */ jsxs2(
        "div",
        {
          className: "group shadow-elevation-card-rest hover:shadow-elevation-card-hover transition-fg relative aspect-square size-full cursor-pointer overflow-hidden rounded-[8px]",
          children: [
            /* @__PURE__ */ jsx3(
              "div",
              {
                className: clx(
                  "transition-fg invisible absolute right-2 top-2 opacity-0 group-hover:visible group-hover:opacity-100",
                  {
                    "visible opacity-100": isSelected
                  }
                ),
                children: /* @__PURE__ */ jsx3(
                  Checkbox,
                  {
                    checked: selection[image.id] || false,
                    onCheckedChange: () => handleCheckedChange(image.id)
                  }
                )
              }
            ),
            image.isThumbnail && /* @__PURE__ */ jsx3("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx3(Tooltip, { content: t("fields.thumbnail"), children: /* @__PURE__ */ jsx3(ThumbnailBadge, {}) }) }),
            /* @__PURE__ */ jsx3(Link, { to: "media", children: /* @__PURE__ */ jsx3(
              "img",
              {
                src: image.url,
                alt: variant.title ?? "",
                className: "size-full object-cover"
              }
            ) })
          ]
        },
        image.id
      );
    }) }) : /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", children: [
      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center", children: [
        /* @__PURE__ */ jsx3(
          Text,
          {
            size: "small",
            leading: "compact",
            weight: "plus",
            className: "text-ui-fg-subtle",
            children: t("products.media.emptyState.header")
          }
        ),
        /* @__PURE__ */ jsx3(Text, { size: "small", className: "text-ui-fg-muted", children: t("products.media.emptyState.description") })
      ] }),
      /* @__PURE__ */ jsx3(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx3(Link, { to: "media", children: t("products.media.emptyState.action") }) })
    ] }),
    /* @__PURE__ */ jsx3(CommandBar, { open: !!Object.keys(selection).length, children: /* @__PURE__ */ jsxs2(CommandBar.Bar, { children: [
      /* @__PURE__ */ jsx3(CommandBar.Value, { children: t("general.countSelected", {
        count: Object.keys(selection).length
      }) }),
      /* @__PURE__ */ jsx3(CommandBar.Seperator, {}),
      /* @__PURE__ */ jsx3(
        CommandBar.Command,
        {
          action: handleDelete,
          label: t("actions.delete"),
          shortcut: "d"
        }
      )
    ] }) })
  ] });
};
var getMedia = (variant) => {
  const { thumbnail } = variant;
  const media = getVariantImages(variant).map((image) => ({
    id: image.id,
    url: image.url,
    isThumbnail: image.url === thumbnail
  }));
  if (thumbnail && !media.some((m) => m.url === thumbnail)) {
    media.unshift({
      id: "img_thumbnail",
      url: thumbnail,
      isThumbnail: true
    });
  }
  return media;
};

// src/pages/product-variants/product-variant-detail/product-variant-detail.tsx
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var Root = ({ children }) => {
  const initialData = useLoaderData();
  const { id, product_id, variant_id } = useParams();
  const productId = id || product_id;
  const { variant, isLoading, isError, error } = useProductVariant(
    productId,
    variant_id,
    { fields: VARIANT_DETAIL_FIELDS },
    {
      initialData
    }
  );
  if (isLoading || !variant) {
    return /* @__PURE__ */ jsx4(TwoColumnPageSkeleton, { mainSections: 2, sidebarSections: 0 });
  }
  if (isError) {
    throw error;
  }
  return /* @__PURE__ */ jsx4(SingleColumnPage, { data: variant, hasOutlet: true, children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs3(WidgetZone, { id: "product-variants.detail.main", data: variant, children: [
    /* @__PURE__ */ jsx4(VariantGeneralSection, { variant }),
    /* @__PURE__ */ jsx4(VariantMediaSection, { variant })
  ] }) });
};
var ProductVariantDetail = Object.assign(Root, {
  GeneralSection: VariantGeneralSection,
  MediaSection: VariantMediaSection
});
export {
  ProductVariantDetailBreadcrumb as Breadcrumb,
  ProductVariantDetail as Component,
  variantLoader as loader
};
