'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client';
import { Modal } from '../../components/ui/Modal.js';
import { Button } from '../../components/ui/Button.js';
import { MediaPickerModal } from '../../components/MediaPickerModal.js';
import { TagInput } from '../../components/TagInput.js';
import { RichTextField } from '../../fields/RichTextField.js';
import { SeoCharCount } from '../../components/seo/SeoCharCount.js';
const SEO_TITLE_MIN = 30;
const SEO_TITLE_MAX = 60;
const SEO_DESC_MIN = 120;
const SEO_DESC_MAX = 160;
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';
const slugify = normalizeSlug;
/** Edits post-level fields: title, slug, excerpt, featured image, category, tags, body, SEO. */
export function PostFieldsModal({ open, post, canEdit, fields, 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 [tags, setTags] = useState(post.tags);
    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);
    const categoryField = fields?.category;
    const categoryOptions = categoryField?.type === 'select' && Array.isArray(categoryField.options)
        ? categoryField.options
        : null;
    const tagsField = fields?.tags;
    const hasTags = tagsField?.type === 'array';
    useEffect(() => {
        if (!open)
            return;
        setTitle(post.title);
        setSlug(post.slug);
        setExcerpt(post.excerpt);
        setFeaturedImage(post.featuredImage);
        setCategory(post.category);
        setTags(post.tags);
        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));
    }
    const slugError = validateSlug(slug);
    function handleSave() {
        if (slugError)
            return;
        onSave({ title, slug, excerpt, featuredImage, category, tags, 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 || Boolean(slugError), 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, "aria-invalid": Boolean(slugError), "aria-describedby": slugError ? 'pf-slug-error' : undefined, onChange: (e) => {
                                            setSlugTouched(true);
                                            setSlug(slugify(e.target.value));
                                        } }), slugError && (_jsx("p", { id: "pf-slug-error", className: "text-destructive mt-1 text-xs", children: slugError }))] }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "pf-category", children: "Category" }), categoryOptions ? (_jsxs("select", { id: "pf-category", className: INPUT, value: category, disabled: !canEdit, onChange: (e) => setCategory(e.target.value), children: [_jsx("option", { value: "", children: "No category" }), categoryOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))), category && !categoryOptions.some((o) => o.value === category) && (_jsx("option", { value: category, children: category }))] })) : (_jsx("input", { id: "pf-category", className: INPUT, value: category, disabled: !canEdit, placeholder: "e.g. Product", onChange: (e) => setCategory(e.target.value) }))] })] }), hasTags && (_jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "pf-tags", children: "Tags" }), _jsx(TagInput, { id: "pf-tags", value: tags, onChange: setTags, collection: post.postType, field: "tags", disabled: !canEdit, maxTags: tagsField?.maxRows })] })), _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: [_jsxs("div", { className: "mb-1 flex items-center justify-between", children: [_jsx("label", { className: `${LABEL} mb-0`, htmlFor: "pf-seo-title", children: "SEO title" }), _jsx(SeoCharCount, { value: seoTitle, min: SEO_TITLE_MIN, max: SEO_TITLE_MAX })] }), _jsx("input", { id: "pf-seo-title", className: INPUT, value: seoTitle, disabled: !canEdit, placeholder: title || 'Defaults to the post title', onChange: (e) => setSeoTitle(e.target.value) })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between", children: [_jsx("label", { className: `${LABEL} mb-0`, htmlFor: "pf-seo-desc", children: "SEO description" }), _jsx(SeoCharCount, { value: seoDescription, min: SEO_DESC_MIN, max: SEO_DESC_MAX })] }), _jsx("textarea", { id: "pf-seo-desc", className: `${INPUT} min-h-[60px] resize-y`, value: seoDescription, disabled: !canEdit, placeholder: excerpt || 'Summarize the post for search results (120–160 characters)', 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