import { Grid, Button, TextField } from '@mui/material';
import { useState } from 'react';
import axios from 'axios';

const TestMailPage = () => {
  const [host, setHost] = useState(apiPath+'/test');
  const [mail, setMail] = useState('');

  const hostChange = (event) => {
    setHost(event.target.value);
  };

  const mailChange = (event) => {
    setMail(event.target.value);
  };

  const doMailTest = () => {
    axios.post(host, {
      email: mail
    })
    .then((response) => {
    console.log(response.data);
        // Handle data
    })
    .catch((error) => {
    console.log(error);
    })
  };
    
  return (
    <Grid 
        container  
        alignItems='center'
        sx={{
          maxWidth: { xs: 1, lg: 1000 },
          margin: { xs: 2.5, md: 3 },
          '& > *': {
            flexGrow: 1,
            flexBasis: '100%'
          }
        }}
        spacing={3}>
            <Grid item xs={12}><TextField id='hostField' label='Outlined' variant='filled' onChange={hostChange} value={host} fullWidth /></Grid>
            <Grid item xs={12}><TextField id='mailField' label='Outlined' variant='filled' onChange={mailChange} value={mail} fullWidth /></Grid>
            <Grid item xs={12}><Button variant='contained' onClick={doMailTest}>Test</Button></Grid>
        </Grid>
    );
};

export default TestMailPage;