import PropTypes from 'prop-types';
import React from 'react';
import classnames from 'classnames';
import { Felt } from './Felt';
import { ledetekst } from '../diverse/Ledetekst';
import { remove } from '../utils/utils';

function formaterTall(tall) {
	return String(tall).replace(/(.)(?=(\d{3})+$)/g, '$1 ');
}

class Tekstfelt extends Felt {
	constructor(props) {
		super(props);
		this.state = {
			verdi: null,
		};
		this._registrer('');
		this._obligatorisk = this._sjekk(true).length > 0;
		this._registrer(this.props.verdi());
	}

	static getDerivedStateFromProps(nextProps, prevState) {
		if (nextProps.verdi() && prevState.verdi === null) {
			return { verdi: nextProps.verdi() };
		}

		return null;
	}

	componentDidUpdate(prevProps, prevState) {
		if (prevProps.verdi() !== this.props.verdi()) {
			this.setState({ verdi: this.props.verdi() });
			this._registrer(this.props.verdi());
		}
	}

	_endreVerdi(verdi) {
		if (typeof this.props.formattering === 'function') {
			verdi = this.props.formattering(verdi, this.state.verdi);
		}
		this.setState({
			verdi: verdi,
		});
		if (typeof this.props.vedEndring === 'function') {
			this.props.vedEndring(verdi);
		}
	}

	_sendVerdi() {
		this._vedDimming();
		var verdi = this.state.verdi || '';
		if (typeof verdi === 'string') {
			verdi = verdi.trim();
		}
		this._registrer(verdi);
		if (verdi !== this.props.verdi()) {
			if (this._sjekk(true).length > 0) {
				return;
			}
			this.props.vedVerdi(verdi);
		}
	}

	render() {
		const { maxLength } = this.props;
		const makslengde = maxLength || 60;
		const feilaktig = this._sjekk().length > 0;
		const klasser = classnames(
			'tekstfelt',
			'js-skal-valideres',
			this.props.klasse,
			{ 'har-valideringsfeil': feilaktig }
		);

		const Komponent = this.props.linjer ? 'textarea' : 'input';
		const restProps = remove(this.props, [
			'vedVerdi',
			'verdi',
			'formattering',
		]);

		return (
			<div className="skjemagruppe">
				{this.props.tittel ? (
					<label className="label-blokk" htmlFor={this.id}>
						{this.props.tittel}
					</label>
				) : null}
				{React.createElement(Komponent, {
					id: this.id,
					'aria-invalid': feilaktig,
					'aria-describedby': this.id + 'info',
					rows: this.props.linjer,
					className: klasser,
					disabled: this.props.disabled,
					onBlur: () => this._sendVerdi(),
					onChange: (event) => this._endreVerdi(event.target.value),
					placeholder: this.props.plassholder,
					value: this.state.verdi || '',
					maxLength: makslengde,
					'data-hj-suppress': true,
					style: this.props.style,
					tabIndex: 0,
					...restProps,
				})}
				{this.props.skalViseMakslengde && (
					<p className="util-leselengde vertical-spacing-small">
						{ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.Tekstfelt.makslengde',
							formaterTall((this.state.verdi || '').length),
							formaterTall(makslengde)
						)}
					</p>
				)}
				{this._renderIrettesettelse()}
			</div>
		);
	}
}

Tekstfelt.propTypes = {
	disabled: PropTypes.bool,
	klasse: PropTypes.string,
	skalViseMakslengde: PropTypes.bool,
	linjer: PropTypes.number,
	tittel: PropTypes.string,
	verdi: PropTypes.func,
	formattering: PropTypes.func,
	plassholder: PropTypes.string,
	vedEndring: PropTypes.func,
	vedVerdi: PropTypes.func.isRequired,
	maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};

export { Tekstfelt };