'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Modal } from '../../components/ui/Modal.js';
import { Button } from '../../components/ui/Button.js';
import { MediaPickerModal } from '../../components/MediaPickerModal.js';
import { RichTextField } from '../../fields/RichTextField.js';
const LABEL = 'text-foreground mb-1 block text-xs font-medium';
const INPUT = 'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none';
function slugify(value) {
    return value
        .toLowerCase()
        .trim()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');
}
/** Edits post-level fields: title, slug, excerpt, featured image, category, body, SEO. */
export function PostFieldsModal({ open, post, canEdit, onClose, onSave }) {
    const [title, setTitle] = useState(post.title);
    const [slug, setSlug] = useState(post.slug);
    const [excerpt, setExcerpt] = useState(post.excerpt);
    const [featuredImage, setFeaturedImage] = useState(post.featuredImage);
    const [category, setCategory] = useState(post.category);
    const [body, setBody] = useState(post.body);
    const [seoTitle, setSeoTitle] = useState(post.seoTitle);
    const [seoDescription, setSeoDescription] = useState(post.seoDescription);
    const [slugTouched, setSlugTouched] = useState(Boolean(post.slug));
    const [mediaOpen, setMediaOpen] = useState(false);
    useEffect(() => {
        if (!open)
            return;
        setTitle(post.title);
        setSlug(post.slug);
        setExcerpt(post.excerpt);
        setFeaturedImage(post.featuredImage);
        setCategory(post.category);
        setBody(post.body);
        setSeoTitle(post.seoTitle);
        setSeoDescription(post.seoDescription);
        setSlugTouched(Boolean(post.slug));
    }, [open, post]);
    function handleTitle(next) {
        setTitle(next);
        if (!slugTouched)
            setSlug(slugify(next));
    }
    function handleSave() {
        onSave({ title, slug, excerpt, featuredImage, category, body, seoTitle, seoDescription });
        onClose();
    }
    return (_jsxs(Modal, { open: open, onClose: onClose, title: "Post details", actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleSave, disabled: !canEdit, children: "Done" })] }), children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsxs("label", { className: LABEL, htmlFor: "pf-title", children: ["Title ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "pf-title", className: INPUT, value: title, disabled: !canEdit, onChange: (e) => handleTitle(e.target.value) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsxs("label", { className: LABEL, htmlFor: "pf-slug", children: ["Slug ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "pf-slug", className: INPUT, value: slug, disabled: !canEdit, onChange: (e) => {
                                            setSlugTouched(true);
                                            setSlug(slugify(e.target.value));
                                        } })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "pf-category", children: "Category" }), _jsx("input", { id: "pf-category", className: INPUT, value: category, disabled: !canEdit, placeholder: "e.g. Product", onChange: (e) => setCategory(e.target.value) })] })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "pf-excerpt", children: "Excerpt" }), _jsx("textarea", { id: "pf-excerpt", className: `${INPUT} min-h-[60px] resize-y`, value: excerpt, disabled: !canEdit, placeholder: "A short summary shown in listings and the header.", onChange: (e) => setExcerpt(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "pf-image", children: "Featured image" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { id: "pf-image", className: `${INPUT} flex-1`, value: featuredImage, disabled: !canEdit, placeholder: "https://\u2026 or pick from the media library", onChange: (e) => setFeaturedImage(e.target.value) }), _jsx("button", { type: "button", disabled: !canEdit, onClick: () => setMediaOpen(true), className: "bg-accent text-foreground border-border hover:bg-accent/80 shrink-0 rounded-md border px-3 py-1.5 text-xs font-medium disabled:opacity-50", children: "Browse" })] }), featuredImage && (_jsx("div", { className: "border-border bg-muted mt-2 overflow-hidden rounded-md border", children: _jsx("img", { src: featuredImage, alt: "", className: "h-28 w-full object-cover" }) }))] }), _jsx("div", { children: _jsx(RichTextField, { label: "Body", value: body, onChange: canEdit ? setBody : () => { }, helpText: "Rendered by the Article Body section when its source is set to the post Body field." }) }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "pf-seo-title", children: "SEO title" }), _jsx("input", { id: "pf-seo-title", className: INPUT, value: seoTitle, disabled: !canEdit, onChange: (e) => setSeoTitle(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "pf-seo-desc", children: "SEO description" }), _jsx("textarea", { id: "pf-seo-desc", className: `${INPUT} min-h-[60px] resize-y`, value: seoDescription, disabled: !canEdit, onChange: (e) => setSeoDescription(e.target.value) })] })] }), _jsx(MediaPickerModal, { open: mediaOpen, onClose: () => setMediaOpen(false), onSelect: (url) => {
                    setFeaturedImage(url);
                    setMediaOpen(false);
                }, accept: "image/*" })] }));
}
//# sourceMappingURL=PostFieldsModal.js.map