import React from 'react';
import { Field } from 'redux-form';
import PropTypes from 'prop-types';

import Form from './form';

import {
	pickerRenderer,
	picker2Renderer,
	textInputRenderer,
	textInput2Renderer,
	switchRenderer,
	sliderRenderer,
} from './renderer';


const fieldCreator = (renderComponent) => {
	const FieldWrapper = React.forwardRef((props, ref) => {
		const {
			name, validate, onChange, defaultValue, useDefaultValue, ...otherProps
		} = props;
		return (
			<Field
				refName={ref}
				name={name}
				validate={validate}
				onChange={onChange}
				component={renderComponent}
				defaultValue={defaultValue}
				useDefaultValue
				{...otherProps}
			/>
		);
	});

	FieldWrapper.propTypes = {
		name: PropTypes.string.isRequired,
		validate: PropTypes.func,
		onChange: PropTypes.func,
		defaultValue: PropTypes.string,
		useDefaultValue: PropTypes.bool,
	};

	FieldWrapper.defaultProps = {
		validate: () => { },
		onChange: () => { },
		defaultValue: '',
		useDefaultValue: false,
	};

	return FieldWrapper;
};

export { Form };
export const Picker = fieldCreator(pickerRenderer);
export const Picker2 = fieldCreator(picker2Renderer);
export const TextInput = fieldCreator(textInputRenderer);
export const TextInput2 = fieldCreator(textInput2Renderer);
export const Switch = fieldCreator(switchRenderer);
export const Slider = fieldCreator(sliderRenderer);
