import PropTypes from 'prop-types';
import React from 'react';
import classnames from 'classnames';
import { Formatering } from '../pynt/Formatering';
import { Felt } from './Felt';
import { HideableElement } from '../pynt/HideableElement';

export class Radiovalg {
	constructor(verdi, tekst) {
		this.verdi = verdi;
		this.tekst = tekst;
	}
}

class Radiofelt extends Felt {
	constructor(props) {
		super(props);
		if (this.props.gyldighet) {
			this._gyldighet = this.props.gyldighet.obligatorisk();
		}
		this._registrer(this.props.verdi());
	}
	_mottaVerdi(verdi) {
		this._registrer(verdi);
		if (this._sjekk(true).length > 0) {
			return;
		}
		this.props.vedVerdi(verdi);
	}
	render() {
		const feilaktig = this._sjekk().length > 0;
		const klasser = classnames(
			'radioknapp',
			'js-skal-valideres',
			this.props.klasse,
			{ 'har-valideringsfeil': feilaktig }
		);
		const harBarn = !!this.props.children;

		return (
			<fieldset
				disabled={this.props.disabled}
				className={classnames('skjemagruppe', {
					'radiosjekk-kolonne': !this.props.rad,
					'radiosjekk-rad': !!this.props.rad,
					'fieldset-disabled': this.props.disabled,
				})}
			>
				{this.props.tittel && <Formatering tekst={this.props.tittel} />}
				{(this.props.alternativer || []).map((alternativ, i) => {
					const valgt =
						typeof this.props.verdi === 'function' &&
						alternativ.verdi === this.props.verdi();
					return (
						<React.Fragment key={this.id + i}>
							<input
								type="radio"
								id={this.id + i}
								key={this.id + i}
								name={this.id + i}
								aria-invalid={feilaktig}
								aria-describedby={this.id + 'info'}
								className={klasser}
								onBlur={() => this._vedDimming()}
								onChange={() =>
									this._mottaVerdi(alternativ.verdi)
								}
								value={alternativ.verdi}
								checked={valgt}
							/>
							<label
								htmlFor={this.id + i}
								key={'label_' + this.id + i}
								data-cy={'radio-label-' + alternativ.tekst}
							>
								<Formatering tekst={alternativ.tekst} />
							</label>
							{harBarn && (
								<HideableElement
									key={'subelement_' + this.id + i}
									hidden={!valgt}
								>
									{this.props.children}
								</HideableElement>
							)}
						</React.Fragment>
					);
				})}
				{this._renderIrettesettelse()}
			</fieldset>
		);
	}
}

Radiofelt.propTypes = {
	alternativer: PropTypes.oneOfType([
		PropTypes.arrayOf(PropTypes.instanceOf(Radiovalg)),
		PropTypes.arrayOf(
			PropTypes.shape({
				verdi: PropTypes.any,
				tekst: PropTypes.string.isRequired,
			})
		),
	]),
	verdi: PropTypes.func.isRequired,
	tittel: PropTypes.string,
	vedVerdi: PropTypes.func.isRequired,
};

export { Radiofelt };