import React, { Component } from 'react';

import { guid } from '../diverse/guid';
import { ledetekst } from '../diverse/Ledetekst';
import classnames from 'classnames';
import { Lenke } from './Lenke';

function Tabellrad(props: any) {
	const { celler, vedheng, className, ...rest } = props;
	const id = guid();
	return (
		<tr
			className={classnames(className, {
				vedheng,
			})}
			{...rest}
		>
			{celler.map((celle, index) => (
				<td key={id + 'celle' + index}>{celle}</td>
			))}
		</tr>
	);
}

class Tabell extends Component<any, any> {
	constructor(props) {
		super(props);
		this.state = {
			utvida: this.props.utvida || false,
		};
	}
	render() {
		const klasser = classnames('avsnitt', 'tabell', this.props.className, {
			'tabell-separert': this.props.separert,
			undertabell: this.props.undertabell,
		});
		const id = guid();
		let rader = (
			typeof this.props.rader === 'function'
				? this.props
						.rader()
						.map((rad, i) => (
							<Tabellrad key={id + 'rad' + i} celler={rad} />
						))
				: []
		)
			.concat(((this.props.children as []) || []).flat())
			.filter((rad) => !!rad);
		let formange = false;
		if (this.props.maksrader && !this.state.utvida) {
			let i = 0,
				j = 0;
			while (i < rader.length && j < this.props.maksrader) {
				if (!rader[i++].props.vedheng) {
					j++;
				}
			}
			if (rader[i]?.props.vedheng) {
				i++;
			}
			if (i < rader.length) {
				rader = rader.slice(0, i);
				formange = true;
			}
		}
		const kolspenn = Math.max.apply(
			null,
			rader.map((rad) => rad.props.celler.length)
		);
		return (
			<div className={klasser}>
				{this.props.vedRedigering ? (
					<Lenke
						style={{
							float: 'right',
						}}
						handling={this.props.vedRedigering}
					>
						{ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.Tabell.rediger'
						)}
					</Lenke>
				) : null}
				{this.props.tittel ? (
					<h3 className="kapitteltittel">{this.props.tittel}</h3>
				) : null}
				<table>
					<colgroup>
						{(this.props.bredder || []).map((bredde, i) => (
							<col
								key={id + 'kol' + i}
								style={{ width: bredde }}
							/>
						))}
					</colgroup>
					<thead>
						<tr>
							{(this.props.kolonner || []).map((kolonne, i) => (
								<th key={id + 'hode' + i}>{kolonne}</th>
							))}
						</tr>
					</thead>
					<tbody
						{...(!!this.props.skalMaskeres
							? { 'data-hj-suppress': true }
							: {})}
					>
						{rader}
					</tbody>
					{formange ? (
						<tfoot>
							<tr className="util-tekst-sentrert">
								<td className="klikkbar" colSpan={kolspenn}>
									<button
										className="knappSomLenke"
										onClick={() => {
											this.setState({ utvida: true });
											if (this.props.vedUtvidelse) {
												this.props.vedUtvidelse();
											}
										}}
									>
										<span>
											{this.props.utvidelsestekst ||
												ledetekst.getTekst(
													'arbeidsvarsling.frontendkomponenter.Tabell.utvid'
												)}
										</span>
										<span className="pil-ned" />
									</button>
								</td>
							</tr>
						</tfoot>
					) : null}
					{this.state.utvida ? (
						<tfoot>
							<tr className="util-tekst-sentrert">
								<td colSpan={kolspenn} className="klikkbar">
									<button
										className="knappSomLenke"
										onClick={() => {
											this.setState({ utvida: false });
											if (this.props.vedMinimering) {
												this.props.vedMinimering();
											}
										}}
									>
										<span>
											{this.props.minimerTekst ||
												ledetekst.getTekst(
													'arbeidsvarsling.frontendkomponenter.Tabell.minimer'
												)}
										</span>
										<span className="pil-opp" />
									</button>
								</td>
							</tr>
						</tfoot>
					) : null}
				</table>
			</div>
		);
	}
}

export { Tabell, Tabellrad };