import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Content from '../components/content'
import Navbar from '../components/navbar'
import TrianglesBG from '../components/trianglesbg'
import Alert from '../components/alert'
import Sticker from '../components/sticker'
import Textbox from '../components/textbox'
import Popsicle from '../components/popsicle'
import { useState } from 'react'

export default function Home() {
  let [message, setMessage] = useState('')
  let [alert, setAlert] = useState(false)
  return (
    <>
      <Head>
        <title>TheRed.SH / Home</title>
      </Head>
      <Navbar />
      <div className={styles.Home}>
        <Content />
      </div>
      {/* <TrianglesBG /> */}
      <Alert />
      {/* <Sticker style={{ top: '80px', right: '20px' }}>Hello there! I'm a sticker!<br />This is just a simple demo.<br />A much more finished website will be coming soon!</Sticker> */}
      <Textbox placeholder="Send anything to me here!" style={{ margin: 'auto', marginTop: '30px', display: 'block', marginBottom: '60px' }} submitOnEnter={true} submit={async (TEXT) => {
        setAlert(false)
        let REQUEST = await fetch("/api/submit", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            text: TEXT
          })
        });
        let RESPONSE = await REQUEST.text();
        setMessage(RESPONSE);
        setAlert(true);
        // fetch('/api/logger', {
        //   method: 'POST',
        //   headers: {
        //     'Content-Type': 'application/json'
        //   },
        //   body: JSON.stringify({
        //     msg: '[Sent message] Query: '+TEXT+'; Response: '+RESPONSE+'; Request Code: '+REQUEST.status+'; Request Method: POST'
        //   })
        // });
      }} />
      {
        alert && <Popsicle className={styles.Popsicality}>
          {message}
        </Popsicle>
      }
    </>
  )
}
