import React, { useEffect, useId, useRef, useState } from "react"; import { __, sprintf } from "@wordpress/i18n"; import { SortableContext, verticalListSortingStrategy, } from "@dnd-kit/sortable"; import { Plus, GripVertical, ChevronUp, ChevronDown, ChevronRight, Trash2, Copy, Workflow, X, Pencil, } from "lucide-react"; import Modal from "@libs/modal"; import SortableRule from "./SortableRule"; import ConditionBuilder from "./ConditionBuilder"; import ScheduleFields from "./ScheduleFields"; import { getFlowSections, getSectionSummary } from "./flowSections"; import useStickyRuleFlow, { STACKED_LAYOUT_QUERY } from "./useStickyRuleFlow"; import "./flow-editor.scss"; const FlowArrow = () => ( ); const RuleFlowEditor = ({ rules, ruleType, ruleLabel, conditionTypes, sidebarContent, renderTargetFields, renderActionFields, showSchedule, accessRule, reducedMotion, onAdd, onUpdate, onDelete, onDuplicate, onMoveUp, onMoveDown, onToggle, }) => { const [selectedId, setSelectedId] = useState(null); const [openSection, setOpenSection] = useState(null); const flowId = useId(); const workspaceRef = useRef(null); const canvasRef = useRef(null); const contentRef = useRef(null); const revealCanvas = useStickyRuleFlow({ workspaceRef, trackRef: canvasRef, canvasRef: contentRef, }); const selectRefs = useRef(new Map()); const rule = rules.find((item) => item.id === selectedId); const sections = getFlowSections({ ruleType, accessRule, hasTarget: !!renderTargetFields, hasAction: !!renderActionFields, showSchedule, }); const section = sections.find((item) => item.id === openSection); const enabled = rule?.enabled !== false; // Discard, deletion, or a reload may remove the selected rule. UI state never // becomes part of the persisted object, including when a rule is reordered. useEffect(() => { if (selectedId && !rules.some((item) => item.id === selectedId)) { setSelectedId(null); setOpenSection(null); } }, [rules, selectedId]); const selectRule = (id, revealFlow = false) => { setSelectedId(id); setOpenSection(null); if (revealFlow) { requestAnimationFrame(() => { const behavior = reducedMotion ? "auto" : "smooth"; if (window.matchMedia(STACKED_LAYOUT_QUERY).matches) { canvasRef.current?.scrollIntoView({ block: "start", behavior }); } else { revealCanvas(behavior); } }); } }; const closeRule = () => { selectRefs.current.get(selectedId)?.focus(); setSelectedId(null); setOpenSection(null); }; const openDrawer = (id) => setOpenSection(id); const update = (updates) => onUpdate(rule.id, updates); const addRule = () => { selectRule(onAdd(), true); }; return (
{rule ? ( <>
{sprintf( /* translators: %d: rule number. */ __("Rule #%d", "arraysubs"), rules.findIndex((item) => item.id === rule.id) + 1, )}

{rule.name || ruleLabel}

{enabled ? __("Click a step to edit its settings.", "arraysubs") : __( "This rule is disabled. Enable it in the list to edit its steps.", "arraysubs", )}

{sections.map((step, index) => { const Icon = step.icon; const summary = getSectionSummary(step.id, rule, conditionTypes) || step.hint; return ( {index > 0 && step.id !== "schedule" && }
{step.label}
); })}
{__("End of rule", "arraysubs")}
) : (

{__("Select a rule to edit", "arraysubs")}

{__( "Choose a rule from the list to see how it works, then open any step to make changes.", "arraysubs", )}

)}
setOpenSection(null)} size="lg" title={section?.title} className="arraysubs-rule-drawer" externalDialogSelector=".media-modal, .mce-window, .tox-dialog-wrap, #wp-link-wrap" > {rule && section && (
{rule.name || ruleLabel}

{section.hint}

{section.id === "conditions" && ( update({ conditions })} conditionTypes={conditionTypes} /> )} {section.id === "target" && renderTargetFields?.(rule, update)} {section.id === "actions" && renderActionFields?.(rule, update)} {section.id === "schedule" && ( )}
)}
); }; export default RuleFlowEditor;