/* Lager plantelistemenyen */
class Forsidemeny extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			apen: false
		}
		
		const typeliste = { tre:"trær og busker", urt:"urter og stauder", gre:"gressplanter", lyng:"lyngplanter", bre:"bregner", kra:"kråkefotplanter", mose:"moser" };	
		const opprinnelser = { norge:"Norge", norden:"Norden", europa:"Europa", afrika:"Afrika", asia:"Asia", australasia:"Australasia", nordamerika:"Nord-Amerika", søramerika:"Sør-Amerika", krysning:"krysning" };
		const artikkelliste = { plantegrupper: "Plantegrupper",	klimasoner: "Klimasoner", voksemedium: "Voksemedium", hagekart: "Hagekart", lenker: "Lenker", om: "Om plantelista" };
		const soner = { H8:"sone H8", H7:"sone H7", H6:"sone H6", H5:"sone H5", H4:"sone H4", H3:"sone H3", H2:"sone H2", H1:"sone H1"};
		
		this.typeliste = typeliste;
		this.opprinnelser = opprinnelser;
		this.soner = soner;
		this.artikkelliste = artikkelliste;
		this.toggleMeny = this.toggleMeny.bind(this);
	}
	
	render() {
		let typeliste = this.typeliste;
		let opprinnelser = this.opprinnelser;
		let soner = this.soner;
		let artikkelliste = this.artikkelliste;
		
		let meny = [];
		
		let rader = [];
		rader.push(<h3 key="htyper">Plantetyper</h3>);
		Object.keys(typeliste).forEach( function(e) {
			rader.push(<li key={e}><a  href={"/?type=" + e}>{typeliste[e]}</a></li>);
		});
		meny.push(<ul key="type">{rader}</ul>)
		
		rader = [];
		rader.push(<h3 key="hopprinnelse">Opprinnelse</h3>);
		Object.keys(opprinnelser).forEach( function(e) {
			rader.push(<li key={e} ><a href={"/?opp=" + e}>{opprinnelser[e]}</a></li>);
		});
		meny.push(<ul key="opprinnelse">{rader}</ul>)
		
		rader = [];
		rader.push(<h3 key="hherdighet">Herdighet</h3>);
		Object.keys(soner).forEach( function(e) {
			rader.push(<li key={e}><a href={"/?har=" + e}>{soner[e]}</a></li>);
		});
		meny.push(<ul key="herdighet">{rader}</ul>)
		
		rader = [];
		rader.push(<h3 key="hartikler">Artikler</h3>);
		Object.keys(artikkelliste).forEach( function(e) {
			rader.push(<li key={e}><a href={"/artikler/" + e}>{artikkelliste[e]}</a></li>);
		});
		meny.push(<ul key="artikler">{rader}</ul>)
		
		
		return (
			<nav className="toppmeny">
				<div className="sentrertinnhold">
					<div className="kolonne800">
						<a id="logo" className={this.state.apen ? "aktiv" : null} href="/">Bjørkans planteliste</a>
						<button className="menyknapp" onClick={this.toggleMeny}>{this.state.apen ? <span style={{position:"relative", top:"3px"}}>{lagIkon("lukk","#eee")}</span> : <span style={{position:"relative", top:"2px"}}>{lagIkon("linjer","#eee")}</span>} Meny</button>
						{this.state.apen && <div className="megameny">{meny}</div>}
					</div>
				</div>
			</nav>
		);
	}	
	
	toggleMeny(e) {
		if (this.state.apen) {
			this.setState({
				apen:false
			});
		} else {
			this.setState({
				apen:true
			});
		}
	}

}


class Planteliste extends React.Component {
	constructor(props) {
		super(props);
		
		let planter = this.props.planter;
		this.state = {
				scrollet: false,
				skjermbredde: 0
		};
		
		const kolonner = {
			navn: [
				"Botanisk navn", //tabell overskrift
				"",// CSS-klasse
				() => {sorterTekstAlfabetisk(planter,"navn")}, //sorteringsfunksjon
			],
			nonavn: [
				"Norsk navn",
				"",
				() => {sorterTekstAlfabetisk(planter,"nonavn")}, 
			],
			type: [
				"Type",
				"text-center",
				() => {sorterTekstAlfabetisk(planter,"type")},  
			],		
			opprinnelse: [
				"Opprinnelse",
				"",
				() => {sorterTekstAlfabetisk(planter,"opprinnelse")}, 
			],
			herdighet: [
				"Sone",
			"text-center",
				() => {sorterTekstMotsattAlfabetisk(planter,"herdighet")},
			],
			hoyde: [
				"Høyde",
				"text-right",
				() => {sorterTallFallende(planter,"hoyde")},
			],
			farge: [
				"Farge",
				"text-center",
				() => {sorterTekstAlfabetisk(planter,"farge")}, 
			],
			tilgjengelig: [
				"Selges",
				"text-center",
				() => {sorterArraystørrelse(planter,"tilgjengelig")}, 
			],
			poeng: [
				"Poeng",
				"text-center",
				() => {sorterTallFallende(planter,"poeng")},
			],	
			sok: [
				"Søk",
				"text-center",
				() => {sorterTekstAlfabetisk(planter,"navn")}, 
			],
		}
		
		this.planter = this.props.planter;
		this.kolonner = kolonner;
		this.byttSortering = this.byttSortering.bind(this);
		this.selectByttSortering = this.selectByttSortering.bind(this);
		this.byttPlante = this.byttPlante.bind(this);
		this.handleScroll = this.handleScroll.bind(this);
		this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
	}
	
	byttPlante(e,navn) {
		if (this.props.sidetype == "plante") {
			e.preventDefault();
			this.props.byttPlante(navn);
		}
	}
	
	byttSortering(el,e) {
		el.preventDefault();
		this.props.byttSortering(e);
	}
	
	selectByttSortering(e) {
		this.props.byttSortering(e.target.value);
	}
	
	componentDidMount() {
		window.addEventListener('scroll', this.handleScroll);
		this.updateWindowDimensions();
  	window.addEventListener('resize', this.updateWindowDimensions);
	}
	
	componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
		window.removeEventListener('resize', this.updateWindowDimensions);
	}


	handleScroll(event) {
		if(event.target.scrollingElement.scrollTop > 100) {
      this.setState({
        scrollet:true
      });
		} 
	}
	
	updateWindowDimensions() {
  	this.setState({ skjermbredde: window.innerWidth});
	}
	
	
	
	render() {
		let klasser = this.klasser;
		let kolonner = this.kolonner;
		let byttPlante = this.byttPlante;
		
		let sorteringsliste = [];
		Object.keys(kolonner).forEach(function(c) {
			sorteringsliste.push(<option key={c} value={c}>{kolonner[c][0].toLowerCase()}</option>)
		});
		//sorter plantelista ut fra state
		sorterTekstMotsattAlfabetisk(this.planter,"navn");
		kolonner[this.props.sortering][2]();
		
		
		let overskrifter = Object.keys(kolonner).map(
			e => 
				<th key={e} className={e == this.props.sortering ? kolonner[e][1] + " aktiv" : kolonner[e][1]}>
					<a href="#" onClick={(el) => this.byttSortering(el,e)} title={"Sorter etter " + kolonner[e][0]}>{kolonner[e][0]}</a>
				</th>
		);
		
		/* gå gjennom alle plantene */
		let rader = [];
		if (this.state.skjermbredde >= 1220) {
			for (let i = 0; i<this.planter.length; i++) {
				if (!this.state.scrollet && i > 50) { break; }
				let p = this.planter[i];
				if (p.art == "× hybrid") { //ikke vis grunn-genus på hybrid
					if (!p.sort.length) {
						continue;
					}
				}
				let rad = [];
				rad.push(
					<tr className="planteliste" key={p.navn}>
						<td key={p.navn+"0"} className={kolonner["navn"][1]}><a href={"/plante/" + p.lenke} onClick={(e) => byttPlante(e,p.navn)}>{p.navn.slice(0,56)}</a></td>
						<td key={p.navn+"1"} className={kolonner["nonavn"][1]}>{p.nonavn}</td>
						<td key={p.navn+"5"} className={kolonner["type"][1]} title={hentOrd(p.type)[1]}>{lagIkon(p["type"])}</td>
						<td key={p.navn+"2"} className={kolonner["opprinnelse"][1]}>{p.opprinnelse}</td>
						<td key={p.navn+"3"} className={kolonner["herdighet"][1]}>{p.herdighet}</td>
						<td key={p.navn+"4"} className={kolonner["hoyde"][1]}>{p.hoyde}</td>
						<td key={p.navn+"6"} className={kolonner["farge"][1]}>
							{(p.farge.length && p.farge != "sporer" && p.farge != "miks") ? <span className="blomstfarge" title={p.farge + " blomst"}>{lagIkon("fargeblomst","black", lagFargekode(p.farge), "5")}</span> : null} 
							{(p.farge.length && (p.farge == "sporer" || p.farge == "miks")) ? <span className="blomstfarge">-</span> : null}
							{p.bladfarge ? <span className="bladfarge" title={p.bladfarge + " blader"}> {lagBlad(p.bladfarge)}</span> : null}
						</td>
						<td key={p.navn+"7"} className={kolonner["tilgjengelig"][1]}>{p.tilgjengelig ? <span>kr</span> : null}</td>
						<td key={p.navn+"8"} className={kolonner["poeng"][1]}>{p.poeng}</td>
						<td key={p.navn+"9"} className={kolonner["sok"][1]}>
							<a href={encodeURI("https://www.google.no/search?tbm=isch&q=" + p.navn)} style={{padding:"0px 10px"}} title="Google bildesøk">{lagIkon("sok")}</a></td>
					</tr>);
				rader.push(rad);
			}
		};
		/* skriv ut som kort */
		let mobilkort = [];
		if (this.state.skjermbredde < 1220) {
			for (let i = 0; i<this.planter.length; i++) {
				if (!this.state.scrollet && i > 30) { break; }
				let p = this.planter[i];
				let innhold = 
					<div>
						<h5>{p.nonavn.length ? <a href={"/plante/" + p.lenke} onClick={(e) => byttPlante(e,p.navn)}>{p.navn} - {p.nonavn}</a> : <a href={"/plante/" + p.lenke} onClick={(e) => byttPlante(e,p.navn)}>{p.navn}</a>}</h5>
						<p>
						{p.type.length ? hentOrd(p.type)[1].charAt(0).toUpperCase() + hentOrd(p.type)[1].slice(1) : null}
						{p.opprinnelse.length ? <React.Fragment> &bull; {p.opprinnelse}</React.Fragment>  : null}
						<React.Fragment> &bull; {p.herdighet}</React.Fragment>
						{p.hoyde.length ? <React.Fragment> &bull; {lagIkon("hoyde")}{lagHoyde(p.hoyde)}</React.Fragment>  : null}
							
						{(p.farge.length && p.farge != "sporer" && p.farge != "miks") ? <span className="blomstfarge" title={p.farge + " blomst"}> &bull; {lagIkon("fargeblomst","black", lagFargekode(p.farge), "5")}</span> : null} 
						{(p.farge.length && (p.farge == "sporer" || p.farge == "miks")) ? <span className="blomstfarge"> &bull; -</span> : null}
							
						{p.bladfarge ? <span className="bladfarge" title={p.bladfarge + " blader"}> &bull; {lagBlad(p.bladfarge)}</span> : null}	
						{p.tilgjengelig.length ? <React.Fragment> &bull; i handelen</React.Fragment>  : null}
						<React.Fragment> &bull; &#x2606;{p.poeng}</React.Fragment>
						<React.Fragment> &bull; <a href={encodeURI("https://www.google.no/search?tbm=isch&q=" + p.navn)}  title="Google bildesøk">{lagIkon("sok")}</a></React.Fragment>		
						</p>
					</div>;
				mobilkort.push(<div className="plantekort" key={"kort" + p.navn}>{innhold}</div>);
			};
		}
		
		
		return (
			<div >
				<div className="nedtrekksortering">
						<label htmlFor="nedtrekksortering">Viser {this.planter.length} planter, sortert etter</label> <select id="nedtrekksortering" value={this.props.sortering} onChange={this.selectByttSortering}>{sorteringsliste}</select>
				</div>
				<table className="barestorst">
					<thead></thead>
					<tbody>
						<tr key="rad0">
							{overskrifter}
						</tr>
						{rader}
					</tbody>
				</table>
				<div className="ikkestorst">
					{mobilkort}
				</div>
			</div>
		);
	}
	
}





/* Tekst om vippsing */
class Stotte extends React.Component{
    render() {
        return (
					<div className="stotteboks">	
						<h1>Støtt Bjørkans planteliste</h1>
						<p>Støtt vårt arbeid med å lage et gratis oppslagsverk for planter, vipps 20 kroner til #716582!</p>
          </div>
				);
    }
}






/* går gjennom planteliste, setter egenskaper fra arten inn på sorter og legger til div. */
function fiksPlanteliste(list) {

	for (let i=1; i<list.length; i++) { //gå gjennom lista  og kalkuler verdier/rydd opp
		let p = list[i];
		
		const fellesverdi = [ "kingdom", "subkingdom", "infrakingdom", "superdivision", "division", "nodivision", "subdivision", "botclass", "nobotclass", "superorder", "order", "suborder", "family", "nofamily", ];	
		fellesverdi.forEach(e => { 
			if(list[0][e]) {
				p[e] = list[0][e];
			}
		});

	}
	list.shift();
	return (list);
}