import PropTypes from 'prop-types';
import React, { Component } from 'react';

import { Feilmelding } from '../pynt/Feilmelding';
import { Gyldighet } from './Gyldighet';
import { Knapp } from '../pynt/Knapp';
import { ledetekst } from '../diverse/Ledetekst';
import { Ramme } from '../pynt/Ramme';
import { erSann } from '../diverse/verktoy.js';

// TODO Type opp SkjemaContext
export const SkjemaContext = React.createContext(undefined);
class Skjema extends Component {
	constructor(props) {
		super(props);
		this.props.gyldighet.skjema = this;
		this._irettesettelser = {};
	}

	componentDidMount() {
		if (typeof this.props.kulepunktsjekk === 'function') {
			this.props.kulepunktsjekk(
				() => this.props.gyldighet.sjekkAlle(true).length === 0
			);
		}
	}

	stopp() {
		this.setState({ irettesettelse: true }, () => {
			if (
				this._irettesettelse &&
				typeof this._irettesettelse.focus === 'function'
			) {
				this._irettesettelse.focus();
			}
		});
	}
	fortsett() {
		this.setState({ irettesettelse: false });
	}
	erSendt() {
		return this.state && this.state.irettesettelse;
	}
	setIrettesettelse(kilde, irettesettelse) {
		this._irettesettelser[kilde] = irettesettelse;
	}
	renderIrettesettelse() {
		const tekst =
			Object.values(this._irettesettelser).filter(erSann).join(' ') ||
			ledetekst.getTekst(
				'arbeidsvarsling.frontendkomponenter.Skjema.gyldighet'
			);
		return (
			this.erSendt() && (
				<Feilmelding
					tekst={tekst}
					vedRef={(e) => (this._irettesettelse = e)}
				/>
			)
		);
	}
	render() {
		return (
			<SkjemaContext.Consumer>
				{(skjemaContext) => {
					this.ytreSkjema =
						(skjemaContext && skjemaContext.skjema) || this;
					return (
						<SkjemaContext.Provider
							value={{
								skjema: this.ytreSkjema,
							}}
						>
							{this.props.children}
							{this._renderKnapper()}
						</SkjemaContext.Provider>
					);
				}}
			</SkjemaContext.Consumer>
		);
	}
	_renderKnapper() {
		const avbryt = this.props.vedAvbrudd ? (
			<Knapp
				tittel={ledetekst.getTekst(
					'arbeidsvarsling.frontendkomponenter.Skjema.avbryt'
				)}
				vedKlikk={() => this.props.vedAvbrudd()}
			/>
		) : null;
		const neste = this.props.vedNeste ? (
			<Knapp
				klasse="knapp-handling knapp-neste"
				tittel={
					this.props.nestetekst ||
					ledetekst.getTekst(
						'arbeidsvarsling.frontendkomponenter.Skjema.neste'
					)
				}
				vedKlikk={() => {
					if (this.props.gyldighet.sjekkAlle().length === 0) {
						this.props.vedNeste();
					} else {
						window.scrollTo(0, 0);
					}
				}}
			/>
		) : null;
		const tilbake = this.props.vedTilbake ? (
			<Knapp
				klasse="knapp-forrige"
				tittel={ledetekst.getTekst(
					'arbeidsvarsling.frontendkomponenter.Skjema.tilbake'
				)}
				vedKlikk={() => this.props.vedTilbake()}
			/>
		) : null;
		const avslutt = this.props.vedAvslutt ? (
			<Knapp
				klasse="knapp-handling"
				tittel={ledetekst.getTekst(
					'arbeidsvarsling.frontendkomponenter.Skjema.avslutt'
				)}
				vedKlikk={this.props.vedAvslutt}
			/>
		) : null;

		return avbryt || neste || tilbake || avslutt ? (
			<Ramme avstand>
				<div className="knapperad knapperad-mobil util-tekst-sentrert">
					{avbryt}
					{tilbake}
					{neste}
					{avslutt}
				</div>
			</Ramme>
		) : null;
	}
}

Skjema.propTypes = {
	gyldighet: PropTypes.instanceOf(Gyldighet).isRequired,
	kulepunktsjekk: PropTypes.func,
	nestetekst: PropTypes.string,
	vedAvbrudd: PropTypes.func,
	vedNeste: PropTypes.func,
	vedTilbake: PropTypes.func,
	vedAvslutt: PropTypes.func,
};

export { Skjema };