// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: cyan; icon-glyph: magic;
const GOOGLE_MAPS_API_KEY = "YOUR_API_KEY_HERE";

const route_1_label = "Ramos Mejía";
const route_1_origin = "14048, Av. Rivadavia 14000, Ramos Mejía, Provincia de Buenos Aires";
const route_1_destination = "C1198 Buenos Aires";

const route_2_label = "Once";
const route_2_origin = "C1198 Buenos Aires";
const route_2_destination = "14048, Av. Rivadavia 14000, Ramos Mejía, Provincia de Buenos Aires";

const route_3_label = "Santa Fe (a FaDe)";
const route_3_origin = "Santa Fe - Carlos Jaúregui";
const route_3_destination = "Facultad de Derecho (UBA), Av. Pres. Figueroa Alcorta 2263, C1425 CABA";

const route_4_label = "Santa Fe (a Hosp)";
const route_4_origin = "Santa Fe - Carlos Jaúregui";
const route_4_destination = "Hospitales, C1437 CABA";

const route_5_label = "Pueyrredon (a Congreso.T)";
const route_5_origin = "Estación Pueyrredón, Av. Sta. Fe 2500, C1015 CABA";
const route_5_destination = "Congreso de Tucuman, Av. Cabildo, Buenos Aires";

const route_6_label = "Pueyrredon (a Catedral)";
const route_6_origin = "Estación Pueyrredón, Av. Sta. Fe 2500, C1015 CABA";
const route_6_destination = "Catedral, C1004 CABA";

const SUBWAY = "subway";
const RAIL = "rail";

const icon_subway = "https://img.icons8.com/material/256/subway.png";
const icon_rail = "https://img.icons8.com/material/256/train.png";

const routes = [
  {
    label: route_1_label,
    origin_destination: [
      route_1_origin,
      route_1_destination,
    ],
    modes: [RAIL],
  },
  {
    label: route_2_label,
    origin_destination: [
      route_2_origin,
      route_2_destination,
    ],
    modes: [RAIL],
  },
  {
    label: route_3_label,
    origin_destination: [
      route_3_origin,
      route_3_destination,
    ],
    modes: [SUBWAY],
  },
  {
    label: route_4_label,
    origin_destination: [
      route_4_origin,
      route_4_destination,
    ],
    modes: [SUBWAY],
  },
  {
    label: route_5_label,
    origin_destination: [
      route_5_origin,
      route_5_destination,
    ],
    modes: [SUBWAY],
  },
  {
    label: route_6_label,
    origin_destination: [
      route_6_origin,
      route_6_destination,
    ],
    modes: [SUBWAY],
  },
];


// Light-Mode 1st, Dark-Mode 2nd
const colors = {
  widgetBg: Color.dynamic(
    new Color("#EAECED"),
    new Color("#22262C")
  ),
  cellBackgroundColor: Color.dynamic(
    new Color("#D0D2D4"),
    new Color("#3C4044")
  ),
  update: Color.dynamic(
    new Color("#676767"),
    new Color("#A1A1A6")
  ),
  labelTextColor: Color.dynamic(
    new Color("#00204F"),
    new Color("#FFF")
  ),
  cellTextColor: Color.dynamic(
    new Color("#212121"),
    new Color("#FFFFFF")
  ),
};

const widget = new ListWidget();
widget.backgroundColor = colors.widgetBg;

let mainStack = widget.addStack()

let leftStack = mainStack.addStack()
leftStack.layoutVertically()
mainStack.addSpacer(10)

let rightStack = mainStack.addStack()
rightStack.layoutVertically()

function composeGoogleMapsRequestUrl(origin, destination, modes) {
  return [
    "https://maps.googleapis.com/maps/api/directions/json",
    `?origin=${encodeURIComponent(origin)}`,
    `&destination=${encodeURIComponent(destination)}`,
    "&mode=transit",
    modes[0] == "rail" ? "&transit_mode=rail" : "&transit_mode=subway",
    "&transit_routing_preference=fewer_transfers",
    "&alternatives=false",
    "&avoidWalking=true",
    `&key=${GOOGLE_MAPS_API_KEY}`,
  ].join("");
}

async function getStopData(origin, destination, modes) {
  const googleMapsRequestUrl =
    composeGoogleMapsRequestUrl(
      origin,
      destination,
      modes
    );
  const googleMapsRequest = new Request(
    googleMapsRequestUrl
  );
  return googleMapsRequest.loadJSON();
}

function getLineColors(route) {
  if (
    route &&
    route.legs &&
    route.legs[0] &&
    route.legs[0].steps
  ) {
    const step = route.legs[0].steps.find(step =>
      step &&
      step.transit_details &&
      step.transit_details.line &&
      step.transit_details.line.color
    )

    if (step) {
      return {
        lineColor: new Color(step.transit_details.line.color),
        textColor: new Color(step.transit_details.line.text_color)
      }
    }
  }

  return {}
}

function getStopTimes(stopData) {
  const routes = stopData.routes.filter((route) => {
    // No Multi Modal Trips
    return (
      route.legs.length === 1 &&
      route.legs[0].steps.length <= 3
    );
  });

  const routeTimes = routes.map((route) => {
    const lineColors = getLineColors(route)
    return {
      time: route.legs[0].departure_time != null ? route.legs[0].departure_time.text : "N/A",
      colors: lineColors
    }
  })

  return routeTimes;
}

function getMethodOfTransportation(route) {
  if (
    route &&
    route.legs &&
    route.legs[0] &&
    route.legs[0].steps
  ) {
    const step = route.legs[0].steps.find(step =>
      step &&
      step.transit_details &&
      step.transit_details.travel_mode
    )

    if (step) {
      return step.transit_details.travel_mode
    }
  }


}

function createRouteScheduleStack(stopTimes, _color, label, side) {
  let scheduleLabel = side == "left" ? leftStack.addText(label) : rightStack.addText(label);
  scheduleLabel.textColor = colors.labelTextColor;
  scheduleLabel.font = Font.boldSystemFont(14);

  let row = side == "left" ? leftStack.addStack() : rightStack.addStack();
  row.setPadding(4, 0, 0, 0);

  stopTimes.forEach(({ time: _time, colors: { lineColor, textColor } }, idx) => {

    let cell = row.addStack();
    cell.backgroundColor = lineColor || colors.cellBackgroundColor
    cell.setPadding(1, 2, 1, 2);
    cell.cornerRadius = 4;

    // Slice the "am" or "pm" from the time string
    const time = _time.slice(0);

    // TIME ACA
    let cellText = cell.addText(time);
    cellText.font = Font.mediumSystemFont(12);

    cellText.textColor = textColor || colors.cellTextColor;

    // Add some spacing to the right of each cell
    const isLastIteration = idx === stopTimes.length - 1;

    if (side === "left") {
      leftStack.addStack(row);
    } else {
      rightStack.addStack(row);
    }
    if (!isLastIteration) {
      row.addText(" ");
    }
  });
}

let i = 0;
let len = routes.length;

for (i; i < len; i++) {
  const route = routes[i];
  const [origin, destination] = route.origin_destination;
  const modes = routes[i].modes;

  side = i % 2 == 0 ? "left" : "right";


  const stopData = await getStopData(origin, destination, modes);
  const stopTimes = getStopTimes(stopData);
  createRouteScheduleStack(
    stopTimes.slice(0, 3),
    route.color,
    route.label,
    side,
  );
}

widget.addSpacer();

let lastUpdatedAt =
  "Last updated " + new Date().toLocaleTimeString();
const lastUpdatedAtText = widget.addText(lastUpdatedAt);
lastUpdatedAtText.textColor = colors.updated;
lastUpdatedAtText.font = Font.lightSystemFont(8);

// Every 10 minutes
const now = Date.now();
widget.refreshAfterDate = new Date(now + 1000 * 60 * 10);

Script.setWidget(widget);
Script.complete();

widget.presentMedium();