import { Button, Grid, TextField } from "@mui/material";
import { useState } from "react";
import "./App.css";

function App() {
  const [message, setMessage] = useState("");
  const [wordOne, setWordOne] = useState("");

  const onChangeWordOne = (event) => {
    const newWord = event.target.value;
    console.log("Word One: ", newWord);
    setWordOne(newWord);
  };

  const onPressButton = () => {
    setMessage('Pau chupapijas');
    // console.log("Word One: ", wordOne);
    // const url = "http://127.0.0.1:8000/test";
    // // const url = "https://abadesalex-emb-rep.hf.space/test";
    // const dataToSend = JSON.stringify({ message: wordOne });
    // fetch(url, {
    //   method: "POST", // Specifying the method
    //   headers: {
    //     "Content-Type": "application/json",
    //   },
    //   body: dataToSend, // Data must be a stringified JSON
    // })
    //   .then((response) => response.json())
    //   .then((data) => setMessage(data.Hello))
    //   .catch((error) => console.error("Error:", error));
  };

  return (
    <>
      <Grid container mt={2} mr={2} ml={2} textAlign={"center"} spacing={2}>
        <Grid item xs={3}>
          <TextField
            id="word-one"
            label="Word 1"
            variant="outlined"
            onChange={onChangeWordOne}
            fullWidth
          />
        </Grid>

        <Grid item xs={3}>
          <TextField
            id="word-two"
            label="Word 2"
            variant="outlined"
            fullWidth
          />
        </Grid>

        <Grid item xs={3}>
          <Button
            variant="contained"
            color="primary"
            fullWidth
            sx={{ height: "100%" }}
            onClick={onPressButton}
          >
            Compare Embedding
          </Button>
        </Grid>
      </Grid>
      <Grid item textAlign={"center"}>
        <h1>{message}</h1>
      </Grid>
    </>
  );
}

export default App;