import nb from 'date-fns/locale/nb';
import React from 'react';
import DatePicker from 'react-datepicker';
import { classnames } from '..';
import { Periode, Tidspunkt } from '../utils/Periode';
import { ledetekst } from '../diverse/Ledetekst';

function tidspunktTilDate(tidspunkt?: Tidspunkt): Date | undefined {
	if (!tidspunkt) {
		return undefined;
	}
	const { timer, minutter } = tidspunkt;
	const dato = new Date();
	dato.setHours(timer);
	dato.setMinutes(minutter);
	return dato;
}
interface Props {
	onChangeFra: (value: Date) => void;
	onChangeTil: (value: Date) => void;
	periode: Periode | undefined;
	fraTittel?: string;
	periodeGrense?: Periode;
	tilTittel?: string;
	interval?: number;
	placeholderFra?: string;
	placeholderTil?: string;
}

function Periodevelger({
	onChangeFra,
	onChangeTil,
	periode,
	fraTittel = ledetekst.getTekst(
		'arbeidsvarsling.frontendkomponenter.periodevelger.labelFra'
	),
	tilTittel = ledetekst.getTekst(
		'arbeidsvarsling.frontendkomponenter.periodevelger.labelTil'
	),
	interval = 60,
	placeholderFra = ledetekst.getTekst(
		'arbeidsvarsling.frontendkomponenter.periodevelger.placeholderFra'
	),
	periodeGrense,
	placeholderTil = ledetekst.getTekst(
		'arbeidsvarsling.frontendkomponenter.periodevelger.placeholderTil'
	),
}: Props) {
	const fra = tidspunktTilDate(periode?.fra);
	const til = tidspunktTilDate(periode?.til);
	const minTime = tidspunktTilDate(
		periodeGrense?.fra ?? { timer: 0, minutter: 0 }
	);
	const maxTime = tidspunktTilDate(
		periodeGrense?.til ?? { timer: 23, minutter: 59 }
	);

	const nameFra = 'periodevelger-fra';
	const nameTil = 'periodevelger-til';

	return (
		<div className="util-naboblokker">
			<div className="skjemagruppe">
				<label className="label-blokk" htmlFor={nameFra}>
					{fraTittel}
				</label>
				<DatePicker
					name={nameFra}
					id={nameFra}
					className={classnames('tekstfelt input-ekstra-liten')}
					selected={fra}
					onChange={onChangeFra}
					showTimeSelect
					showTimeSelectOnly
					minTime={minTime}
					maxTime={maxTime}
					timeIntervals={interval}
					timeCaption={ledetekst.getTekst(
						'arbeidsvarsling.frontendkomponenter.periodevelger.timeCaptionFra'
					)}
					dateFormat="HH:mm"
					placeholderText={placeholderFra}
					locale={nb}
				/>
			</div>
			<div className="skjemagruppe">
				<label className="label-blokk" htmlFor={nameTil}>
					{tilTittel}
				</label>
				<DatePicker
					name={nameTil}
					id={nameTil}
					className={classnames('tekstfelt input-ekstra-liten')}
					selected={til}
					onChange={onChangeTil}
					showTimeSelect
					showTimeSelectOnly
					minTime={minTime}
					maxTime={maxTime}
					timeIntervals={interval}
					timeCaption={ledetekst.getTekst(
						'arbeidsvarsling.frontendkomponenter.periodevelger.timeCaptionTil'
					)}
					dateFormat="HH:mm"
					placeholderText={placeholderTil}
					locale={nb}
				/>
			</div>
		</div>
	);
}

export { Periodevelger };