const ResponsiveCardImg = styled(Card.Img)`
    // For screens wider than 768px
    @media(min-width: 768px) {
        // Your responsive styles here.
    }

    // For screens smaller than 768px
    @media(max-width: 768px) {
        // Your responsive styles here.
    }
`

export default function App() {
    return (
        <MainContainer>
            <Container>
                <Card text='white' bg='dark' style={styles.mainCard}>
                <ResponsiveCardImg
                    style={styles.cardImage}
                    onClick={handleClick}
                    src={apeImage}
                    alt='Degenerate Ape Academy'
                />
                <Card.Body>
                    <Card.Title className='text-center' as='h2'>
                    {apeId}
                    </Card.Title>
                </Card.Body>
                </Card>
            </Container>
        </MainContainer>
    );
}

const euclideanDistance = (a, b) =>
  Math.hypot(...Object.keys(a).map(k => b[k] - a[k]));
  
euclideanDistance([1, 1], [2, 3]); // ~2.2361
euclideanDistance([1, 1, 1], [2, 3, 2]); // ~2.4495

//use this with canvas file finder
function NewTab(testing) {
  window.open(testing, "_blank");
}

for(test in results) {
  var testing = 'https://unt.instructure.com/files/' + test + '/download';
  NewTab(testing);
}

const permutations = arr => {
  if (arr.length <= 2) return arr.length === 2 ? [arr, [arr[1], arr[0]]] : arr;
  return arr.reduce(
    (acc, item, i) =>
      acc.concat(
        permutations([...arr.slice(0, i), ...arr.slice(i + 1)]).map(val => [
          item,
          ...val,
        ])
      ),
    []
  );
};
permutations([1, 33, 5]);
// [ [1, 33, 5], [1, 5, 33], [33, 1, 5], [33, 5, 1], [5, 1, 33], [5, 33, 1] ]

const geometricProgression = (end, start = 1, step = 2) =>
  Array.from({
    length: Math.floor(Math.log(end / start) / Math.log(step)) + 1,
  }).map((_, i) => start * step ** i);
  
geometricProgression(256); // [1, 2, 4, 8, 16, 32, 64, 128, 256]
geometricProgression(256, 3); // [3, 6, 12, 24, 48, 96, 192]
geometricProgression(256, 1, 4); // [1, 4, 16, 64, 256]

class Timer{
	start(){
		this.startTime = Date.now();
	}
	stop(){
		const dt = Date.now() - this.startTime;
		console.log(dt);
		return dt;
	}
	getExecTime(fun, asynchronous){
		return asynchronous ? this.getAsyncExecTime(fun) : this.getSyncExecTime(fun);
	}
	getSyncExecTime(fun){
		this.start();
		fun();
		return this.stop();
	}
	async getAsyncExecTime(fun){
		this.start();
		await fun();
		return this.stop();
	}
	static average(fun, numTimes, asynchronous = false){
		const times = [];
		const promises = [];
		let timer = new Timer();
		if(asynchronous){
			for(let i = 0; i < numTimes; i++){
				timer.getAsyncExecTime(fun);
			}
		}else{
			for(let i = 0; i < numTimes; i++){
				timer.getSyncExecTime(fun);
			}
		}
		return (times => times.reduce(((sum, acc) => sume + acc), 0) / times.length);
	}
	static async timeAsync(fun, numTimes){
		if(numTimes <= 1) return new Timer().getAsyncExecTime(fun);
		const promises = [];
		let timer = new Timer(true);
		for(let i = 0; i < numTimes; i++){
			promises.push(fun().catch((e)=>{}));
		}
		try{
			await Promise.all(promises).catch((e)=>{});
		}catch(e){
			//do absolutely nothing
		}
		return timer.stop();
	}
	constructor(start = false){
		if(start) this.start();
	}
}