import PropTypes from 'prop-types';
import React from 'react';
import DatePicker from 'react-datepicker';
import en from 'date-fns/locale/en-GB';
import nb from 'date-fns/locale/nb';
import nn from '../locale/nn';
import classnames from 'classnames';

import { ledetekst } from '../diverse/Ledetekst';
import { Felt } from './Felt';

class Datovelger extends Felt {
	constructor(props) {
		super(props);
		this._format = 'dd.MM.yyyy';
		switch (ledetekst.getSprak()) {
			case 'en':
				this._sprak = en;
				break;
			case 'nn':
				this._sprak = nn;
				break;
			default:
				this._sprak = nb;
				break;
		}
		this.datePicker = React.createRef();
		this._handterTabUt = this._handterTabUt.bind(this);
		this._registrer('');
		this._obligatorisk = this._sjekk(true).length > 0;
		this._registrer(this.props.verdi());
	}

	componentDidUpdate(prevProps) {
		if (prevProps.verdi() !== this.props.verdi()) {
			this._registrer(this.props.verdi());
		}
	}

	_mottaVerdi(verdi) {
		if (!verdi) return null;

		const utcDato = new Date(
			Date.UTC(verdi.getFullYear(), verdi.getMonth(), verdi.getDate())
		);
		this._registrer(utcDato);
		if (this._sjekk(true).length > 0) {
			return;
		}
		this.props.vedVerdi(utcDato);
	}

	_handterTabUt(event) {
		if (event.shiftKey && event.keyCode === 9) {
			this.datePicker.current.setOpen(false);
		}
	}

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

		return (
			<div className="skjemagruppe">
				<label className="label-blokk" htmlFor={this.id}>
					{this.props.tittel}
				</label>
				<div
					data-hj-suppress
					data-cy={
						this.props.tittel ===
						ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.Dobbeldatovelger.tittel.start'
						)
							? 'datovelger-start'
							: 'datovelger-slutt'
					}
				>
					<DatePicker
						{...this.props}
						ref={this.datePicker}
						onKeyDown={this._handterTabUt}
						className={klasser}
						dateFormat={this._format}
						placeholderText={ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.Datovelger.plassholder'
						)}
						size={this._format.length}
						selected={this.props.verdi()}
						onBlur={() => this._vedDimming()}
						onKey
						onChange={(verdi) => this._mottaVerdi(verdi)}
						locale={this._sprak}
						disabled={this.props.disabled}
						showYearDropdown={
							this.props.hideYearDropdown ? undefined : true
						}
						scrollableYearDropdown={
							this.props.hideYearDropdown ? undefined : true
						}
					/>
				</div>
				{this.props.feilmelding && (
					<p className="info-mangler luft-over">
						{this.props.feilmelding}
					</p>
				)}
				{this._renderObligatorisk(true)}
				{this._renderIrettesettelse()}
			</div>
		);
	}
}

Datovelger.propTypes = {
	disabled: PropTypes.bool,
	irettesettelse: PropTypes.string,
	verdi: PropTypes.func,
	vedVerdi: PropTypes.func.isRequired,
	feilmelding: PropTypes.string,
	harFeil: PropTypes.bool,
};

export { Datovelger };