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

import { ledetekst } from '../diverse/Ledetekst';
import { Ramme } from '../pynt/Ramme';
import { Spinner } from '../pynt/Spinner';

import { hentBruker, velgInnloggingstilbyder } from './brukersesjon';

class Innlogging extends Component {
	constructor(props) {
		super(props);
		this.state = {
			bruker: null,
			laster: true,
		};
	}
	componentDidMount() {
		hentBruker()
			.then((bruker) =>
				this.setState({
					bruker: bruker,
					laster: false,
				})
			)
			.catch((feil) => this.props.vedFeil(feil));
	}
	render() {
		if (this.state.laster) {
			return (
				<Ramme avstand grafarge>
					<Spinner aktivert />
				</Ramme>
			);
		}
		if (!this.state.bruker) {
			var kolonner = Math.min(
				4,
				Math.ceil(Math.sqrt(this.props.tilbydere.length))
			);
			return (
				<Ramme avstand kolonnefri>
					{this.props.tilbydere.map((tilbyder, i) => (
						<div
							className={'col-sm-12 col-md-' + 12 / kolonner}
							key={i}
						>
							<a
								className="lenkeboks"
								onClick={() =>
									this.props
										.oidc()
										.then((oidc) =>
											velgInnloggingstilbyder(
												tilbyder,
												oidc
											)
										)
								}
								style={{ cursor: 'pointer' }}
							>
								<p>
									<strong>
										{ledetekst.getTekst(
											'arbeidsvarsling.frontendkomponenter.brukersesjon.tilbyder.' +
												tilbyder.id +
												'.navn'
										)}
									</strong>
								</p>
								<p>
									{ledetekst.getTekst(
										'arbeidsvarsling.frontendkomponenter.brukersesjon.tilbyder.' +
											tilbyder.id +
											'.beskrivelse'
									)}
								</p>
							</a>
						</div>
					))}
				</Ramme>
			);
		}
		return this.props.children;
	}
}

Innlogging.propTypes = {
	oidc: PropTypes.func.isRequired,
	tilbydere: PropTypes.arrayOf(PropTypes.object).isRequired,
	vedFeil: PropTypes.func.isRequired,
};

export { Innlogging };