addresses = FileAttachment("data/community_resources_geocoded.csv").csv()

addresses_dist = aq.from(addresses)
  .derive({dist: aq.escape(d => euclidean_distance(d.lat, d.long, position.lat, position.lon))})
.orderby("dist")

euclidean_distance = (p1, p2, q1, q2) => {
  return Math.abs(p1 - q1) + Math.abs(p2 - q2);
}

categories = addresses_filtered_county.array("category")
category_options = [...new Set(categories)]

counties = addresses.map(d => d.county)
county_options = [...new Set(counties)]

position = {
  txt_input;
  // Add US when input is city name or zip only
  // Add state when city name only
  var txt_input_us = txt_input;
  if(!txt_input.includes(",")) var txt_input_us = txt_input.concat(", FL, US");
  const t1 = performance.now();
  let result = await geocoding(txt_input_us);
  if (result[0]) {
    result[0].time = ~~(performance.now() - t1);
    return result[0];
  } else return result;
}

user_geo = {
  var user_geo = {
    type: "FeatureCollection",
     features: [{type: "Feature",
                 properties: {name: "User Location"},
                 geometry: {type: "Point",
                            coordinates: [position.lon, position.lat]}
                }
               
               ]
  }
  return user_geo

}

addresses_filtered_county = addresses_dist
                          .params({choose_county})
                          .filter(d => d.county == choose_county)
                          .select("id",
                                  "category",
                                  "Organization", 
                                  "address", 
                                  "Website",
                                  "lat",
                                  "long",
                                  "dist")

addresses_filtered_category = addresses_filtered_county
                              .params({choose_category, search})
                              .filter(d => d.category == choose_category)
                              .filter(d => op.match(op.lower(d.Organization + d.address), op.lower(search)))

addresses_filtered_category_for_geo = addresses_filtered_category
                          .params({location_select})
                          .derive({active: d => d.id == location_select ? 1 : 0})

addresses_filtered = d3.csvParse(addresses_filtered_category.toCSV())

addresses_filtered_for_geo = d3.csvParse(addresses_filtered_category_for_geo.toCSV())

addresses_geo = geo.coords2geo(
  addresses_filtered_for_geo,
    {
        lat: "lat",
        lng: "long" 
    })

florida = d3.json("./data/county_fl.geojson")

roads_soflo = d3.json("./data/roads_soflo.geojson")

south_florida = geo.properties.subset({
  x: florida,
  field: "NAME",
  selection: ["Broward", "Miami-Dade", "Palm Beach", "Monroe"]
})

addresses_geo_buffered = geo.buffer(addresses_geo, {dist: 5})

import {geocoding} from "@pierreleripoll/geocoding-nominatim"
import {aq, op} from "@uwdata/arquero"

bertin = require("bertin");
geo = require("geotoolbox");

cards = (the_data, width = 300, height = 120, perspective = 1000) => {
  
  const container = d3.create("div")
  container.node().value = 0
  
  const resourceCard = container.selectAll(".resourceCard")
    .data(the_data)
    .join("div")
    .attr("class", ".resourceCard card")
    .style("padding", "0px 5px 5px 5px")
    .style("margin-top", "5px")
    
  const resourceCardFront = resourceCard.append("div")
    .on("mouseover", (d, x) => {
      container.node().value = x.id
      container.node().dispatchEvent(new Event("input", {}));
    })
  
  resourceCardFront.append("h3")
    .text(d => d.Organization)
    .attr("id", d => d.id)
    
  resourceCardFront.append("p")
    .text(d => d.address)
    .attr("class", "addr_name_street")
    
  resourceCardFront.append("p")
    .text(d => d.city_state_zip)
    
  resourceCardFront.append("a")
    .text(d => d.Website)
    .attr("href", d => d.Website)
    .attr("target", "_blank")
  
  return container.node()
}

nav_map = (locations, user_location, area, context_area, extent_area) => {
  if(Object.keys(locations.features).length == 0) {
    const container = d3.create("p").
    text("We could not find any results for the criteria you specified. Please reset or refine you search criteria.").
    style("padding", "15px")
    
    return container.node()
  }

  var out = bertin.draw({
    
  params: { background: "#bde1f0", margin: 10, extent: extent_area },
  layers: [
    {
      type: "layer",
      geojson: user_location,
      fill: "blue",
      stroke: "white",
      strokeWidth: 4,
      symbol: "circle",
      symbol_size: 200,
      tooltip: "Your Location"
      },
    {
      type: "layer",
      geojson: locations,
      fill: {
        type: "typo",
        values: "active",
        order: ["0", "1"],
        colors: ["red", "yellow"]
      },
      stroke: {
        type: "typo",
        values: "active",
        order: ["0", "1"],
        colors: ["white", "red"]
      },
      strokeWidth: 4,
      symbol: "circle",
      symbol_size: 200,
      tooltip: {
        fields: [
          "$address",
          "- - - - - - - - - - - - - ",
          "$Organization"
        ],
        fill: "beige",
        stroke: "red",
        strokeWidth: 3,
        fillOpacity: 0.7,
        strokeOpacity: 1,
        fontWeight: ["bold", "normal", "normal", "lighter"],
        fontSize: [18, 14, 25, 10],
        fontStyle: ["normal", "normal", "normal", "italic"],
        col: ["red", "red", "red", "yellow"]
      }},
      {
      type: "layer",
      geojson: roads_soflo,
      stroke: "green"
    },
    {
      type: "layer",
      geojson: area,
      fill: "beige",
      stroke: "#6eb5e0",
      strokeWidth: 1.5,
      tooltip: "$NAMELSAD"
    },
    {
      type: "layer",
      geojson: context_area,
      fill: "lightgrey",
      stroke: "lightgrey",
      strokeWidth: 1.5,
      tooltip: "$NAMELSAD"
    },
    { type: "scalebar", units: "miles" }
  ]
})
  return out
}