/* 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 farger = { rød:"rød", brun:"brun", oransje:"oransje", gul:"gul", grønn:"grønn", blå:"blå", lilla:"lilla", rosa:"rosa", hvit:"hvit",grå:"grå", svart:"svart"};
		
		this.typeliste = typeliste;
		this.farger = farger;
		this.toggleMeny = this.toggleMeny.bind(this);
	}
	
	render() {
		let typeliste = this.typeliste;
		let farger = this.farger;
		
		let meny = [];
		
		let rader = [];
		rader.push(<h3 key="htyper">Plantetype</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="farger">Blomsterfarge</h3>);
		Object.keys(farger).forEach( function(e) {
			rader.push(<li key={e}><a href={"/?far=" + e}>{farger[e]}</a></li>);
		});
		meny.push(<ul key="farger">{rader}</ul>)
		
		
		
		return (
			<nav className="toppmeny">
				<div className="sentrertinnhold">
					<div className="kolonne800">
						<a id="logo" className={this.state.apen ? "aktiv" : null} href="/">NORSKFLORA.NO</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: 0,
				skjermbredde: 0
		};
		
		const kolonner = {
			nonavn: [
				"Norsk navn",
				"",
				() => {sorterTekstAlfabetisk(planter,"nonavn")}, 
			],
			navn: [
				"Botanisk navn", //tabell overskrift
				"",// CSS-klasse
				() => {sorterTekstAlfabetisk(planter,"navn")}, //sorteringsfunksjon
			],
			type: [
				"Type",
				"text-left",
				() => {sorterTekstAlfabetisk(planter,"type")},  
			],		
			hoyde: [
				"Høyde",
				"text-right",
				() => {sorterTallFallende(planter,"hoyde")},
			],
			farge: [
				"Farge",
				"text-center",
				() => {sorterTekstAlfabetisk(planter,"farge")}, 
			],
			tax: [
				"Taksonomisk",
				"text-center",
				() => {sorterTallStigende(planter,"familiesortering")}, 
			],
		}
		
		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) {
	    this.setState({
            scrollet:event.target.scrollingElement.scrollTop
        });
		 
	}
	
	updateWindowDimensions() {
  	this.setState({ skjermbredde: window.innerWidth});
	}
	
	
	
	render() {
		let klasser = this.klasser;
		let byttPlante = this.byttPlante;
		let kolonner = this.kolonner;
		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
		sorterTekstAlfabetisk(this.planter,"navn");
		kolonner[this.props.sortering][2]();
		
		
		
		/* gå gjennom alle plantene */
		/* skriv ut som kort */
		let plantekort = [];
		
        for (let i = 0; i<this.planter.length; i++) {
            if ((this.state.scrollet/30)+20 < i) { break; }
            let p = this.planter[i];
            let innhold = 
                <div>
                    {(p.bilder && p.bilder.length) ?
                        <img src={"https://bilder.norskflora.no/kvadrat300px/" + p.bilder[0].filnavn} />
                    :
                        <div className="bildePlaceholder"></div>
                    }
                    {p.nonavn.length ?
                        <h4>{p.nonavn}</h4>
                    : 
                        <h4>{p.navn}</h4>
                    }

                    <p>
                    {p.hoyde.length ? <React.Fragment> {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>
                    <div className="bot">
                        <p>{p.navn}</p>
                        <p>{p.nofamilie}</p>
                        <p>{hentOrd(p.type)[1].charAt(0).toUpperCase() + hentOrd(p.type)[1].slice(1)}</p>
                    </div>
                </div>;

            plantekort.push(
                <div className="plantekort" key={"kort" + p.navn}>
                    <a href={"/plante/" + p.lenke} onClick={(e) => byttPlante(e,p.navn)}>{innhold}</a>
                </div>
            );
        };
		
		
		return (
			<div className="rad" >
				<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>

				<div>
					{plantekort}
				</div>
			</div>
		);
	}
	
}



/* går gjennom planteliste, setter egenskaper fra arten inn på sorter og legger til div. */
function fiksPlanteliste(list) {
    //gå gjennom og ta ut bare de norsk plantene, som ikke er navnesorter)
    let nyliste = [];
    nyliste.push(list[0]);
	for (let i=1; i<list.length; i++) { 
		if (list[i].opprinnelse == "Norge" && !list[i].sort.length ) { //
			nyliste.push(list[i]);		
		}
	}
    list = nyliste;

	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);
}	


/* Tekst om vippsing */
class Stotte extends React.Component{
    render() {
        return (
					<div className="stotteboks">	
						<h1>Støtt norskflora.no</h1>
						<p>Støtt vårt arbeid med å lage en gratis flora på nettet, vipps 20 kroner til #727519!</p>
          </div>
				);
    }
}