import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { forwardRef, useState, useRef, useImperativeHandle } from "react";
import { cn } from "../utils/cn.js";
import { SignaturePad } from "./signature-pad.js";
import { Button } from "../button/button.js";
import { D as Dialog, a as DialogTrigger, b as DialogContent, c as DialogHeader, d as DialogTitle, e as DialogDescription, f as DialogBody, g as DialogFooter } from "../../dialog-BdqQDDSP.js";
import { Image } from "../image/image.js";
import { c as createLucideIcon } from "../../createLucideIcon-Bni0WIE-.js";
/**
 * @license lucide-react v0.540.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode = [
  [
    "path",
    {
      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
      key: "1a8usu"
    }
  ]
];
const Pen = createLucideIcon("pen", __iconNode);
const Signature = forwardRef(
  ({
    value,
    onChange,
    onClear,
    width = 400,
    height = 200,
    penColor,
    penWidth,
    disabled = false,
    placeholder = "Click to sign",
    className,
    canvasClassName
  }, ref) => {
    const [open, setOpen] = useState(false);
    const [tempSignature, setTempSignature] = useState(value || "");
    const signaturePadRef = useRef(null);
    const handleOpenChange = (newOpen) => {
      if (newOpen) {
        setTempSignature(value || "");
      }
      setOpen(newOpen);
    };
    const handleSignatureChange = (dataURL) => {
      setTempSignature(dataURL);
    };
    const handleClear = () => {
      if (signaturePadRef.current) {
        signaturePadRef.current.clear();
      }
      setTempSignature("");
      if (onClear) {
        onClear();
      }
    };
    const handleCancel = () => {
      setTempSignature(value || "");
      setOpen(false);
    };
    const handleDone = () => {
      if (onChange) {
        onChange(tempSignature);
      }
      setOpen(false);
    };
    useImperativeHandle(ref, () => ({
      clear: () => {
        setTempSignature("");
        if (onChange) {
          onChange("");
        }
        if (onClear) {
          onClear();
        }
      },
      getSignature: () => value || ""
    }));
    const hasSignature = Boolean(value && value.length > 0);
    return /* @__PURE__ */ jsx("div", { className: cn("inline-block", className), children: /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: handleOpenChange, children: [
      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
        "button",
        {
          type: "button",
          disabled,
          "aria-label": hasSignature ? "Edit signature" : "Add signature",
          className: cn(
            "relative overflow-hidden rounded-lg   transition-all bg-gray-200",
            "hover:border-accent focus:outline-none  ",
            "disabled:cursor-not-allowed disabled:opacity-50",
            hasSignature ? "border-default" : "border-strong",
            "cursor-pointer"
          ),
          style: { width, height },
          children: hasSignature ? /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              Image,
              {
                src: value,
                alt: "Signature",
                className: "w-full h-full object-cover",
                role: "img"
              }
            ),
            /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 p-1 rounded bg-default backdrop-blur-sm", children: /* @__PURE__ */ jsx(Pen, { className: "w-4 h-4 text-subtle" }) })
          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-subtle", children: [
            /* @__PURE__ */ jsx(Pen, { className: "w-8 h-8 mb-2 text-subtle" }),
            /* @__PURE__ */ jsx("span", { className: "text-sm text-subtle", children: placeholder })
          ] })
        }
      ) }),
      /* @__PURE__ */ jsxs(DialogContent, { variant: "modal", className: "sm:max-w-[500px]", children: [
        /* @__PURE__ */ jsxs(DialogHeader, { children: [
          /* @__PURE__ */ jsx(DialogTitle, { children: "Signature" }),
          /* @__PURE__ */ jsx(DialogDescription, { children: "Draw your signature below" })
        ] }),
        /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(
          SignaturePad,
          {
            ref: signaturePadRef,
            value: tempSignature,
            onChange: handleSignatureChange,
            penColor,
            penWidth,
            disabled: false,
            canvasClassName
          }
        ) }) }),
        /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 w-full", children: [
          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleClear, children: "Clear" }) }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: "Cancel" }),
            /* @__PURE__ */ jsx(Button, { variant: "default", onClick: handleDone, children: "Done" })
          ] })
        ] }) })
      ] })
    ] }) });
  }
);
Signature.displayName = "Signature";
export {
  Signature
};
