import ColorField from "@/components/animation-settings/ColorField";
import ConditionsField from "@/components/animation-settings/ConditionsField";
import InfoNote, { InfoToggle } from "@/components/shared/InfoToggle";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { __ } from "@wordpress/i18n";
import { useEffect, useState } from "react";
import {
FaAngleDoubleUp,
FaAngleUp,
FaArrowCircleUp,
FaArrowUp,
FaCaretUp,
FaChevronCircleUp,
FaChevronUp,
FaLevelUpAlt,
FaLongArrowAltUp,
} from "react-icons/fa";
// One preview glyph per choice `scroll_to_top_icons` (PHP) offers. Rendered
// via react-icons rather than the raw `fa …` class + Font Awesome's webfont —
// that font isn't loaded on this admin screen, so the class alone would draw
// nothing. Keyed by the exact value the field stores, so a class this map
// doesn't know (e.g. imported from a v3 site's own, unrestricted icon pick)
// simply renders no preview instead of guessing.
const ICON_PREVIEWS = {
"fas fa-arrow-up": FaArrowUp,
"fas fa-angle-up": FaAngleUp,
"fas fa-angle-double-up": FaAngleDoubleUp,
"fas fa-chevron-up": FaChevronUp,
"fas fa-chevron-circle-up": FaChevronCircleUp,
"fas fa-caret-up": FaCaretUp,
"fas fa-arrow-circle-up": FaArrowCircleUp,
"fas fa-long-arrow-alt-up": FaLongArrowAltUp,
"fas fa-level-up-alt": FaLevelUpAlt,
};
/**
* One settings panel, rendered entirely from the schema the server ships in
* `WCF_ADDONS_ADMIN.animation_settings.schema`.
*
* Deliberately generic rather than one component per feature: the schema
* already has to exist server-side (it drives defaults, sanitising, the Kit
* import and Pro's render bridge), so hand-writing the same field list again in
* React would just be a second copy free to drift. A field added to
* Animation_Settings::schema() appears here with no JS change at all — and its
* control type, label, range and options are guaranteed to match what the
* sanitiser will actually accept.
*
* Draft state lives here so Cancel can throw it away; the committed value stays
* with the parent, which is also what the legacy toggle writes through.
*/
const FeaturePanel = ({
feature,
schema,
value,
globals = [],
hasPro,
saving,
onSave,
note = null,
}) => {
const [draft, setDraft] = useState(value);
// What `note` says about this panel, revealed from the ⓘ beside its title.
const [noteOpen, setNoteOpen] = useState(false);
// Re-sync when the parent commits (save, or an external reset).
useEffect(() => setDraft(value), [value]);
const set = (key, next) => setDraft((prev) => ({ ...prev, [key]: next }));
// A group can declare itself free (`pro: false` in the server schema) — the
// Performance panels are, since asset delivery ships in the free plugin.
// Anything that doesn't say otherwise is treated as Pro, so Animation
// Settings keeps its badge without having to opt in.
const isPro = schema?.pro !== false;
// Without Pro nothing renders these on the front end, so the panel is
// readable but inert rather than hidden — the point is the upsell.
const locked = isPro && !hasPro;
const dirty = JSON.stringify(draft) !== JSON.stringify(value);
const fields = Object.entries(schema?.fields || {});
// The enable switch gets the header row; everything else stacks below it.
const enableField = fields.find(([key]) => key === "enable");
// A field can declare `dep: { field, value }` — shown only while another
// field in this same panel currently holds one of `value`'s options. E.g.
// Scroll to Top's Height/Border Radius only mean something for the Default
// layout, and Progress Color only for Progress Circle. The value is still
// stored and saved even while hidden — this hides the CONTROL, not the data,
// same as flipping a device off in the `devices` field above.
const depSatisfied = (dep) => {
if (!dep) return true;
const current = draft?.[dep.field] ?? "";
const allowed = Array.isArray(dep.value) ? dep.value : [dep.value];
return allowed.includes(current);
};
const rest = fields.filter(
([key, field]) => key !== "enable" && depSatisfied(field.dep),
);
const renderField = ([key, field]) => {
const current = draft?.[key];
// A bool that isn't `enable` — that one owns the header row instead.
if (field.type === "bool") {
return (
);
}
if (field.type === "icon") {
const options = field.options || {};
const currentValue = current?.value || "";
// A value the shortlist doesn't know (a v3 import from Elementor's own,
// unrestricted icon browser) still needs a row of its own, or the
// select would silently show nothing selected while the setting is
// still very much in effect on the front end.
const knownCurrent = currentValue !== "" && currentValue in options;
const Preview = ICON_PREVIEWS[currentValue];
return (
{field.label}
{Preview ? : null}
);
}
// A plain scalar, as opposed to `size`'s {size, unit}. Mirrors the v3
// controls that are NUMBER rather than SLIDER — see the schema.
if (field.type === "number") {
return (
);
}
// Per-device on/off + a number, for the smooth scroller. The device list
// comes from the server so it cannot drift from what the sanitiser accepts
// — the runtime indexes its payload by exactly these keys.
if (field.type === "devices") {
const devices = Object.entries(field.devices || {});
const rows = current || {};
const setDevice = (device, patch) =>
set(key, {
...rows,
[device]: { ...(rows[device] || {}), ...patch },
});
return (
);
}
// Include/exclude rules over locations. Its own component — the "Specific
// pages" rows need hooks, which cannot live in a render helper that is
// called conditionally.
if (field.type === "conditions") {
return (
set(key, next)}
/>
);
}
if (field.type === "size") {
return (
);
}
return null;
};
// Panels are a single narrow column of controls, except where the schema says
// otherwise — display-condition rows are two selects side by side and do not
// fit in 420px.
const width = schema?.width === "wide" ? "max-w-[720px]" : "max-w-[420px]";
return (
{/* Top save bar — always visible at the top-right. */}
{/* w-0 min-w-full — see InfoToggle: the note must wrap to the panel's
width, not decide it. */}
{note && noteOpen && (
{note}
)}
{locked && (
{__(
"Animation Addons Pro renders this. Settings here are saved, but nothing shows on the front end until Pro is active.",
"animation-addons-for-elementor",
)}