"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    StickyNoteMediaDialog: ()=>StickyNoteMediaDialog
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
const external_react_namespaceObject = require("react");
const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
const external_StickyNoteMedia_cjs_namespaceObject = require("./StickyNoteMedia.cjs");
function initialUrl(media) {
    if (!media) return '';
    return 'youtube' === media.kind ? `https://www.youtube.com/watch?v=${media.videoId}` : media.url;
}
function initialType(media) {
    return media?.kind !== 'image' && media ? 'video' : 'image';
}
function StickyNoteMediaDialog({ initialMedia, onCancel, onSubmit }) {
    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
    const urlId = (0, external_react_namespaceObject.useId)();
    const altId = (0, external_react_namespaceObject.useId)();
    const fullWidthId = (0, external_react_namespaceObject.useId)();
    const imageTypeId = (0, external_react_namespaceObject.useId)();
    const videoTypeId = (0, external_react_namespaceObject.useId)();
    const [mediaType, setMediaType] = (0, external_react_namespaceObject.useState)(()=>initialType(initialMedia));
    const [url, setUrl] = (0, external_react_namespaceObject.useState)(()=>initialUrl(initialMedia));
    const [alt, setAlt] = (0, external_react_namespaceObject.useState)(()=>initialMedia?.kind === 'image' ? initialMedia.alt : '');
    const [fullWidth, setFullWidth] = (0, external_react_namespaceObject.useState)(initialMedia?.fullWidth ?? false);
    const [touched, setTouched] = (0, external_react_namespaceObject.useState)(false);
    const [previewState, setPreviewState] = (0, external_react_namespaceObject.useState)(()=>initialMedia?.kind !== 'youtube' && initialMedia ? 'loading' : 'loaded');
    const parsed = (0, external_react_namespaceObject.useMemo)(()=>(0, external_StickyNoteMedia_cjs_namespaceObject.parseStickyNoteMediaUrl)(url, mediaType, {
            alt: alt.trim(),
            fullWidth
        }), [
        alt,
        fullWidth,
        mediaType,
        url
    ]);
    const previewRequired = parsed.ok && 'youtube' !== parsed.value.kind;
    const isEditing = void 0 !== initialMedia;
    const validationMessage = (error)=>{
        if ('invalid-youtube-url' === error) return _({
            id: 'sticky-note.media.dialog.invalid-youtube',
            message: 'Add a valid YouTube video URL'
        });
        if ('unsupported-video-url' === error) return _({
            id: 'sticky-note.media.dialog.unsupported-video',
            message: 'Add a YouTube URL or a direct public video file URL such as MP4'
        });
        return _({
            id: 'sticky-note.media.dialog.invalid-url',
            message: 'Enter a valid public HTTPS URL'
        });
    };
    const error = url.trim() && !parsed.ok ? validationMessage(parsed.error) : null;
    const canSubmit = parsed.ok && (!previewRequired || 'loaded' === previewState);
    const resetPreview = (nextType, nextUrl)=>{
        const next = (0, external_StickyNoteMedia_cjs_namespaceObject.parseStickyNoteMediaUrl)(nextUrl, nextType);
        setPreviewState(next.ok && 'youtube' === next.value.kind ? 'loaded' : 'loading');
    };
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Dialog, {
        open: true,
        onOpenChange: (open)=>{
            if (!open) onCancel();
        },
        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DialogContent, {
            className: "sm:max-w-lg",
            children: [
                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DialogHeader, {
                    children: [
                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DialogTitle, {
                            children: isEditing ? _({
                                id: 'sticky-note.media.dialog.edit-title',
                                message: 'Edit media'
                            }) : _({
                                id: 'sticky-note.media.dialog.add-title',
                                message: 'Embed image or video'
                            })
                        }),
                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DialogDescription, {
                            children: _({
                                id: "sticky-note.media.dialog.description",
                                message: 'Add a public link. Video supports YouTube and direct video files.'
                            })
                        })
                    ]
                }),
                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("form", {
                    className: "grid gap-4",
                    onSubmit: (event)=>{
                        event.preventDefault();
                        if (canSubmit && parsed.ok) onSubmit(parsed.value);
                    },
                    children: [
                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                            className: "flex flex-col gap-4 py-2",
                            children: [
                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("fieldset", {
                                    className: "m-0 border-0 p-0",
                                    children: [
                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("legend", {
                                            className: "mb-2 text-sm font-medium",
                                            children: _({
                                                id: 'sticky-note.media.dialog.type-label',
                                                message: 'Media type'
                                            })
                                        }),
                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.RadioGroup, {
                                            value: mediaType,
                                            onValueChange: (value)=>{
                                                const nextType = value;
                                                setMediaType(nextType);
                                                setTouched(false);
                                                resetPreview(nextType, url);
                                            },
                                            className: "flex gap-5",
                                            children: [
                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                                    className: "flex items-center gap-2",
                                                    children: [
                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.RadioGroupItem, {
                                                            value: "image",
                                                            id: imageTypeId
                                                        }),
                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
                                                            htmlFor: imageTypeId,
                                                            children: _({
                                                                id: 'sticky-note.media.dialog.image-option',
                                                                message: 'Image'
                                                            })
                                                        })
                                                    ]
                                                }),
                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                                    className: "flex items-center gap-2",
                                                    children: [
                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.RadioGroupItem, {
                                                            value: "video",
                                                            id: videoTypeId
                                                        }),
                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
                                                            htmlFor: videoTypeId,
                                                            children: _({
                                                                id: 'sticky-note.media.dialog.video-option',
                                                                message: 'Video'
                                                            })
                                                        })
                                                    ]
                                                })
                                            ]
                                        })
                                    ]
                                }),
                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                    className: "flex flex-col gap-1.5",
                                    children: [
                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
                                            htmlFor: urlId,
                                            children: 'image' === mediaType ? _({
                                                id: 'sticky-note.media.dialog.image-url-label',
                                                message: 'Image URL'
                                            }) : _({
                                                id: 'sticky-note.media.dialog.video-url-label',
                                                message: 'Video URL'
                                            })
                                        }),
                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
                                            id: urlId,
                                            type: "url",
                                            autoFocus: true,
                                            value: url,
                                            placeholder: 'image' === mediaType ? _({
                                                id: 'sticky-note.media.dialog.image-url-placeholder',
                                                message: 'https://example.com/image.png'
                                            }) : _({
                                                id: 'sticky-note.media.dialog.video-url-placeholder',
                                                message: 'https://youtube.com/watch?v=… or https://example.com/video.mp4'
                                            }),
                                            "aria-invalid": touched && Boolean(error),
                                            "aria-describedby": `${urlId}-helper${touched && error ? ` ${urlId}-error` : ''}`,
                                            onChange: (event)=>{
                                                const nextUrl = event.target.value;
                                                setUrl(nextUrl);
                                                setTouched(true);
                                                resetPreview(mediaType, nextUrl);
                                            },
                                            onBlur: ()=>setTouched(true)
                                        }),
                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
                                            id: `${urlId}-helper`,
                                            className: "m-0 text-xs text-foreground-muted",
                                            children: 'image' === mediaType ? _({
                                                id: 'sticky-note.media.dialog.image-url-help',
                                                message: 'Use a public HTTPS image link.'
                                            }) : _({
                                                id: 'sticky-note.media.dialog.video-url-help',
                                                message: 'Use a YouTube link or a direct public HTTPS video file link.'
                                            })
                                        }),
                                        touched && error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
                                            id: `${urlId}-error`,
                                            role: "alert",
                                            className: "m-0 text-xs text-destructive",
                                            children: error
                                        })
                                    ]
                                }),
                                'image' === mediaType && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                    className: "flex flex-col gap-1.5",
                                    children: [
                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
                                            htmlFor: altId,
                                            children: _({
                                                id: 'sticky-note.media.dialog.alt-label',
                                                message: 'Alternative text'
                                            })
                                        }),
                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
                                            id: altId,
                                            value: alt,
                                            onChange: (event)=>setAlt(event.target.value)
                                        }),
                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
                                            className: "m-0 text-xs text-foreground-muted",
                                            children: _({
                                                id: 'sticky-note.media.dialog.alt-help',
                                                message: 'Describe the image for people who use screen readers.'
                                            })
                                        })
                                    ]
                                }),
                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                    className: "flex items-start gap-2",
                                    children: [
                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Checkbox, {
                                            id: fullWidthId,
                                            checked: fullWidth,
                                            onCheckedChange: (checked)=>setFullWidth(true === checked),
                                            className: "mt-0.5"
                                        }),
                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                            className: "flex flex-col gap-0.5",
                                            children: [
                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
                                                    htmlFor: fullWidthId,
                                                    className: "text-sm font-medium leading-none",
                                                    children: _({
                                                        id: 'sticky-note.media.dialog.full-width-label',
                                                        message: 'Make full width'
                                                    })
                                                }),
                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
                                                    className: "m-0 text-xs text-foreground-muted",
                                                    children: _({
                                                        id: 'sticky-note.media.dialog.full-width-help',
                                                        message: 'The image or video spans the available width of the sticky note.'
                                                    })
                                                })
                                            ]
                                        })
                                    ]
                                }),
                                parsed.ok && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                    className: "rounded-md border border-border-subtle bg-surface p-3",
                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                        className: "mx-auto max-w-full overflow-hidden rounded",
                                        style: {
                                            width: fullWidth ? '100%' : 'min(320px, 100%)'
                                        },
                                        children: 'failed' === previewState ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                            role: "alert",
                                            className: "flex min-h-24 items-center justify-center bg-black/10 px-3 text-center text-xs text-foreground-muted",
                                            children: _({
                                                id: 'sticky-note.media.dialog.preview-unavailable',
                                                message: 'We could not load a preview for this URL.'
                                            })
                                        }) : 'image' === parsed.value.kind ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
                                            src: parsed.value.url,
                                            alt: alt.trim() || _({
                                                id: 'sticky-note.media.dialog.image-preview',
                                                message: 'Image preview'
                                            }),
                                            referrerPolicy: "no-referrer",
                                            className: "block h-auto max-w-full",
                                            style: {
                                                width: fullWidth ? '100%' : 'auto'
                                            },
                                            onLoad: ()=>setPreviewState('loaded'),
                                            onError: ()=>setPreviewState('failed')
                                        }) : 'publicVideo' === parsed.value.kind ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("video", {
                                            src: parsed.value.url,
                                            "aria-label": _({
                                                id: 'sticky-note.media.dialog.video-preview',
                                                message: 'Video preview'
                                            }),
                                            controls: true,
                                            preload: "metadata",
                                            playsInline: true,
                                            className: "block h-auto w-full bg-black",
                                            onLoadedMetadata: ()=>setPreviewState('loaded'),
                                            onError: ()=>setPreviewState('failed'),
                                            children: _({
                                                id: 'sticky-note.media.video-unavailable',
                                                message: 'Video playback is unavailable.'
                                            })
                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
                                            src: `https://i.ytimg.com/vi/${parsed.value.videoId}/hqdefault.jpg`,
                                            alt: _({
                                                id: 'sticky-note.media.dialog.video-preview',
                                                message: 'Video preview'
                                            }),
                                            referrerPolicy: "no-referrer",
                                            className: "block aspect-video w-full object-cover"
                                        })
                                    })
                                })
                            ]
                        }),
                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DialogFooter, {
                            children: [
                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
                                    type: "button",
                                    variant: "outline",
                                    onClick: onCancel,
                                    children: _({
                                        id: 'sticky-note.media.dialog.cancel',
                                        message: 'Cancel'
                                    })
                                }),
                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
                                    type: "submit",
                                    disabled: !canSubmit,
                                    children: isEditing ? _({
                                        id: 'sticky-note.media.dialog.save',
                                        message: 'Save changes'
                                    }) : _({
                                        id: 'sticky-note.media.dialog.embed',
                                        message: 'Embed media'
                                    })
                                })
                            ]
                        })
                    ]
                })
            ]
        })
    });
}
exports.StickyNoteMediaDialog = __webpack_exports__.StickyNoteMediaDialog;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "StickyNoteMediaDialog"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
