'use strict';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Card, CardContent } from '../card/Card.js';
import { RadioGroup } from '../radio-group/RadioGroup.js';
import { Radio } from '@base-ui/react/radio';
import { Icon, iconNames } from '../icon/Icon.js';
import { useState } from 'react';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { Tooltip } from '../tooltip/Tooltip.js';
import { wellKnownPositions } from '../../../base-repo/constants/tools-constants.js';
import { Image } from '../image/Image.js';
import { ImageRadioGroupDialog } from './ImageRadioGroupDialog.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function ImageRadioGroup(t0) {
  const $ = c(6);
  const {
    items,
    title
  } = t0;
  const [selectedValue, setSelectedValue] = useState("");
  let t1;
  if ($[0] !== items || $[1] !== selectedValue || $[2] !== title) {
    let t2;
    if ($[4] !== selectedValue) {
      t2 = item => jsx(ImageRadioGroupItem, {
        ...item,
        isSelected: selectedValue === item.text,
        onClick: () => setSelectedValue(item.text ?? "")
      }, `${item.imageSrc}_${item.text ?? ""}`);
      $[4] = selectedValue;
      $[5] = t2;
    } else {
      t2 = $[5];
    }
    t1 = jsxs(RadioGroup, {
      className: "flex size-fit flex-col gap-2",
      value: selectedValue,
      onValueChange: setSelectedValue,
      children: [jsx("p", {
        className: "px-2 font-semibold",
        children: title
      }), jsx("div", {
        className: "flex flex-wrap gap-2",
        children: items.map(t2)
      })]
    });
    $[0] = items;
    $[1] = selectedValue;
    $[2] = title;
    $[3] = t1;
  } else {
    t1 = $[3];
  }
  return t1;
}
__name(ImageRadioGroup, "ImageRadioGroup");
function ImageRadioGroupItem({
  text,
  onClick,
  isSelected,
  examples,
  imageSrc
}) {
  return /* @__PURE__ */jsx("div", {
    className: "relative",
    onClick,
    children: /* @__PURE__ */jsx(Radio.Root, {
      className: "text-primary focus-visible:border-primary relative aspect-square size-40 focus:outline-none focus-visible:border disabled:cursor-not-allowed disabled:opacity-50",
      value: text,
      render: /* @__PURE__ */jsx(Card, {
        className: "border-0 shadow-none",
        children: /* @__PURE__ */jsxs(CardContent, {
          className: cn("flex size-fit cursor-pointer flex-col rounded-md border p-0 shadow-md", isSelected && "bg-accent font-bold shadow-2xl"),
          children: [examples && /* @__PURE__ */jsx(ImageRadioGroupDialog, {
            title: text ?? "",
            trigger: /* @__PURE__ */jsx("div", {
              className: cn("absolute top-3 right-5 cursor-pointer rounded-sm border p-1", isSelected && "bg-primary-foreground"),
              children: /* @__PURE__ */jsx(Icon, {
                name: iconNames.visibility
              })
            }),
            content: examples ?? [],
            className: "rounded-xl"
          }), /* @__PURE__ */jsx(Image, {
            width: 150,
            height: 150,
            src: imageSrc,
            alt: text ?? "",
            className: "rounded-t-md border"
          }), /* @__PURE__ */jsxs("span", {
            className: "flex items-center gap-2 px-2 py-1 leading-7",
            children: [/* @__PURE__ */jsx("p", {
              children: text
            }), /* @__PURE__ */jsx(Tooltip, {
              content: text,
              delayDuration: 100,
              side: wellKnownPositions.bottom,
              children: /* @__PURE__ */jsx("div", {
                children: /* @__PURE__ */jsx(Icon, {
                  name: iconNames.questionMarkCircledIcon,
                  className: "text-muted-foreground"
                })
              })
            })]
          })]
        })
      })
    })
  });
}
__name(ImageRadioGroupItem, "ImageRadioGroupItem");

export { ImageRadioGroup, ImageRadioGroupItem };
