import * as React from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { openModal, closeModal, setName } from './modalSlice';
import $ from 'jquery';
import axios from '~t/Base/axios';
import { Trans } from '@lingui/macro'; 


export default function FormDialog() {
  const open = useSelector((state: any) => state.modal.open);

  const name = useSelector((state: any) => state.modal.name);
  const id = useSelector((state: any) => state.modal.id);

  const dispatch = useDispatch();

  const handleClickOpen = () => {
    dispatch(openModal());
  };

  const handleClose = () => {
    dispatch(closeModal());
  };

  const handleSubmit = () => {
    // access the data from the form
    var newName = name;

    console.log('submit');
          
    console.log(newName);
    // add the funciton to update the name
    console.log('New name: ' + newName);

    axios.post('/lorawanNameById', {id: id, name: newName})
    // close the modal
    dispatch(closeModal());
  };

  return (
    <React.Fragment>
      <Dialog
        open={open}
        onClose={handleClose}
        onSubmit = {(event: React.FormEvent<HTMLDivElement>) => {
          console.log('submit');
          event.preventDefault();
          const formData = new FormData(event.currentTarget as unknown as HTMLFormElement);
          const formJson = Object.fromEntries((formData as any).entries());
          const email = formJson.email;
          console.log(email);
          // add the funciton to update the name
          console.log('New name: ' + email);
          $.ajax({
            url: '/lorawanNameById',
            type: 'POST',
            data: {id: id, name: email},
            success: function(data) {
              console.log('Name updated');
            }
          });
          handleClose();
        }}
      >
        <DialogTitle><Trans>Name bearbeiten:</Trans></DialogTitle>
        <DialogContent>
          <DialogContentText>
          <Trans>Enter the new name for the device:</Trans>
          </DialogContentText>
          <TextField
            autoFocus
            required
            margin="dense"
            id="name"
            name="email"
            label={name}
            type="text"
            fullWidth
            variant="outlined"
            onChange={e => dispatch(setName(e.target.value))}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}><Trans>Abbrechen</Trans></Button>
          <Button onClick={() => handleSubmit()}><Trans>Speichern</Trans></Button>
        </DialogActions>
      </Dialog>
    </React.Fragment>
  );
}