// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: orange; icon-glyph: calendar-alt;
const debug = true;
const imageName = "image.jpg";
const backgroundColor = "#000000";
const currentDayColor = "#000000";
const textColor = "#ffffff";
const textRed = "#ec534b";

if (config.runsInWidget) {
  let widget = await createWidget();
  Script.setWidget(widget);
  Script.complete();
  await widget.presentLarge();
} else if (debug) {
  Script.complete();
  let widget = await createWidget();
  await widget.presentLarge();
} else {
  const appleDate = new Date("2001/01/01");
  const timestamp = (new Date().getTime() - appleDate.getTime()) / 1000;
  console.log(timestamp);
  const callback = new CallbackURL("calshow:" + timestamp);
  callback.open();
  Script.complete();
}

async function createWidget() {
  let widget = new ListWidget();
  widget.backgroundColor = new Color(backgroundColor);
  setWidgetBackground(widget, imageName);
  widget.setPadding(16, 16, 16, 16);
  const globalStack = widget.addStack();
  const leftStack = globalStack.addStack();
  const upperStack = globalStack.addStack();

  // opacity value for weekends and times
  const opacity = 0.6;

  // space between the two halves
  // Espacio enmedio
  globalStack.addSpacer(null);
  leftStack.layoutVertically();

  const date = new Date();
  const dateFormatter = new DateFormatter();
  dateFormatter.dateFormat = "EEEE";

  // Find future events that aren't all day and aren't canceled
  const events = await CalendarEvent.today([]);
  const futureEvents = [];
  for (const event of events) {
    if (
      event.startDate.getTime() > date.getTime() &&
      !event.isAllDay &&
      !event.title.startsWith("Canceled:")
    ) {
      futureEvents.push(event);
    }
  }

  // center the whole left part of the widget
  // Centrar izq
  leftStack.addSpacer(185);

  //leftStack.layoutVertically();

  // if we have events today; else if we don't
  if (futureEvents.length !== 0) {
    // show the next 3 events at most
    const numEvents = futureEvents.length > 3 ? 3 : futureEvents.length;
    for (let i = 0; i < numEvents; i += 1) {
      formatEvent(leftStack, futureEvents[i], textColor, opacity);
      // don't add a spacer after the last event
      if (i < numEvents - 1) {
        leftStack.addSpacer(8);
      }
    }
  } else {
    addWidgetTextLine(leftStack, "No more events today", {
      color: textColor,
      opacity,
      font: Font.regularSystemFont(15),
      align: "left",
    });
  }
  // for centering
  // Espacio Arriba
  //leftStack.addSpacer(130);

  // right half
  const rightStack = globalStack.addStack();
  rightStack.addSpacer(165);
  rightStack.layoutVertically();

  dateFormatter.dateFormat = "MMMM";

  // Current month line
  const monthLine = rightStack.addStack();
  monthLine.addSpacer(4);
  addWidgetTextLine(monthLine, dateFormatter.string(date).toUpperCase(), {
    color: textRed,
    textSize: 12,
    font: Font.boldSystemFont(12),
  });

  // between the month name and the week calendar
  rightStack.addSpacer(2);

  const calendarStack = rightStack.addStack();
  calendarStack.spacing = 2;

  const month = buildMonthVertical();

  for (let i = 0; i < month.length; i += 1) {
    let weekdayStack = calendarStack.addStack();
    weekdayStack.layoutVertically();

    for (let j = 0; j < month[i].length; j += 1) {
      let dayStack = weekdayStack.addStack();
      dayStack.size = new Size(20, 20);
      dayStack.centerAlignContent();

      if (month[i][j] === date.getDate().toString()) {
        const highlightedDate = getHighlightedDate(
          date.getDate().toString(),
          currentDayColor
        );
        dayStack.addImage(highlightedDate);
      } else {
        addWidgetTextLine(dayStack, `${month[i][j]}`, {
          color: textColor,
          opacity: i > 4 ? opacity : 1,
          font: Font.boldSystemFont(10),
          align: "center",
        });
      }
    }
  }

  return widget;
}

/**
 * Creates an array of arrays, where the inner arrays include the same weekdays
 * along with an identifier in 0 position
 * [
 *   [ 'M', ' ', '7', '14', '21', '28' ],
 *   [ 'T', '1', '8', '15', '22', '29' ],
 *   [ 'W', '2', '9', '16', '23', '30' ],
 *   ...
 * ]
 *
 * @returns {Array<Array<string>>}
 */
function buildMonthVertical() {
  const date = new Date();
  const firstDayStack = new Date(date.getFullYear(), date.getMonth(), 1);
  const lastDayStack = new Date(date.getFullYear(), date.getMonth() + 1, 0);

  const month = [["M"], ["T"], ["W"], ["T"], ["F"], ["S"], ["S"]];

  let dayStackCounter = 0;

  for (let i = 1; i < firstDayStack.getDay(); i += 1) {
    month[i - 1].push(" ");
    dayStackCounter = (dayStackCounter + 1) % 7;
  }

  for (let date = 1; date <= lastDayStack.getDate(); date += 1) {
    month[dayStackCounter].push(`${date}`);
    dayStackCounter = (dayStackCounter + 1) % 7;
  }

  const length = month.reduce(
    (acc, dayStacks) => (dayStacks.length > acc ? dayStacks.length : acc),
    0
  );
  month.forEach((dayStacks, index) => {
    while (dayStacks.length < length) {
      month[index].push(" ");
    }
  });

  return month;
}

/**
 * Draws a circle with a date on it for highlighting in calendar view
 *
 * @param  {string} date to draw into the circle
 *
 * @returns {Image} a circle with the date
 */
function getHighlightedDate(date) {
  const drawing = new DrawContext();
  drawing.respectScreenScale = true;
  const size = 50;
  drawing.size = new Size(size, size);
  drawing.opaque = false;
  drawing.setFillColor(new Color(textRed));
  drawing.fillEllipse(new Rect(1, 1, size - 2, size - 2));
  drawing.setFont(Font.boldSystemFont(25));
  drawing.setTextAlignedCenter();
  drawing.setTextColor(new Color("#ffffff"));
  drawing.drawTextInRect(date, new Rect(0, 10, size, size));
  const currentDayImg = drawing.getImage();
  return currentDayImg;
}

/**
 * formats the event times into just hours
 *
 * @param  {Date} date
 *
 * @returns {string} time
 */
function formatTime(date) {
  let dateFormatter = new DateFormatter();
  dateFormatter.useNoDateStyle();
  dateFormatter.useShortTimeStyle();
  return dateFormatter.string(date);
}

/**
 * Adds a event name along with start and end times to widget stack
 *
 * @param  {WidgetStack} stack - onto which the event is added
 * @param  {CalendarEvent} event - an event to add on the stack
 * @param  {number} opacity - text opacity
 */




function formatEvent(stack, event, color, opacity) {
    //let prefix = `▐`,
    //first.textColor = getItemColor(event.calendarTitle),

  const CALENDAR_COLORS = {
     "Algebra": Color.blue(),
     "Cal 2": Color.green(),
     "Cal 3": new Color("#3f51b5"),
  }

  //function getItemColor(event) {
    console.log("=-=-=-=-=-=-=-=")
    /*
    let prefix = stack.addText(`▐ `)
    prefix.textColor = `#${event.calendar.color.hex}`

    let eventTitle = stack.addText(event.title)
    console.log(text)
    console.log("=-=-=-=-=-=-=-=")
   //  return CALENDAR_COLORS[event.calendarTitle]
  //}
  eventC = new Color(`#${event.calendar.color.hex}`)
  addWidgetTextLine(stack, `▐`, {
    color: eventC,
    font: Font.mediumSystemFont(12),
    //lineLimit: 2,
  });*/

addWidgetTextLine(stack, `${event.title}`, {
    color,
    font: Font.mediumSystemFont(12),
    lineLimit: 1,
  });
  //const prefix1 = `▐`,

  // create line for event start and end times
  let timeStack = stack.addStack();
  const start = `${formatTime(event.startDate)}`;
  const end = `${formatTime(event.endDate)}`;

  if(start!=end){
  const time = `┃${formatTime(event.startDate)} - ${formatTime(event.endDate)}`;
  addWidgetTextLine(timeStack, time, {
    color: (`#${event.calendar.color.hex}`),
    opacity,
    font: Font.regularSystemFont(12),
  });} else {
    const time = `┃${formatTime(event.startDate)}`;
  addWidgetTextLine(timeStack, time, {
    color: (`#${event.calendar.color.hex}`),
    opacity,
    font: Font.regularSystemFont(12),
  });
}
}

function addWidgetTextLine(
  widget,
  text,
  {
    color = "#ffffff",
    textSize = 12,
    opacity = 1,
    align,
    font = "",
    lineLimit = 0,
  }
) {
  let textLine = widget.addText(text);
  textLine.textColor = new Color(color);
  if (typeof font === "string") {
    textLine.font = new Font(font, textSize);
  } else {
    textLine.font = font;
  }
  console.log(`${text}`);
  console.log(`${typeof opacity}`);
  textLine.textOpacity = opacity;
  switch (align) {
    case "left":
      textLine.leftAlignText();
      break;
    case "center":
      textLine.centerAlignText();
      break;
    case "right":
      textLine.rightAlignText();
      break;
    default:
      textLine.leftAlignText();
      break;
  }
}

function getImageUrl(name) {
  let fm = FileManager.iCloud();
  let dir = fm.documentsDirectory();
  return fm.joinPath(dir, `${name}`);
}

function setWidgetBackground(widget, imageName) {
  const imageUrl = getImageUrl(imageName);
  console.log(imageUrl);
  widget.backgroundImage = Image.fromFile(imageUrl);
}