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 RepeaterField from "./fields/repeater-field";
import UploadField from "./fields/upload-field";
import SelectorField from "./fields/selector-field";
import LocationField from "./fields/location-field.js";
import GroupField from "./fields/group-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,
	repeater: RepeaterField,
	upload: UploadField,
	selector: SelectorField,
	location: LocationField,
	group: GroupField
};

const OPERATORS = {
	'=':  (a, b) => a == b,
	'==': (a, b) => a == b,
	'!=': (a, b) => a != b,
	'>':  (a, b) => a > b,
	'<':  (a, b) => a < b,
	'in': (a, b) => Array.isArray(b) ? b.includes(a) : String(b).split(',').includes(a),
};

export const checkCondition = (condition, meta) => {
	if (!condition?.field) return true;
	const compare = OPERATORS[condition.operator] || OPERATORS['='];
	return compare(meta?.[condition.field], condition.value);
};

const Fields = ({ id, field, value, onChange, meta }) => {
	if (!checkCondition(field.condition, meta)) {
		return null;
	}

	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;