import TextField from './fields/text-field';
import SelectField from './fields/select-field';
import CheckboxField from './fields/checkbox-field';
import SwitchField from './fields/switch-field';
import DateField from './fields/date-field';
import TimeField from './fields/time-field';
import DateTimeField from "./fields/datetime-field";
import { PanelRow } from '@wordpress/components';

const FIELD_MAP = {
	text: TextField,
	email: TextField,
	tel: TextField,
	url: TextField,
	number: TextField,
	textarea: TextField,
	select: SelectField,
	radio: SelectField,
	checkbox: CheckboxField,
	set: CheckboxField,
	true_false: SwitchField,
	date: DateField,
	time: TimeField,
	datetime: DateTimeField,
};

const Fields = ({ field, value, onChange }) => {
	const Component = FIELD_MAP[field.type];
	if (!Component) return null; // repeater/upload/selector: TODO
	return <PanelRow><Component field={field} value={value} onChange={onChange} /></PanelRow>;
};

export default Fields;