import React, { useState } from "react";
import axios from "axios";

function calcCrow(lat1, lon1, lat2, lon2) 
    {
      var R = 6371; // km
      var dLat = toRad(lat2-lat1);
      var dLon = toRad(lon2-lon1);
      var lat1 = toRad(lat1);
      var lat2 = toRad(lat2);

      var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2); 
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
      var d = R * c;
      d = d / 1.609;
      return d.toFixed(1);
    }

// Converts numeric degrees to radians
function toRad(Value) 
    {
        return Value * Math.PI / 180;
    }

const TableBody = ({ tableData, columns }) => {
    const [active, setActive] = useState([]);
    var curr_event = window.localStorage.getItem("curr_event");
    var email = window.localStorage.getItem("email");
    const prev_fav = JSON.parse(window.localStorage.getItem("fav_venues"));
    console.log("prev favs", prev_fav);

    return (
     <tbody>
      {tableData.map((data) => {
        const curr_name = data.name;
        const curr_rating = data.rating;
        const curr_price = data.price_level;
        const curr_lat = data["geometry"]["location"]["lat"];
        const curr_long = data["geometry"]["location"]["lng"];

        var isActive = active.some(element => {
          if (element.name === curr_name) {
            return true;
          } else {
            return false;
          }
        })

        if (isActive === false && prev_fav !== null){
          isActive = prev_fav.some(element => {
            if (element.name === curr_name) {
              return true;
            } else {
              return false;
            }
          })
        }
        
        const handleClick = () => {
          if (isActive){
            const deletedFav = curr_name;

            const config = {
              method: "delete",
              url: "http://localhost:3001/delete-favorite",
              data: {
                  curr_event,
                  email,
                  deletedFav
              },
            };

            axios(config)
            .then((result) => {
              var updated = result.data.updated_favs;
              setActive(updated);
              // update localstorage favs
              localStorage.setItem("fav_venues",JSON.stringify(updated))
              console.log("Fav After Deletion: ", JSON.stringify(updated))
            })
            .catch((error) => {
              console.log(error);
            });
          } else {
            setActive([
              ...active,
              { name: curr_name}
            ]);
            console.log(active)

            const config = {
              method:"post",
              url: "http://localhost:3001/add-favorite",
              data: {
                curr_event,
                email,
                curr_name,
                curr_rating,
                curr_price,
                curr_lat,
                curr_long,
              }
            }
            axios(config)
            .then((result) => {
              var updated = result.data.updated_fav;
              setActive(updated);
              // update localstorage favs
              localStorage.setItem("fav_venues",JSON.stringify(updated))
              console.log("fav_venues after addition", JSON.stringify(updated))
            })
            .catch((error) => {
              console.log(error);
            });
          }
        };
       return (
        <tr key={data.id}>
         {columns.map(({ accessor }) => {
          var tData = data[accessor] ? data[accessor] : "——";
          if (accessor === "price_level"){
            if (Number(tData) === 1){
                tData = "$"
              } else if (Number(tData) === 2) {
                tData = "$$"
              } else {
                tData = "$$$"
              }
          }
          if (accessor === "distance") {
            var user_lat = window.localStorage.getItem("user_lat");
            var user_long = window.localStorage.getItem("user_long");
            tData = calcCrow(user_lat, user_long, curr_lat, curr_long).toString();
            var miles = " miles";
            tData = tData.concat(miles);
          }
          if (accessor === "fav") {
            return <button class = "favbutton" onClick={handleClick}>{ isActive ? "❤️" : "🤍"}</button>
          }
          return <td key={accessor}>{tData}</td>;
        })}
        </tr>
       );
      })}
     </tbody>
    );
   };
   
   export default TableBody;