import React, { useState,useEffect } from "react";
import Result from "./result";
import {Link} from 'react-router-dom'


function Results(props) {

const [datas,setDatas]= useState([]);
const [znacka,setZnacka]=useState([]);
  // getting data from storage so it's possible to refresh the page
  useEffect(() => {
    const data =localStorage.getItem('my-phones');
    const znacka=localStorage.getItem('znacka');
    if(props.location.data){
      setDatas(props.location.data);
      setZnacka(props.location.znacka);
    }
    else
    {
      setDatas(JSON.parse(data));
      setZnacka(JSON.parse(znacka));
    }
  }, [props.location.data,props.location.znacka])
 
  // saving data to storage after change so it's possible to load them after refreshing the page
  useEffect(() => {
    localStorage.setItem('my-phones',JSON.stringify(datas));
    localStorage.setItem('znacka',JSON.stringify(znacka));
  })
  //printing stuff to console for debbug purpose 
  //console.log(props.match.url);
  //let datas=props.location.data;
  //setDatas(props.location.data);
  //console.log("tady sem v results");
  //console.log(props.location.data);
  //console.log(datas);
  //console.log("oblibena znacka");
  //console.log(znacka);
  
  //sorting by price 
  datas.sort(
    function(x,y){
      return x.price-y.price;
    }
  )
  console.log(datas);
  //showing results using data and brand
  if(datas.length===0)
    {
    return (
      <div>
        <div>
          <button className="back-button"><Link className="link-button" to="/questions">Zpět na výběr telefonu</Link></button>
        </div>
        <div>
          <h3 className="nophone-text">Pro Vámi zadané požadavky nemáme žádné telefony</h3>
        </div>
      </div>
    );  
    }
  else{
    //shows phones if user select his favorite brand phones of that brand are showed first then others
      if (znacka['value']==="nezalezi") {
        //if user don't select his favorite brand all phones are showed
        return(
          <div>
            <div>
              <button className="back-button"><Link className="link-button" to="/questions">Zpět na výběr telefonu</Link></button>
            </div>
            <div>
            &nbsp;
          </div>
            <h3>Vybrané telefony: </h3>
            <div className="products">
              {datas.map((data)=>(<Result key={data.id} data={data} />))}
            </div>
            <div>
              &nbsp;
            </div>
          </div>
        );
      } else {
        var phones_desired_brand=[];
        var phones_other_brand=[];
        var i;
        for (i=0;i<datas.length;i++)
        {
          if (datas[i]['brand']===znacka['value']) {
            phones_desired_brand.push(datas[i]);
          } else {
            phones_other_brand.push(datas[i]);
          }
        }
       return(
        <div>
          <div>
              <button className="back-button"><Link className="link-button" to="/questions">Zpět na výběr telefonu</Link></button>
          </div>
          <div>
            &nbsp;
          </div>
          {/*showing phones of desired brand*/}
          <h3>Telefony vybrané značky:</h3>
          <div className="products">
            {(phones_desired_brand.length===0)?(<div>Nebyly nalezeny žádné telefony vybrané značky</div>):(phones_desired_brand.map((data)=>(<Result key={data.id} data={data}/>)))}
          </div>
          <div>
            &nbsp;
          </div>
          {/* showing phones of other brands*/}
          {phones_other_brand.length===0?(<div>&nbsp;</div>):(
            <div>
              <h3>Telefony ostatních značek:</h3>
              <div className="products">
                {phones_other_brand.map((data)=>(<Result key={data.id} data={data}/>))}
              </div>
            </div>
          )}
          <div>
            &nbsp;
          </div>
        </div>
       );
      }
    

    
  }
}

export default Results;
