'use strict';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from '../dialog/Dialog.js';
import React from 'react';
import { Image } from '../image/Image.js';
import { Icon, iconNames } from '../icon/Icon.js';
import { cn } from '../../../fd-toolbox/lib/utils.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function ImageRadioGroupDialog({
  title,
  className,
  trigger,
  triggerClassName,
  content
}) {
  return /* @__PURE__ */jsxs(Dialog, {
    children: [/* @__PURE__ */jsx(DialogTrigger, {
      nativeButton: false,
      className: triggerClassName,
      render: trigger && React.isValidElement(trigger) ? trigger : /* @__PURE__ */jsx("span", {
        children: trigger
      })
    }), /* @__PURE__ */jsxs(DialogPortal, {
      children: [/* @__PURE__ */jsx(DialogOverlay, {
        className: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/30"
      }), /* @__PURE__ */jsxs(DialogContent, {
        className: cn("fixed top-1/2 left-1/2 z-50 grid w-fit max-w-lg -translate-x-1/2 -translate-y-1/2 gap-6 border", "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out p-4 pt-6 shadow-lg duration-200", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2", "data-[state=open]:slide-in-from-top-1/2 sm:rounded", className),
        children: [/* @__PURE__ */jsxs("div", {
          tabIndex: 1,
          children: [/* @__PURE__ */jsx(DialogTitle, {
            className: "text-center",
            children: title
          }), /* @__PURE__ */jsx(DialogDescription, {}), /* @__PURE__ */jsxs(DialogClose, {
            className: "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer rounded opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none",
            children: [/* @__PURE__ */jsx(Icon, {
              className: "cursor-pointer",
              name: iconNames.cross
            }), /* @__PURE__ */jsx("span", {
              className: "sr-only",
              children: "Close"
            })]
          })]
        }), /* @__PURE__ */jsx("div", {
          children: /* @__PURE__ */jsx("div", {
            className: "grid w-fit grid-cols-2 gap-3",
            children: content.map(img => /* @__PURE__ */jsx("div", {
              children: /* @__PURE__ */jsx(Image, {
                width: 150,
                height: 150,
                src: img.src,
                alt: img.alt,
                className: "rounded-md border"
              })
            }, `${img.src}_${img.alt}`))
          })
        })]
      })]
    })]
  });
}
__name(ImageRadioGroupDialog, "ImageRadioGroupDialog");

export { ImageRadioGroupDialog };
