const imagePath =
  "/content/dam/ctvnews/en/images/national/2021";
const data = [
  {
    name: "King Charles",
    position: { x: 4, y: 1 },
    img: `${imagePath}/charles.png`,
    info: `Charles Philip Arthur George was born at Buckingham Palace Nov. 14, 1948.
    He became King Charles III, Sovereign of Canada, after the passing of his mother, Queen Elizabeth II on Sept. 8, 2022.
    He is the eldest son of Queen Elizabeth II and Prince Philip, Duke of Edinburgh. He became Heir to the Throne when he was 3 years old, when his mother became Queen in 1952.`,
    succession: 0,
    center: [45, 20],
    scale: 2.2,
  },
  {
    name: "Catherine, Princess of Wales",
    position: { x: 1, y: 2 },
    img: `${imagePath}/kate.png`,
    info: `Catherine, Princess of Wales (born Catherine Elizabeth Middleton) was born Jan. 9, 1982 at Royal Berkshire Hospital in Reading, Berkshire, England.
    She met Prince William in 2001 while studying at the University of St Andrews in Scotland.
    They married on April 29, 2011 and have three children together. Her husband, William, Prince of Wales, is the heir apparent to the throne, making her the next likely queen consort.`,
    center: [45, 20],
  },
  {
    name: "Prince William",
    position: { x: 3, y: 2 },
    img: `${imagePath}/william.png`,
    info: `William Arthur Philip Louis was born at St Mary's Hospital in London, England, on June 21, 1982.
    He is the eldest son of King Charles III and Lady Diana Spencer, the late Princess of Wales. William was 15 when his mother died.
    He holds the title of Prince of Wales and is first in the line to the throne.`,
    succession: 1,
  },
  {
    name: "Prince Harry",
    // position: { x: 8, y: 2 },
    position: { x: 5, y: 2 },
    img: `${imagePath}/harry.png`,
    info: `Henry Charles Albert David was born on Sept. 15, 1984 at St Mary’s Hospital in London, England.
    The Duke of Sussex is the second and youngest child of King Charles III and Lady Diana Spencer, the late Princess of Wales. 
    On 19 May, 2018, he married American actress Meghan Markle, who then became Duchess of Sussex. In 2020, the two announced they would be stepping back as “senior” members of the Royal family.
    He is fifth in line to the throne.`,
    succession: 5,
  },
  {
    name: "Megan, Duchess of Sussex",
    // position: { x: 10, y: 2 },
    position: { x: 7, y: 2 },
    img: `${imagePath}/meghan.png`,
    info: `Meghan, Duchess of Sussex (born Rachel Meghan Markle) was born Aug. 4, 1981 in Los Angeles, California.
    She is a former actress who retired from the profession after marrying Prince Harry in 2018, upon which she became Duchess of Sussex.
    In 2020, the two announced they would be stepping back as “senior” members of the Royal family.`,
  },
  {
    name: "Prince George",
    position: { x: 1, y: 3 },
    img: `${imagePath}/george.png`,
    info: `George Alexander Louis was born on July 22, 2013, at St Mary's Hospital in London, England.
    He is the eldest son of Prince William and Catherine, Princess of Wales.
    He holds the title of Prince of Wales and is second in the line of succession.`,
    succession: 3,
    center: [50, 35],
    succession: 2,
  },
  {
    name: "Princess Charlotte",
    position: { x: 3, y: 3 },
    img: `${imagePath}/charlotte.png`,
    info: `Charlotte Elizabeth Diana was born on May 2, 2015, at St Mary's Hospital in London, England.
    She is the second child of Prince William and Catherine, Princess of Wales.
    She holds the title of Her Royal Highness Princess Charlotte of Wales and is third in the line of succession.`,
    center: [50, 20],
    scale: 2,
    succession: 3,
  },
  {
    name: "Prince Louis",
    position: { x: 2, y: 4 },
    img: `${imagePath}/louis.png`,
    info: `Louis Arthur Charles was born on April 23, 2018, at St Mary's Hospital in London, England.
    He is the third and youngest child of Prince William and Catherine, Princess of Wales.
    He is fourth in line to the throne.`,
    adjust: "y",
    center: [50, 15],
    succession: 4,
  },
  {
    name: "Prince Archie",
    // position: { x: 8, y: 3 },
    position: { x: 5, y: 3 },
    img: `${imagePath}/archie.png`,
    info: `Archie Harrison Mountbatten-Windsor was born on May 6, 2019 at Portland Hospital in London, England.
    He is the eldest child of Prince Harry and Meghan Markle.
    He is sixth in line to the throne.`,
    center: [50, 40],
    succession: 6,
  },
  {
    name: "Princess Lilibet",
    // position: { x: 10, y: 3 },
    position: { x: 7, y: 3 },
    img: `${imagePath}/lilibet.png`,
    info: `Lilibet Diana Mountbatten-Windsor was born on June 4, 2021, at Santa Barbara Cottage Hospital in Santa Barbara, California.
    She is the second and youngest child of Prince Harry and Meghan Markle.
    She is seventh in line to the throne.`,
    succession: 7,
  },
];

const connections = [
  //Charles
  { position: { x: 4, y: 1 }, type: "down", succession: 1 },

  // George Charlotte Louis
  { position: { x: 2, y: 3 }, type: "up" },
  { position: { x: 2, y: 4 }, type: "up long" },
  { position: { x: 2, y: 3 }, type: "right", succession: 1 },
  { position: { x: 3, y: 3 }, type: "left" },

  //William Kate
  { position: { x: 2, y: 2 }, type: "middle left" },
  { position: { x: 4, y: 2 }, type: "right", succession: 1 },
  { position: { x: 3, y: 2 }, type: "middle right", succession: 1 },

  //Harry
  { position: { x: 5, y: 2 }, type: "left" },

  { position: { x: 6, y: 2 }, type: "middle left" },
  { position: { x: 7, y: 2 }, type: "middle right" },

  //Archie
  { position: { x: 6, y: 3 }, type: "right" },
  { position: { x: 7, y: 3 }, type: "left" },
];

const container = d3.select(".royal-family-tree");
container.append("div").attr("class", "background-image");

container
  .selectAll("div.connection")
  .data(connections)
  .join("div")
  .attr("class", (d) => `connection ${d.type}`)
  .style("grid-column", (d) => `${d.position.x} / ${d.position.x + 1}`)
  .style("grid-row", (d) => `${d.position.y} / ${d.position.y + 1}`)
  .classed("succession", (d) => d.succession > 0);

const royals = container
  .selectAll("div.royal")
  .data(data)
  .join("div")
  .attr("class", "royal")
  .classed("adjust-y", (d) => d.adjust === "y")
  .style("grid-column", (d) => `${d.position.x} / ${d.position.x + 2}`)
  .style("grid-row", (d) => `${d.position.y} / ${d.position.y + 1}`)
  .classed("succession", (d) => d.succession < 3);
// .style("transform", (d) => `translate(${d.position.x}em,${d.position.y}em)`);

const imgContainer = royals.append("div").attr("class", "img-container");
imgContainer.append("div").attr("class", "img-shadow");

imgContainer
  .append("div")
  .attr("class", "img")
  .style("background-image", (d) => `url(${d.img})`)
  .style("background-position", (d) => {
    if (!d.center) return;
    return `${d.center[0]}% ${d.center[1]}%`;
  })
  .style("background-size", (d) => {
    if (!d.scale) return;
    return `${d.scale * 100}%`;
  });

royals
  .append("div")
  .attr("class", "name")
  .text((d) => d.name);

royals
  .append("div")
  .attr("class", "info")
  .text((d) => d.info);

const infoContainer = container
  .append("div")
  .attr("class", "info-container")
  .classed("open", false);

const infoBackground = infoContainer
  .append("div")
  .attr("class", "info-background")
  .on("click", (e) => {
    infoContainer.classed("open", false);
  });

const info = infoContainer.append("div").attr("class", "info");

const infoTitle = info.append("div").attr("class", "info-title");
const infoBody = info.append("div").attr("class", "info-body");
const infoSuccession = info.append("div").attr("class", "info-succession");

royals.on("click", function (e, d) {
  infoContainer.classed("open", true);
  infoTitle.text(d.name);
  infoBody.html(
    d.info
      .split("\n")
      .map((d) => `<p>${d}</p>`)
      .join("")
  );
  const numSuffix = (num) => {
    let suffix;
    if (num === 1) {
      suffix = "st";
    } else if (num === 2) {
      suffix = "nd";
    } else if (num === 3) {
      suffix = "rd";
    } else {
      suffix = "th";
    }
    return `${num}${suffix}`;
  };
  infoSuccession.text(`${numSuffix(d.succession)} in the order of succession.`);
  infoSuccession.classed("hidden", !d.succession || d.succession === 0);
});
// .on("mouseover", function (e, d) {
//   royals.classed("grey", true);
//   d3.select(this).classed("grey", false);
// })
// .on("mouseout", function (e, d) {
//   royals.classed("grey", false);
// });