import {
  SectionRow
} from "./chunk-4TLP3TAA.js";
import {
  ActionMenu
} from "./chunk-BDGZ4EQO.js";
import {
  useDeleteProduct,
  useUpdateProduct
} from "./chunk-YAUGB4LD.js";

// src/pages/products/[id]/_components/product-media-section/product-media-section.tsx
import { useState } from "react";
import { PencilSquare, ThumbnailBadge } from "@medusajs/icons";
import {
  Button,
  Checkbox,
  clx,
  CommandBar,
  Container,
  Heading,
  Text,
  Tooltip,
  usePrompt
} from "@medusajs/ui";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { DisplayExtensionZone } from "@mercurjs/dashboard-shared";
import { jsx, jsxs } from "react/jsx-runtime";
var ProductMediaSection = ({
  product,
  readOnly = false
}) => {
  const { t } = useTranslation();
  const prompt = usePrompt();
  const [selection, setSelection] = useState({});
  const media = getMedia(product);
  const handleCheckedChange = (id) => {
    setSelection((prev) => {
      if (prev[id]) {
        const { [id]: _, ...rest } = prev;
        return rest;
      } else {
        return { ...prev, [id]: true };
      }
    });
  };
  const { mutateAsync } = useUpdateProduct(product.id);
  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 mediaToKeep = product.images?.filter((i) => !ids.includes(i.id)).map((i) => ({ url: i.url }));
    await mutateAsync(
      {
        images: mediaToKeep,
        thumbnail: includingThumbnail ? "" : void 0
      },
      {
        onSuccess: () => {
          setSelection({});
        }
      }
    );
  };
  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(Heading, { level: "h2", children: t("products.media.label") }),
      !readOnly && /* @__PURE__ */ jsx(
        ActionMenu,
        {
          groups: [
            {
              actions: [
                {
                  label: t("actions.edit"),
                  to: "media?view=edit",
                  icon: /* @__PURE__ */ jsx(PencilSquare, {})
                }
              ]
            }
          ]
        }
      )
    ] }),
    media.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", children: media.map((i, index) => {
      const isSelected = selection[i.id];
      return /* @__PURE__ */ jsxs(
        "div",
        {
          className: clx(
            "group relative aspect-square size-full overflow-hidden rounded-[8px] shadow-elevation-card-rest transition-fg",
            { "cursor-pointer hover:shadow-elevation-card-hover": !readOnly }
          ),
          children: [
            !readOnly && /* @__PURE__ */ jsx(
              "div",
              {
                className: clx(
                  "invisible absolute right-2 top-2 opacity-0 transition-fg group-hover:visible group-hover:opacity-100",
                  {
                    "visible opacity-100": isSelected
                  }
                ),
                children: /* @__PURE__ */ jsx(
                  Checkbox,
                  {
                    checked: selection[i.id] || false,
                    onCheckedChange: () => handleCheckedChange(i.id)
                  }
                )
              }
            ),
            i.isThumbnail && /* @__PURE__ */ jsx("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx(Tooltip, { content: t("fields.thumbnail"), children: /* @__PURE__ */ jsx(ThumbnailBadge, {}) }) }),
            readOnly ? /* @__PURE__ */ jsx(
              "img",
              {
                src: i.url,
                alt: product.title,
                className: "size-full object-cover"
              }
            ) : /* @__PURE__ */ jsx(Link, { to: `media`, state: { curr: index }, children: /* @__PURE__ */ jsx(
              "img",
              {
                src: i.url,
                alt: product.title,
                className: "size-full object-cover"
              }
            ) })
          ]
        },
        i.id
      );
    }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
        /* @__PURE__ */ jsx(
          Text,
          {
            size: "small",
            leading: "compact",
            weight: "plus",
            className: "text-ui-fg-subtle",
            children: t("products.media.emptyState.header")
          }
        ),
        /* @__PURE__ */ jsx(
          Text,
          {
            size: "small",
            className: "text-ui-fg-muted",
            children: t("products.media.emptyState.description")
          }
        )
      ] }),
      !readOnly && /* @__PURE__ */ jsx(
        Button,
        {
          size: "small",
          variant: "secondary",
          asChild: true,
          children: /* @__PURE__ */ jsx(Link, { to: "media?view=edit", children: t("products.media.emptyState.action") })
        }
      )
    ] }),
    !readOnly && /* @__PURE__ */ jsx(CommandBar, { open: !!Object.keys(selection).length, children: /* @__PURE__ */ jsxs(CommandBar.Bar, { children: [
      /* @__PURE__ */ jsx(CommandBar.Value, { children: t("general.countSelected", {
        count: Object.keys(selection).length
      }) }),
      /* @__PURE__ */ jsx(CommandBar.Seperator, {}),
      /* @__PURE__ */ jsx(
        CommandBar.Command,
        {
          action: handleDelete,
          label: t("actions.delete"),
          shortcut: "d"
        }
      )
    ] }) }),
    /* @__PURE__ */ jsx(DisplayExtensionZone, { model: "product", zone: "media", data: product })
  ] });
};
var getMedia = (product) => {
  const { images = [], thumbnail } = product;
  const media = (images || []).map((image) => ({
    id: image.id,
    url: image.url,
    isThumbnail: image.url === thumbnail
  }));
  if (thumbnail && !media.some((mediaItem) => mediaItem.url === thumbnail)) {
    media.unshift({
      id: "img_thumbnail",
      url: thumbnail,
      isThumbnail: true
    });
  }
  return media;
};

// src/pages/products/[id]/_components/product-general-section/product-general-section.tsx
import { PencilSquare as PencilSquare2, Trash } from "@medusajs/icons";
import { Container as Container2, Heading as Heading2, StatusBadge, usePrompt as usePrompt2 } from "@medusajs/ui";
import { useTranslation as useTranslation2 } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { DisplayExtensionZone as DisplayExtensionZone2, DisplayField } from "@mercurjs/dashboard-shared";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var GENERAL_FIELD_IDS = [
  "title",
  "status",
  "description",
  "subtitle",
  "handle",
  "discountable"
];
var productStatusColor = (status) => {
  switch (status) {
    case "draft":
      return "grey";
    case "proposed":
      return "orange";
    case "published":
      return "green";
    case "rejected":
      return "red";
    default:
      return "grey";
  }
};
var ProductGeneralSection = ({
  product
}) => {
  const { t } = useTranslation2();
  const prompt = usePrompt2();
  const navigate = useNavigate();
  const { mutateAsync } = useDeleteProduct(product.id);
  const handleDelete = async () => {
    const res = await prompt({
      title: t("general.areYouSure"),
      description: t("products.deleteWarning", {
        title: product.title
      }),
      confirmText: t("actions.delete"),
      cancelText: t("actions.cancel")
    });
    if (!res) {
      return;
    }
    await mutateAsync(void 0, {
      onSuccess: () => {
        navigate("..");
      }
    });
  };
  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__ */ jsx2(DisplayField, { model: "product", zone: "general", id: "title", data: product, children: /* @__PURE__ */ jsx2(Heading2, { children: product.title }) }),
      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-4", children: [
        /* @__PURE__ */ jsx2(
          DisplayField,
          {
            model: "product",
            zone: "general",
            id: "status",
            data: product,
            children: /* @__PURE__ */ jsx2(StatusBadge, { color: productStatusColor(product.status), children: t(`products.productStatus.${product.status}`) })
          }
        ),
        /* @__PURE__ */ jsx2(
          ActionMenu,
          {
            groups: [
              {
                actions: [
                  {
                    label: t("actions.edit"),
                    to: "edit",
                    icon: /* @__PURE__ */ jsx2(PencilSquare2, {})
                  }
                ]
              },
              {
                actions: [
                  {
                    label: t("actions.delete"),
                    onClick: handleDelete,
                    icon: /* @__PURE__ */ jsx2(Trash, {})
                  }
                ]
              }
            ]
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ jsx2(DisplayField, { model: "product", zone: "general", id: "description", data: product, children: /* @__PURE__ */ jsx2(
      SectionRow,
      {
        title: t("fields.description"),
        value: product.description || "-"
      }
    ) }),
    /* @__PURE__ */ jsx2(DisplayField, { model: "product", zone: "general", id: "subtitle", data: product, children: /* @__PURE__ */ jsx2(
      SectionRow,
      {
        title: t("fields.subtitle"),
        value: product.subtitle || "-"
      }
    ) }),
    /* @__PURE__ */ jsx2(DisplayField, { model: "product", zone: "general", id: "handle", data: product, children: /* @__PURE__ */ jsx2(SectionRow, { title: t("fields.handle"), value: `/${product.handle}` }) }),
    /* @__PURE__ */ jsx2(
      DisplayField,
      {
        model: "product",
        zone: "general",
        id: "discountable",
        data: product,
        children: /* @__PURE__ */ jsx2(
          SectionRow,
          {
            title: t("fields.discountable"),
            value: product.discountable ? t("general.true") : t("general.false")
          }
        )
      }
    ),
    /* @__PURE__ */ jsx2(
      DisplayExtensionZone2,
      {
        model: "product",
        zone: "general",
        data: product,
        builtInFieldIds: GENERAL_FIELD_IDS
      }
    )
  ] });
};

export {
  productStatusColor,
  ProductGeneralSection,
  ProductMediaSection
};
