const flipIt = true;
const positions = ['start', 'end', 'center'];
const sentences = [
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in facilisis eros. Donec eget faucibus lectus, sed molestie mi.',
  'Vivamus dignissim nisi sed diam scelerisque tempor et et risus. Aenean tincidunt tempor augue, id varius enim commodo congue.',
  'Sed iaculis placerat luctus. Vivamus sed consectetur dui. Suspendisse lacinia sit amet diam sed gravida. Ut eget dui congue, venenatis erat et, faucibus nisl. Donec a auctor leo.',
  'Duis nisi diam, varius a ipsum faucibus, iaculis bibendum nunc.',
  'Donec quis hendrerit nunc, bibendum feugiat sem. Sed lobortis sem augue, facilisis gravida purus molestie eu. Sed ac ipsum maximus, feugiat mauris non, pretium nisi.',
  'Phasellus elementum scelerisque pulvinar. Ut sagittis egestas enim. Curabitur at condimentum tellus.'
];

function getRandomInt(max) {
  return Math.floor(Math.random() * max)
}

function setRandomAlignments() {
  const curAlignContent = document.body.style.alignContent,
        curJustifyContent = document.body.style.justifyContent;
  let newAlignContent, newJustifyContent;
  do {
    newAlignContent = positions[getRandomInt(3)];
    newJustifyContent = positions[getRandomInt(3)];  
  } while ((newAlignContent === curAlignContent) && (newJustifyContent === curJustifyContent))
  document.body.style.alignContent = newAlignContent;
  document.body.style.justifyContent = newJustifyContent;
}

function randomBetween(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function manipulateBox() {
  const $box= document.querySelector('.box');
  
  $box.style.width = `${randomBetween(5, 30)}vmin`;
  $box.style.height = `${randomBetween(5, 30)}vmin`;
  $box.innerText = sentences[randomBetween(0, sentences.length-1)];
}

document.body.addEventListener('click', async (e) => {
  if (!document.startViewTransition) {
    setRandomAlignments();
    setRandomSize();
  } else {
    const t = document.startViewTransition(() => {
      setRandomAlignments();
      manipulateBox();
    });
    
    if (!flipIt) return;
    
    await t.ready;
    
    // Get boxGroupAnimation
    const vtAnimations = document.getAnimations().filter((anim) => {
			return anim.effect.target === document.documentElement &&
        anim.effect.pseudoElement?.startsWith("::view-transition")
		});
    const boxGroupAnimation = vtAnimations.find((anim) => {
      return anim.effect.pseudoElement == '::view-transition-group(box)';
    });
    
    // Get old position + size by extracting the data from the keyframes
    const boxGroupKeyframes = boxGroupAnimation.effect.getKeyframes();
    const oldMatrix = new DOMMatrix(boxGroupKeyframes[0].transform);

    const rectBefore = {
      width: boxGroupKeyframes[0].width.split('px')[0],
      height: boxGroupKeyframes[0].height.split('px')[0],
      left: oldMatrix.e,
      top: oldMatrix.f,
    };
    
    // Get new position + size by either extacting the data from the keyframes
    // or by forwarding the animation to the end and extracting the values from the getComputedStyle()
    // The latter happens in Chrome because of https://crbug.com/387030974
    let rectAfter;
    if (boxGroupKeyframes[1].transform === 'none') {
      boxGroupAnimation.currentTime = boxGroupAnimation.effect.getTiming().duration;
      const newStyles = window.getComputedStyle(document.documentElement, '::view-transition-group(box)');
      const newMatrix = new DOMMatrix(newStyles.transform);

      rectAfter = {
        width: newStyles.width.split('px')[0],
        height: newStyles.height.split('px')[0],
        left: newMatrix.e,
        top: newMatrix.f,
      };
      boxGroupAnimation.currentTime = 0;
    } else {
      const newMatrix = new DOMMatrix(boxGroupKeyframes[0].transform);
      rectAfter = {
        width: boxGroupKeyframes[1].width.split('px')[0],
        height: boxGroupKeyframes[1].height.split('px')[0],
        left: newMatrix.e,
        top: newMatrix.f,
      };
    }
    
    // debugBox(document.getElementById('before'), rectBefore);
    // debugBox(document.getElementById('after'), rectAfter);
    
    const flip = [
      `translate(${rectBefore.left}px,${rectBefore.top}px) scaleX(${rectBefore.width / rectAfter.width}) scaleY(${rectBefore.height / rectAfter.height})`,
      `translate(${rectAfter.left}px,${rectAfter.top}px) scaleX(1) scaleY(1)`,
    ];
    
    const flipKeyframes = {
      transform: flip,
      transformOrigin: ['0% 0%', '0% 0%'],
      easing: "ease",
    };
    
    
    boxGroupAnimation.effect.setKeyframes(flipKeyframes);
    
    document.getElementById('debug').innerText = JSON.stringify({ flipKeyframes, rectBefore, rectAfter }, null, 4);
  }
});

const debugBox = ($elem, domRect) => {
  $elem.style.left = `${domRect.left}px`;
  $elem.style.top = `${domRect.top}px`;
  $elem.style.width = `${domRect.width}px`;
  $elem.style.height = `${domRect.height}px`;
}