import { useSiteVibesOverride } from '@agent/hooks/useSiteVibesOverride';
import { useSiteVibesVariations } from '@agent/hooks/useSiteVibesVariations';
import { useChatStore } from '@agent/state/chat';
import {
Fragment,
useEffect,
useMemo,
useRef,
useState,
} from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
export const SelectSiteVibes = ({ onConfirm, onCancel, onLoad }) => {
const { data, isLoading } = useSiteVibesVariations();
const { vibes, css: styles } = data || {};
const [selected, setSelected] = useState(null);
const css = selected ? styles[selected] : '';
const { undoChange } = useSiteVibesOverride({ css, slug: selected });
const noVibes = !vibes || vibes.length === 0;
const confirmed = useRef(false);
useEffect(() => {
return () => {
if (!confirmed.current) undoChange();
};
}, []);
const shuffled = useMemo(
() => (vibes ? [...vibes].sort(() => Math.random() - 0.5) : []),
[vibes],
);
const { addMessage, messages } = useChatStore();
const handleConfirm = () => {
if (!selected) return;
confirmed.current = true;
onConfirm({ data: { selectedVibe: selected }, shouldRefreshPage: true });
};
useEffect(() => {
if (isLoading) return;
onLoad();
}, [isLoading, onLoad]);
useEffect(() => {
if (isLoading || !noVibes) return;
const timer = setTimeout(() => onCancel(), 100);
// translators: "site style" refers to the structural aesthetic style for the site.
const content = __(
'We were unable to find any website style for your theme.',
'extendify-local',
);
const last = messages.at(-1)?.details?.content;
if (content === last) return () => clearTimeout(timer);
addMessage('message', { role: 'assistant', content, error: true });
return () => clearTimeout(timer);
}, [addMessage, onCancel, noVibes, messages, isLoading]);
if (isLoading) {
return (
{
// translators: "site style" refers to the structural aesthetic style for the site.
__('Loading website style options...', 'extendify-local')
}
);
}
if (noVibes) return null;
return (
{shuffled?.slice(0, 10).map(({ slug }, index) => (
))}
);
};