import logo from './logo.svg';
import './App.css';
import Header from './components/header.js'
import Category from './components/category.js'
import Footer from './components/footer.js'
import Product from './components/product.js'
import Account from './components/account.js'
import AllProducts from './components/allproducts.js'
import Deals from './components/deals.js'
import ProductPage from './components/product_page.js'
import Cart from './components/cart.js'
import PaymentPage from './components/payment_page.js'
import promoted from './components/promoted.js'
import review from './components/review.js'
import ReviewSection from './components/ReviewSection.js'
import suggestions from './components/suggestions.js'
import { Route, Link, BrowserRouter } from 'react-router-dom'



import React, { Component } from 'react'

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      page: "products",
      user_id: null,
      email: null,
      country: null,
      city: null,
      address: null,
      postal_code: null,
      promo_code: "none",
      logged_id: false

    }



  }


  setPage(page) {
    this.setState({
      page: page

    })

  }


  addPromoCode(promo_code) {
    fetch("http://localhost/Websites/GeneralStore/endpoint/check_promo_code.php?code=" + promo_code).then(function (response) {
      return response.json();
    }).then(function (data) {
      if (data.status == "success") {
        console.log("promo code is valid");
        this.setState({
          promo_code: promo_code
        })

      }
      else {
        console.log("invalid promo code");


      }
    })
  }

  componentWillMount() {
    fetch("http://localhost/Websites/GeneralStore/endpoint/validate_session.php?session_id=" + "user").then(function (response) {
      return response.json();
    }
    ).then(function (data) {
      if (data.status == "success") {
        this.setState({
          user_id: data.user_id,
          email: data.email,
          country: data.country,
          city: data.city,
          address: data.address,
          postal_code: data.postal_code,
          logged_id: true

        })



        console.log("logged in");
      }
      else {
        console.log("not logged in");
      }
    })
  }

  render() {

    console.log(this.state.page)

    if (this.state.page == "account") {
      return (
        <div className="App">
          <Header />
          <Account />
          <Footer />
        </div>
      );
    }

    if (this.state.page == "all-products") {
      return (
        <div className="App">
          <Header />
          <AllProducts />
          <Footer />
        </div>
      );
    }

    if (this.state.page == "deals") {
      return (
        <div className="App">
          <Header />
          <Deals />
          <Footer />
        </div>
      );


    }

    if (this.state.page == "cart") {
      return (
        <div className="App">
          <Header />
          <Cart />
          <Footer />
        </div>
      );
    }


    if (this.state.page == "product")
    {
      return (
        <div className="App">
          <Header />
          <ProductPage />
          <Footer />
        </div>
      );


    }

    if (this.state.page == "products") {
      return (
        <div>
          <Header />
          <Category categoryName="fruits" description="Any food that has seeds in it is considred a fruit." className="fruits" />

          <Category categoryName="Vegetables" description="Vegetables are cool." className="vegetables" />


          <Category categoryName="Grains" description="Things like rice and flour go here." className="grains" />

          <Category categoryName="Snacks" description="All the snacks you could ever want." className="snacks" />


          <Category categoryName="oils" description="Very oily xD" className="oils" />


          <a href="all-products" onClick={() => { this.setPage("all-products"); alert("bruh") }}>View All Products</a>
          <Footer />
        </div>
      );
    }

    if (this.state.page == "payment_page") {
      return (
        <div>
          <Header />
          <PaymentPage />
          <Footer />
        </div>
      );





    }





  }

}