text: import React, {useState} from 'react';
  import { useHistory, useParams } from 'react-router-dom';
  import { makeStyles } from '@material-ui/core/styles';
  import Container from '@material-ui/core/Container';
  import Button from '@material-ui/core/Button';
  import FormControl from '@material-ui/core/FormControl';
  
  import t from './common/localization';
  import { useEffectAsync } from './reactHelper';
  import OptionsLayout from './settings/OptionsLayout';
  import {Snackbar} from "@material-ui/core";
  import {Alert} from "@material-ui/lab";
  
  const useStyles = makeStyles(theme => ({
    container: {
      marginTop: theme.spacing(2)
    },
    buttons: {
      display: 'flex',
      justifyContent: 'space-evenly',
      '& > *': {
        flexBasis: '33%'
      }
    }
  }));
  
  const EditItemViewDevices = ({ children, endpoint, item, setItem }) => {
    const history = useHistory();
    const classes = useStyles();
    const { id } = useParams();
    const [snackbarOpenDone, setSnackbarOpenDone] = useState(false);
    const [snackbarOpen, setSnackbarOpen] = useState(false);
  
    useEffectAsync(async () => {
      if (id) {
        const response = await fetch(`/api/${endpoint}/${id}`);
        if (response.ok) {
          setItem(await response.json());
        }
      } else {
        setItem({});
      }
    }, [id]);
  
    const handleSave = async () => {
      let url = `/api/${endpoint}`;
      if (id) {
        url += `/${id}`;
      }
  
      const response = await fetch(url, {
        method: !id ? 'POST' : 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(item)
      });
  
      if (response.ok) {
        // history.goBack();
        setSnackbarOpenDone(true);
      } else {
        setSnackbarOpen(true);
      }
    };
  
    return (
      <OptionsLayout>
        <Snackbar
            anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
            open={snackbarOpenDone}
            onClose={() => history.goBack()}
            autoHideDuration={6000}>
          <Alert severity="success">
            Lưu thành công!
          </Alert>
        </Snackbar>
        <Snackbar
            anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
            open={snackbarOpen}
            onClose={() => history.goBack()}
            autoHideDuration={6000}>
        <Alert severity="error">
            Lưu không thành công! Tên hoặc định danh thiết bị không hợp lệ!
        </Alert>
        </Snackbar>
        <Container maxWidth="xs" className={classes.container}>
          {children}
          <FormControl fullWidth margin="normal">
            <div className={classes.buttons}>
              <Button
                type="button"
                color="primary"
                variant="outlined"
                onClick={() => history.goBack()}
              >
                Hủy
              </Button>
              <Button
                type="button"
                color="primary"
                variant="contained"
                onClick={handleSave}
              >
                Lưu
              </Button>
            </div>
          </FormControl>
        </Container>
      </OptionsLayout>
    );
  };
  
  export default EditItemViewDevices;
  