import React, { useState, useEffect } from "react";
import Table from "./result-table";
import results from "./venue-search-data.json";
import "./venue-search.css";
import axios from "axios";
import NavBar from "../nav-bar/nav-bar";

const columns = [
    { label: "Name", accessor: "name", sortable: true, sortbyOrder: "asc"},
    { label: "Price", accessor: "price_level", sortable: true, sortbyOrder: "desc"},
    { label: "Ratings", accessor: "rating", sortable: true, sortbyOrder: "desc" },
    { label: "Distance", accessor: "distance"},
    { label: "Favorite", accessor: "fav" },
   ];
const VenueSearch = () => {
    useEffect(() => {
        // While loading, load the state from the localStorage.
        if (window.localStorage.getItem("venue_type")){
            setVenueType(window.localStorage.getItem("venue_type"));
        }
        if (window.localStorage.getItem("distance")) {
            setDistance(window.localStorage.getItem("distance"));
        }
        if (window.localStorage.getItem("max_price")) {
            setMaxPrice(window.localStorage.getItem("max_price"));
        }
            
      }, [])

    // initial state
    var [venue_type, setVenueType] = useState("restaurant");
    var [distance, setDistance] = useState("1");
    var [max_price, setMaxPrice] = useState("1");
    var [latitude, setLatitude] = useState("");
    var [longitude, setLongitude] = useState("");

    // find user location
    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(function(position) {
            setLatitude(position.coords.latitude);
            setLongitude(position.coords.longitude);
            window.localStorage.setItem("user_lat", position.coords.latitude);
            window.localStorage.setItem("user_long", position.coords.longitude);
        })
    }
    else {
        console.log("can't find user location")
    }

    const handleSubmit = (e) => {

        e.preventDefault();
        console.log("submit clicked")
        // console.log("venue is", venue_type)
        // console.log("distance is", distance)
        // console.log("max price is", max_price)
        console.log(distance);
        console.log(max_price);
        console.log(venue_type)

        // make Google Places API call
        var meters = -1;
        if (parseInt(distance) === 1) {
            meters = 1609;
        }
        else if (parseInt(distance) === 5) {
            meters = 8046;
        }
        else {
            meters = 16093;
        }

        const configuration = {
            method: 'post',
            url: "http://localhost:3001/search",
            data: {
                longitude,
                latitude,
                meters,
                venue_type,
                max_price
            }
        };

        axios(configuration)
            .then((result) => {
                // list of venues returned here
                console.log("result is:", result.data.results)
                window.location.reload()
            })
            .catch((error) => {
                console.log(error);
            });
    };

    const clearResults = (e) => {
        console.log("Clear button clicked");
        axios.delete("http://localhost:3001/search");
    }

    const handleVTChange = (e) => {
        setVenueType(e.target.value)
        window.localStorage.setItem("venue_type", e.target.value);
        console.log("stored venue");
    };

    const handleDChange = (e) => {
        setDistance(e.target.value)
        window.localStorage.setItem("distance", e.target.value);
        console.log("stored distance")
    };

    const handleBChange = (e) => {
        setMaxPrice(e.target.value)
        window.localStorage.setItem("max_price", e.target.value);
        console.log("stored max price")
    };

    

    return(
        <div>
            <NavBar></NavBar>
            <h3 class = "venue-title">Venue Search</h3>
            <form class="search-form">
                <p>I want a</p>
                <select id="venue_type" onChange={(e) => handleVTChange(e)} value={venue_type}>
                    <option value="restaurant">restaurant</option>
                    <option value="bar">bar</option>
                    <option value="cafe">cafe</option>
                    <option value="movie_theater">movie theater</option>
                    <option value="amusement_park">amusement park</option>
                    <option value="aquarium">aquarium</option>
                    <option value="art_gallery">art gallery</option>
                    <option value="bakery">bakery</option>
                    <option value="bowling_alley">bowling alley</option>
                    <option value="casino">casino</option>
                    <option value="museum">museum</option>
                    <option value="night_club">night club</option>
                    <option value="park">park</option>
                    <option value="spa">spa</option>
                    <option value="zoo">zoo</option>
                </select>
                <p> within a </p>
                <select id="distance" onChange={(e) => handleDChange(e)} value={distance}>
                    <option value="1">1</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                </select>
                <p> mile radius of me. I have a budget of </p>
                <select id="budget" onChange={(e) => handleBChange(e)} value={max_price}>
                    <option value="1">$</option>
                    <option value="2">$$</option>
                    <option value="4">$$$</option>
                </select>
                <button class="submit-button" onClick={(e) => handleSubmit(e)}>Search</button>
                <button class="clear-button" onClick={(e) => clearResults(e)}>Clear</button>
            </form>
            <a  href="http://localhost:3000/favorite-venues" class="fav">Go to Favorites</a>
            <Table class="table" caption=""
            data={results}
            columns= {columns}/>
        </div>
    );
};

export default VenueSearch;