export const Main = () => {
    const [title, setTitle] = useState('');
    
    return (
        <ChildComponent
            title={title}
            onChange={e => setTitle(e.target.value)}
        />
    );
};

export const ChildComponent = ({ title, onChange }) => {
    return (
        <Box component="form" onSubmit={() => {}} noValidate mt={5}>
            <TextField
                fullWidth
                id="title"
                label="Title"
                name="title"
                autoComplete="title"
                autoFocus
                color="primary"
                variant="filled"
                InputLabelProps={{ shrink: true }}
                value={title}
                onChange={onChange}
            />
        </Box>
    );
};

alert("bruh")

//Use at https://mee6.xyz/leaderboard/732262089447702588
//Higher the spammy stat, the more spammy that person is.
//This is because mee doesn't give experience to people who post more comments in a minute.
function statBlock(title, value){
	let elm = document.createElement("div");
	elm.className = "leaderboardPlayerStatBlock";
	let titleElm = document.createElement("div");
	titleElm.className = "leaderboardPlayerStatName";
	titleElm.textContent = title;
	let valueElm = document.createElement("div");
	valueElm.className = "leaderboardPlayerStatValue";
	valueElm.textContent = value;
	elm.appendChild(titleElm);
	elm.appendChild(valueElm);
	elm.remove = function(){
	this.parentElement.removeChild(this);
	}
	return elm;
}
for(let player of Array.from(document.getElementsByClassName("leaderboardPlayer"))){
	if(player.spamminess) player.spamminess.remove();
	let messages = null;
	let experience = null;
	const statBlockArray = Array.from(player.querySelectorAll(".leaderboardPlayerStatBlock"));
	for(let statBlock of statBlockArray){
	const statName = statBlock.querySelector(".leaderboardPlayerStatName").textContent;
	const text = statBlock.querySelector(".leaderboardPlayerStatValue").textContent;
	const number = ((text.includes("k"))? (text.replace("k","") * 1000.0) : +(text));
	if(statName.includes("MESSAGES")){
	messages = number;
	}else if(statName.includes("EXPERIENCE")){
	experience = number;
	}
	}
	const stats = player.querySelector(".leaderboardPlayerStats");
	const messagesElement = stats.firstChild;

	const spamminess = ((messages/experience)*2000.0).toFixed(2);
	
	player.spamminess = stats.insertBefore(statBlock("SPAMMINESS", spamminess), messagesElement);
}

const insertionSort = arr =>
  arr.reduce((acc, x) => {
    if (!acc.length) return [x];
    acc.some((y, j) => {
      if (x <= y) {
        acc.splice(j, 0, x);
        return true;
      }
      if (x > y && j === acc.length - 1) {
        acc.splice(j + 1, 0, x);
        return true;
      }
      return false;
    });
    return acc;
  }, []);
  
insertionSort([6, 3, 4, 1]); // [1, 3, 4, 6]

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 arithmeticProgression  = (n, lim) =>
  Array.from({ length: Math.ceil(lim / n) }, (_, i) => (i + 1) * n );
  
arithmeticProgression(5, 25); // [5, 10, 15, 20, 25]