import PropTypes from 'prop-types';
import React from 'react';

import { Datovelger } from './Datovelger';
import { Felt, Obligatoriskvisning } from './Felt';
import { Formatering } from '../pynt/Formatering';
import { ledetekst } from '../diverse/Ledetekst';

const minimumsdato = new Date('1.1.1970');

class Dobbeldatovelger extends Felt {
	constructor(props) {
		super(props);
		this.state = {
			startdato: this._getStart(),
			sluttdato: this._getSlutt(),
			feilmeldingStart: null,
			feilmeldingSlutt: null,
		};
		this._registrer('');
		this._obligatorisk = this._sjekk(true).length > 0;
		this._registrer('gyldig');
	}
	_getStart() {
		return (this.props.verdier() || [null, null])[0];
	}
	_getSlutt() {
		return (this.props.verdier() || [null, null])[1];
	}
	_mottaStart(startdato) {
		const { sluttdato } = this.state;
		this._resetFeilmelding();
		this.setState({ startdato: startdato, sluttdato });
		const startOgSluttErSatt = startdato && sluttdato;
		if (startOgSluttErSatt && startdato > sluttdato) {
			this.setState({
				feilmeldingStart: ledetekst.getTekst(
					'arbeidsvarsling.frontendkomponenter.Dobbeltdatovelger.feilmelding.start'
				),
			});
			this._registrer('');
			this.props.vedFeil();
		} else {
			this.props.vedVerdier([startdato, sluttdato]);
			this._registrer('gyldig');
		}
	}
	_mottaSlutt(sluttdato) {
		const { startdato } = this.state;
		this._resetFeilmelding();
		this.setState({ startdato, sluttdato });
		const startOgSluttErSatt = startdato && sluttdato;
		if (startOgSluttErSatt && sluttdato < startdato) {
			this.setState({
				feilmeldingSlutt: ledetekst.getTekst(
					'arbeidsvarsling.frontendkomponenter.Dobbeltdatovelger.feilmelding.slutt'
				),
			});
			this._registrer('');
			this.props.vedFeil();
		} else {
			this.props.vedVerdier([startdato, sluttdato]);
			this._registrer('gyldig');
		}
	}
	_resetFeilmelding() {
		this.setState({ feilmeldingStart: null, feilmeldingSlutt: null });
	}
	render() {
		const { startdato, sluttdato, feilmeldingStart, feilmeldingSlutt } =
			this.state;
		return (
			<div>
				{this.props.tittel && <Formatering tekst={this.props.tittel} />}
				<div className="util-naboblokker">
					<Datovelger
						{...this.props}
						irettesettelse={this.props.irettesettelser[0] || ''}
						tittel={ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.Dobbeldatovelger.tittel.start'
						)}
						minDate={this.props?.minimumStartDato ?? minimumsdato}
						verdi={() => startdato}
						selectedsStart
						startDate={startdato}
						endDate={sluttdato}
						vedVerdi={(start) => this._mottaStart(start)}
						obligatoriskvisning={Obligatoriskvisning.UANSETT_IKKE}
						feilmelding={
							feilmeldingStart || this.props.feilmeldingStart
						}
						harFeil={this.props.harFeilStart}
						disabled={this.props.disableStart}
						maxDate={this.props.maxDateStart || ''}
					/>
					<Datovelger
						{...this.props}
						irettesettelse={this.props.irettesettelser[1] || ''}
						tittel={ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.Dobbeldatovelger.tittel.slutt'
						)}
						minDate={this.props?.minimumSluttDato ?? minimumsdato}
						verdi={() => sluttdato}
						selectsEnd
						startDate={startdato}
						endDate={sluttdato}
						vedVerdi={(slutt) => this._mottaSlutt(slutt)}
						obligatoriskvisning={Obligatoriskvisning.UANSETT_IKKE}
						feilmelding={feilmeldingSlutt}
						harFeil={this.props.harFeilSlutt}
						disabled={this.props.disableSlutt}
						maxDate={this.props.maxDateSlutt || ''}
					/>
				</div>
				{this._renderObligatorisk(true)}
			</div>
		);
	}
}

Dobbeldatovelger.propTypes = {
	disabled: PropTypes.bool,
	irettesettelser: PropTypes.arrayOf(PropTypes.string),
	tittel: PropTypes.string,
	verdier: PropTypes.func,
	vedVerdier: PropTypes.func.isRequired,
	vedFeil: PropTypes.func,
	harFeilStart: PropTypes.bool,
	harFeilSlutt: PropTypes.bool,
};

export { Dobbeldatovelger };