import { useState } from '@wordpress/element';
import { Button, Panel, PanelBody } from '@wordpress/components';
import Fields from '../Fields';

const templateLabel = (template, row, fields) => {
	if (!template?.includes('{{')) return template;
	return template.replace(/{{(.*?)}}/g, (_, name) => {
		const val = row[name];
		if (val === undefined) return '';
		return Array.isArray(val) ? val.join(', ') : String(val);
	});
};

const emptyRow = (fields) =>
	Object.fromEntries(Object.entries(fields || {}).map(([name, f]) => [name, f.default ?? '']));

const RepeaterField = ({ field, value, onChange, meta }) => {

	const rows = Array.isArray(value) ? value : [];
	const subFields = field.fields || {};
	const [openIndex, setOpenIndex] = useState(null);

	const updateRow = (index, name, val) => {
		const next = rows.map((row, i) => (i === index ? { ...row, [name]: val } : row));
		onChange(next);
	};

	const addRow = () => onChange([...rows, emptyRow(subFields)]);
	const removeRow = (index) => onChange(rows.filter((_, i) => i !== index));

	return (
		<div className="jvb-repeater-field" id={field.name}>
			<p className="jvb-field-label">{field.label}</p>

			<Panel>
				{rows.map((row, index) => (
					<PanelBody
						key={index}
						title={templateLabel(field.row_label, row, subFields) || `Row ${index + 1}`}
						initialOpen={openIndex === index}
						onToggle={() => setOpenIndex(openIndex === index ? null : index)}
					>
						{Object.entries(subFields).map(([name, subField]) => (
							<Fields
								key={name}
								field={{ ...subField, name }}
								value={row[name]}
								onChange={(val) => updateRow(index, name, val)}
								meta={ meta }
							/>
						))}
						<Button variant="link" isDestructive onClick={() => removeRow(index)}>
							Remove
						</Button>
					</PanelBody>
				))}
			</Panel>

			<Button variant="secondary" onClick={addRow}>
				{field.add_label || 'Add Row'}
			</Button>
		</div>
	);
};

export default RepeaterField;