import './App.css';
import { io } from "socket.io-client";
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import { useState, useEffect } from 'react';

const socket = io.connect(process.env.REACT_APP_SERVER_URL || 'http://localhost:5000');


socket.on("connect", () => {
  console.log(socket.id); 
});

socket.on('connected', (data) => {
  console.log(data);
  }).on('error', (e) => {
  console.log('On connected', e)
}); 


const LoginForm = ({}) => {

    const [userData, setUserdata] = useState({userName:'', password: ''});
    const [token, setToken] = useState(localStorage.getItem('token'))
    const POST_URL =  process.env.REACT_APP_POST_URL || 'http://localhost:5000/login'


    const sendForm = async (POST_URL, userData) => {
      try {
          const response = await fetch(POST_URL, {
              method: 'POST',
              body: JSON.stringify(userData),
              headers: {
                  'Content-Type': 'application/json'
              }
          });
          const json = await response.json();
          return json;
  
      } catch (e) {
          console.log('Error:', e)
      }
  }

    const handleSubmit = async (e) => {
      e.preventDefault();
      const data = await sendForm(POST_URL, userData);
      const token = data.token;
      console.log(token)
      setUserdata({userName:'', password: ''});   
  }



    useEffect(()=>{
        return () => {
            setUserdata({userName:'', password: ''})
        }
    }, [])


    return (
        <Container maxWidth="xs">
            <Box
                component="form" 
                onSubmit={(e) => handleSubmit(e)}
                sx={{
                    marginTop: 40,
                    display: 'flex',
                    flexDirection: 'column',
                }}
                >
                <TextField
                        margin="normal"
                        required
                        fullWidth
                        id="userName"
                        label="user name"
                        name="userName"
                        autoComplete="email"
                        autoFocus
                        value={userData.userName}
                        onChange={e => {
                            setUserdata({...userData, userName: e.target.value})
                        }}
                />
                <TextField
                        margin="normal"
                        required
                        fullWidth
                        name="password"
                        label="Password"
                        type="password"
                        id="password"
                        autoComplete="current-password"
                        value={userData.password}
                        onChange={e => setUserdata({...userData, password: e.target.value})}
                />
                <Button 
                    type="submit"
                    variant="contained"
                    fullWidth>Login
                </Button>
            </Box>
        </Container>
    )
}


function App() {
  return (
    <LoginForm/>
  );
}

export default App
