import { RadioGroup } from "@ax/components";

import * as S from "./style";

const ConditionalField = (props: IConditionalFieldProps) => {
	const { value, options, innerFields, onChange, defaultValue, disabled, fields } = props;

	const safeValue = value === undefined ? defaultValue : value;

	const handleChange = (newValue: any) => onChange(newValue);

	const visibleFields = innerFields?.filter((item: any, index: number) => {
		const condition = item?.props?.field?.condition || fields?.[index]?.condition;
		return condition === undefined || condition === value;
	});

	return (
		<S.Wrapper>
			<RadioGroup name="radio" value={safeValue} options={options} onChange={handleChange} disabled={disabled} />
			<S.Content data-testid="conditionalFieldContent">
				{visibleFields}
			</S.Content>
		</S.Wrapper>
	);
};

export default ConditionalField;

interface IConditionalFieldProps {
	value?: string | boolean;
	options: any[];
	innerFields: any;
	fields?: any[];
	onChange: (value: any) => void;
	defaultValue?: string | boolean;
	disabled?: boolean;
}
