import json
import datetime
import os

# Read the JSON file
with open('posts_1.json') as file:
    data = json.load(file)

# Iterate over the data and grab everything we will need
for i, item in enumerate(data, start=1):
    media = item['media'][0]
    uri = media['uri']
    title = media['title']
    timestamp = media['creation_timestamp']

    # Name the file that we will be creating (Note, these files are created in
    # the same directory as the python script)
    filename = f"instagram_{i}.md"

    # The timestamp in the JSON isn't what I need for Hugo, so reformat!
    dt = datetime.datetime.fromtimestamp(timestamp)
    formatted_dt = dt.strftime('%Y-%m-%dT%H:%M:%S%z')

    # Images have the directory structure defined in the URL when getting this
    # data. I'm removing it so that it is just the actual file name. Hugo's
    # templates take care of where that image is (I copied all the images to
    # that folder).
    image_name = os.path.basename(uri)
    image_name = os.path.splitext(image_name)[0]

    # Create the markdown file in the format / template that Hugo would expect.
    # with open(filename, 'w') as md_file:
        md_file.write(f"---\n")
        md_file.write(f"title: 'Instagram-{i}'\n")
        md_file.write(f"date: {formatted_dt}-04:00\n")
        md_file.write(f"draft: false\n")
        md_file.write(f"statusimage: '{image_name}.jpg'\n")
        md_file.write(f"categories: ["photos"]\n")
        # You should get the point here...
        md_file.write(f"---\n")

# When it's done, let's not only inform ourselves that it worked, but let's also
# add in some words of encouragement.
print("Wow, I did it. I made all the files for you. You're so smart, now go do more amazing things.")

// The variable that will store all the text, starts with the kanban board settings
var obsidianText = "---\n\nkanban-plugin: basic\n\n---\n\n";

// Something to keep track of just to display when it's copied.
var numberOfLists;
var numberOfCards;

// Get all the lists in trello
var trelloLists = document.getElementsByClassName("js-list");
numberOfLists = trelloLists.length;

// Cycle through all the lists
for (l = 0; l < numberOfLists; l++){
  // Get the list name
  var trelloListHeader = trelloLists[l].getElementsByTagName("h2")[0].innerText;

  // Append the header to obsidianText in markdown
  obsidianText += "\n## " + trelloListHeader + "\n";

  // Get all the cards in each list
  var trelloItems = trelloLists[l].getElementsByClassName("list-card");
  numberOfCards = numberOfCards + trelloItems.length;

  // Cycle through all the cards in each list
  for (i = 0; i < trelloItems.length; i++){

    // Get the card title
    var trelloItemTitle = trelloItems[i].getElementsByClassName("list-card-title")[0].innerText;

    // Grab all of the labels if they have text specified. This does not get labels that are just colors.
    var trelloLabels = trelloItems[i].getElementsByTagName("button");

    // cycle though all of labels
    for (b=0; b<trelloLabels.length; b++){
      var ariaLabel = trelloLabels[b].getAttribute("aria-label"); // aria label is formatted as aria-label = "Color:red title: "Label_Text""
      var splitAriaValue = ariaLabel.split('title: ')[1]; // Split the string to just get the title, so 0 is trash 1 is the value of 'title' “Label_Text”"

      splitAriaValue = splitAriaValue.replace("“", "") // get rid of the smart quotes
      splitAriaValue = splitAriaValue.replace("”", "") // both of them

      // Append the label to item
      if (splitAriaValue != "none"){
        trelloItemTitle = trelloItemTitle + " #" + splitAriaValue;
      }
    }

    // Get the date. We can't get the time because trello doesn't display it in the list.
    var trelloDate = trelloItems[i].getElementsByClassName("js-due-date-text");
    if (trelloDate.length > 0){ // Only work on the ones that have a date.
      trelloDate = trelloDate[0].innerText;
      var trelloConvertedDate = new Date(trelloDate).toISOString().substring(0, 10);; // Convert it to an actual date so we can change the format
      // Append the date to item
      trelloItemTitle = trelloItemTitle + " @{" + trelloConvertedDate + "}";
    }

  // Append the item (with labels and date) to obsidianText in markdown
  obsidianText += "- [ ] " + trelloItemTitle + "\n";
  }
}

// Append the final expected kanban settins
obsidianText += '\n\n%% kanban:settings\n```\n{"kanban-plugin":"basic"}\n```\n%%';

//Copy text to the clipboard
navigator.clipboard.writeText(obsidianText);


// Flash the time on the page in an overlay so that I know I clicked it.
var elemDiv = document.createElement('div');
elemDiv.innerHTML = "<h1 style='font-size:40px; color:white; text-align:center; margin-top:2em;'>" + "Copied " + numberOfLists + " Lists and " + numberOfCards + " cards. </h1>";
elemDiv.style.cssText = 'position:absolute;width:100%;height:100%;opacity:0.8;z-index:1000;background:#000;top:0';
document.body.appendChild(elemDiv);

// Have it fade out after a bit
setTimeout(function(){ elemDiv.style.display = "none"; }, 2000);

function setup() {
  var canvas = createCanvas( 1600, 1600 )
  canvas.parent("canvasArea");
  colorMode( HSB )
  noLoop()
  noStroke()
}

function draw() {
  background( 197, 31, 65 )

  // Setup a grid so i can figure out the uppper and lower bounds
  // of where the points should go
  var columns = 20
  var rows = 20

  var columnWidth = 1600 / columns
  var columnHeight = 1600 / rows

  // Show the grid
  fill( 18, 11, 18 )
  //stroke( 90, 90, 90 )
  //rect( 0, 0, columnWidth, columnHeight )

  var allCoordinates = [];
  // Create a row
  for ( i = 0; i < rows; i++ ){
    // Create a column
    for ( j = 0; j < columns ; j++ ){
      rect( j * columnWidth, i * columnHeight, columnWidth, columnHeight )
      //create my point
      var pointPositionX = random( j * columnWidth + columnWidth, j * columnWidth )
      var pointPositionY = random( i * columnHeight + columnHeight, i * columnHeight )

      allCoordinates.push( [pointPositionX, pointPositionY] )
      circle( pointPositionX, pointPositionY, 10 )
    }
  }
  var whichRow = 1
  var l = 1
  while ( l < allCoordinates.length ){

    //firstTriangle
    if (whichRow == 1 || whichRow == rows){
      //don't do anything on the first and last row (thse need just one triangle)
    }
    else{
      if ( (l + 1) % rows == 0 || l == 0){
        console.log("it's the last item, do nothing")
      }
      else{
        //Triangle 1
        var colorChoices = [
          [45, 15, 75],
          [22, 42, 95],
          [5, 55, 75],
          [0, 61, 95]
        ]

        var randomColorChoice = Math.floor(random(0,4))
        fill( colorChoices[randomColorChoice][0], colorChoices[randomColorChoice][1], Math.floor(random(50,100)) )
        //stroke( 200, 90, 90 )

        var currentPoint = l
        var nextPoint = l + 1
        var bottomPoint = l + rows
        var firstPointX = allCoordinates[currentPoint][0]
        var firstPointY = allCoordinates[currentPoint][1]
        var secondPointX = allCoordinates[nextPoint][0]
        var secondPointY = allCoordinates[nextPoint][1]
        var thirdPointX = allCoordinates[bottomPoint][0]
        var thirdPointY = allCoordinates[bottomPoint][1]
        triangle(firstPointX, firstPointY, secondPointX, secondPointY, thirdPointX, thirdPointY)

        //Triangle 2
        randomColorChoice = Math.floor(random(0,4))
        fill( colorChoices[randomColorChoice][0], colorChoices[randomColorChoice][1], Math.floor(random(50,100)) )
        //stroke( 200, 90, 90 )

        var currentPoint = l
        var nextPoint = l - rows
        var bottomPoint = l + 1
        var firstPointX = allCoordinates[currentPoint][0]
        var firstPointY = allCoordinates[currentPoint][1]
        var secondPointX = allCoordinates[nextPoint][0]
        var secondPointY = allCoordinates[nextPoint][1]
        var thirdPointX = allCoordinates[bottomPoint][0]
        var thirdPointY = allCoordinates[bottomPoint][1]
        triangle( firstPointX, firstPointY, secondPointX, secondPointY, thirdPointX, thirdPointY )
      }
    }
    l++
    if ( l % rows == 0 ){ whichRow++ }
  }
}