import React, { Component } from 'react';
import "../styles/Start.css"
import Cookies from 'universal-cookie';

class Start extends Component {
    constructor(props) {
        super(props);  
        this.state = {
          startWindow: false,
          name: "",
          age: 6,
          sex: "mies",
          city: ""
        };
        this.closeWindow = this.closeWindow.bind(this);
        this.createTable = this.createTable.bind(this);
        this.getCity = this.getCity.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleAgeChange = this.handleAgeChange.bind(this);
        this.handleSexChange = this.handleSexChange.bind(this);
        this.handleCityChange = this.handleCityChange.bind(this);
      }

     handleSubmit(e){
         //When submit is clicked
         //TODO: check if fields are correctly filled + city verification
        e.preventDefault();
        const cookies = new Cookies();
        //cookie expires in the year 2050
        const date = new Date(2070, 1, 1);

        //profile string
        const profileString = {
          name: this.state.name,
          age: this.state.age,
          sex: this.state.sex,
          city: this.state.city
        }
        //console.log(profile)

        //profile string to json
        var profile = JSON.stringify(profileString);

        //Set first page cookie and save profile to cookie
        cookies.set('firstPage', 'true', { path: '/', expires: date });
        cookies.set('Profile', profile, {path: '/', expires: date})

        //testprint
        //console.log("test: " + JSON.stringify(cookies.get('Profile')))
     } 

     closeWindow(){
        //show welcome window once
        this.setState({startWindow: true})
        //console.log(this.state.startWindow)
     } 

     createTable = () => {
         //loop numbers from 6 - 100 and set to array
        let age = []
    
        for (let i = 6; i < 101; i++) {
          age.push(<option> { i }</option>)
        }

        //return array and set to dropdown menu
        return age
      }

    getCity(){
        //TODO: Get cities from database
        const tempArr = []
        tempArr.push(<option>Jyväskylä</option> )
        tempArr.push(<option>Helsinki</option> )
        return tempArr
    }

    // form actions to states
    handleNameChange(e){
      this.setState({name: e.target.value})
    }
    handleAgeChange(e){
      this.setState({age: e.target.value})
    }
    handleSexChange(e){
      this.setState({sex: e.target.value})
      //console.log(e.target.value)
    }
    handleCityChange(e){
      this.setState({city: e.target.value})
    }

  render() {
      //states
      const {startWindow, name, age, sex, city } = this.state

      //if start window is already shown
      if(startWindow) {
        return (
            //Create profile form
            <div className="FirstProfile">     
                <h3>Luo profiili:</h3>    
                {/*TODO: form action to open main view and dont show this view again*/} 
                <div className="container">
                    <form className="form" onSubmit={this.handleSubmit}>
                        <label>Nimimerkki:</label>
                        <input type="text" name="name" value={name} onChange={this.handleNameChange}></input>
                        <br />
                        <label>Ikä:</label>
                        <select className="field" value={age} onChange={this.handleAgeChange}>
                            {this.createTable()}
                        </select>
                        <br />
                        <label> Sukupuoli:</label>
                        <select className="field" value={sex} onChange={this.handleSexChange}>
                            <option>Mies</option>
                            <option>Nainen</option>
                        </select>
                        <br/>
                        <label>Kaupunki:</label>
                        <select className="field" value={city} onChange={this.handleCityChange}>
                            <option>Valitse kaupunki</option>
                            {this.getCity()}
                        </select>
                        <br/> <br />
                        <input type="submit" value="Luo profiili"></input>              
                    </form> 
                </div>
            </div>
          );
      }
      else{
        return (
            //show startwindow first 
            <div className="StartWindow">
                <h1>Tervetuloa käyttämään Wear Right -palvelua!</h1>
                 <p>Pukeutuminen ei ole koskaan ollut näin helppoa! Oli ulkona mikä sää tahansa, Wear Rightin avulla tiedät täsmälleen, miten pukeutua eri säätiloihin.
                     Saat säätilat suoraan laitteeseesi reaaliajassa, sekä sään mukaiset pukeutumisehdotukset. Voit lisätä palveluun eri profiileja, joten saat 
                     pukeutumisehdotukset koko perheelle! Palveluun voi lisätä myös suosikkikaupunkisi, jolloin saat säätiedot haluamastasi paikasta.
                 </p>
                 <p>
                     Ennen, kun voit aloittaa, sinun täytyy luoda ensimmäinen profiili palveluun. Voit muokata profiileja myöhemmin milloin tahansa. Wear Right ei 
                     tallenna henkilötietoja minnekään, vaan suosikkiprofiilisi näkyvät vain tässä laitteeessa.
                </p>
              <button onClick={ () => this.closeWindow()}>Asia kunnossa!</button>
            </div>
        );
      }
  }
}

export default Start;