import { useState } from 'react';
import { globalStyles } from './stitches.config';
import {
  Avatar,
  Footer,
  Link,
  Section,
  SectionHeader,
  Subheading,
} from './components';
import Chat from './chat';
import { Box, Stack } from './common';
import { easterEgg } from './utils';

const titles = [
  'Software Engineer',
  'Engineering Manager',
  'Designer',
  'Builder',
];

export default function App() {
  globalStyles();

  const [count, setCount] = useState(0);
  const [titleIdx, setTitleIdx] = useState(0);
  const [title, setTitle] = useState(titles[titleIdx]);

  const handleClick = () => {
    const len = title.length - 1;
    setCount(count + 1);

    if (len === 0) {
      const isLastTitle = titleIdx === titles.length - 1;
      const newTitleIdx = isLastTitle ? 0 : titleIdx + 1;
      setTitleIdx(newTitleIdx);
      setTitle(titles[newTitleIdx]);
    }
    else {
      const randomIdx = Math.floor(Math.random() * len);
      const newTitle = title.slice(0, randomIdx) + title.slice(randomIdx + 1);
      setTitle(newTitle);
    }

    if (count === 40) {
      easterEgg();
    }
  };

  return (
    <Stack className="main" vertical>
      <SectionHeader>DARA BUN</SectionHeader>
      <Stack horizontal>
        <Subheading text={title} onClick={handleClick} />
        <div id="cursor" />
      </Stack>
      <Footer />
      <Avatar onClick={handleClick} />
      <Chat />
    </Stack>
  );
}