import React, { Component } from 'react';
import { TextInput2 } from '~comp/reduxForm';
import { Dialogue } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';

import { validator, defaultConstrains } from '~/lib/validate';

import { ModalForm } from './modalForm';


const nameValidate = (values) => {
	let errors = {};
	errors = validator({
		name: values.name,
	}, {
		name: defaultConstrains.required,
	});
	return errors;
};

export class ModalNameForm extends Component {
	static propTypes = {
		form: PropTypes.string.isRequired,
		formTitle: PropTypes.string.isRequired,
		placeholder: PropTypes.string,
		maxLength: PropTypes.number,
	};

	static defaultProps = {
		placeholder: '',
		maxLength: 100,
	};

	constructor(props) {
		super(props);

		this.setRef = this.setRef.bind(this);
	}

	setRef(ref) {
		this.modal = ref;
		this.open = () => this.modal && this.modal.open();
		this.close = (callback) => this.modal && this.modal.close(callback);
		this.reset = () => this.modal && this.modal.reset();
	}

	render() {
		return (
			<ModalForm
				{...this.props}
				ref={this.setRef}
				validate={nameValidate}
			>
				<Dialogue.Title>{this.props.formTitle}</Dialogue.Title>
				<Dialogue.Additional>
					<TextInput2 name="name" testID="Name" placeholder={this.props.placeholder} autoFocus maxLength={this.props.maxLength} />
				</Dialogue.Additional>
			</ModalForm>
		);
	}
}
