text: import React, { Fragment, useState, useRef, useEffect} from "react";
  import {
    TextField,
    AppBar,
    Typography,
    Button,
    Grid,
    Toolbar,
    Collapse
  } from "@material-ui/core";
  import axios from 'axios';
  import { Close,Save } from "@material-ui/icons";
  import { makeStyles } from "@material-ui/core/styles";
  import { Alert} from '@material-ui/lab';
  import NestedTable from "./NestedTable.js";
  import { getCookie } from 'components/auth/Helpers';
  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  
  
    const useStyles = makeStyles((theme) => ({
      appBar: {
        position: "relative",
      },
      title: {
        marginLeft: theme.spacing(2),
        flex: 1,
      },
      formControl: {
        minWidth: "100%",
      },
    }));
  const SubTables = (props) => {
    const token = getCookie('token');
      const [openAlertSuccess, setOpenAlertSuccess] = useState(false);
      const [openAlertError, setOpenAlertError] = useState(false);
      const [fridgesTypes, setFridgesTypes] = useState([]);
      const classes = useStyles(); //custom css
      const nameRef = useRef()
      const nameArRef = useRef()
      const categoryRef = useRef()
      const categoryArRef = useRef()
      const priceRef = useRef()
      const submitRef = useRef()
  
      const [formValues, setFormValues] = useState({
        name: "",
        nameAr: "",
        category: "",
        categoryAr: "",
        price: "",
      });
      const [formErrors, setFormErrors] = useState({
        name: {error:false,msg:""},
        nameAr: {error:false,msg:""},
        category: {error:false,msg:""},
        categoryAr: {error:false,msg:""},
        price: {error:false,msg:""},
      });
      
    useEffect(()=>{
      nameRef.current.focus()
        const fetchData = async () => {
  
          if (props.sparePartsId) {
            const sparePart = await axios(
              `${process.env.REACT_APP_BASE_URL}/spareParts/${props.sparePartsId}`,
              {
                responseType: "json", headers: {Authorization: `Bearer ${token}`},
              }
            ).then((response) => {
              setFridgesTypes(response.data[0].fridgesTypes);
              setFormValues(response.data[0]);
              return response.data[0]
            })
          }
        };
        fetchData();
    },[])
    
    useEffect(()=>{
      setFormValues({ ...formValues,fridgesTypes })
    },[fridgesTypes])
    
    const keyPressHandler = (e) => {
      const { keyCode, target } = e
      if(keyCode===13){
        switch (target.nameRef){
          case "name": nameArRef.current.focus();break;
          case "nameAr": categoryRef.current.focus();break;
          case "category": categoryArRef.current.focus();break;
          case "categoryAr": priceRef.current.focus();break;
          case "price": submitRef.current.focus();break;
          default: nameRef.current.focus();
        }
      }
  }
  const handleChangeForm = (e) => {
    const { name, value } = e.target;
    setFormValues({ ...formValues, [name]: value });
  };
  
  const handleOnSubmit = async () => {
    for (const [key, value] of Object.entries(formErrors)) {
        if(value.error===true) return toast.error("Please validate the Form and submit it again");
    }
    
    if (props.sparePartsId) {
      console.log("formValues",formValues)
      await axios({
        method: "PUT",
        url: `${process.env.REACT_APP_BASE_URL}/spareParts/${props.sparePartsId}`,
        headers: {Authorization: `Bearer ${token}`},
        data: [formValues],
      })
      .then(function (response) {
        toast.success("Successfully Updated", {onClose: () => props.handleClose()});
      })
      .catch((error) => {
        console.log(error);
      });
    } else {
      await axios({
        method: "POST",
        url: `${process.env.REACT_APP_BASE_URL}/spareParts/`,
        headers: {Authorization: `Bearer ${token}`},
        data: [formValues],
      })
      .then(function (response) {
        setOpenAlertSuccess(true);
        setFormValues({
          name: "",
          nameAr: "",
          category: "",
          categoryAr: "",
          price: ""
        });
        toast.success("Successfully Added", {onClose: () => props.handleClose()});
      })
      .catch((error) => {
        console.log(error);
      });
    }
  
  }
  const validateInputHandler = (e) => {
    const { name, value } = e.target;
    const requiredInput = value.toString().trim().length ? false : true;
    setFormErrors({ ...formErrors, [name]: {error: requiredInput, msg: "This field is required"} });
    if(name==="email"){
        const invalidEmail = !/\S+@\S+\.\S+/.test(value);
        setFormErrors({ ...formErrors, [name]: {error: invalidEmail, msg: "Enter a valid email address"} });
    }
  }
    return (
      <Fragment>
      <ToastContainer />
        <AppBar className={classes.appBar}>
          <Toolbar>
            <Close onClick={props.handleClose} className="btnIcon" />
            <Typography variant="h6" className={classes.title}>
              {props.title}
            </Typography>
          </Toolbar>
        </AppBar>
        <Collapse in={openAlertSuccess}>
          <Alert severity="success" onClick={() => setOpenAlertSuccess(false)}>
            The sparePart is successfully created
          </Alert>
        </Collapse>
        <Collapse in={openAlertError}>
          <Alert severity="error" onClick={() => setOpenAlertError(false)}>
            Please validate the Form and submit it again
          </Alert>
        </Collapse>
  
        <div style={{ padding: "10px 30px" }}>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <TextField
                id="nameInput"
                label="Name"
                name="name"
                onChange={handleChangeForm}
                fullWidth
                value={formValues.name || ""}
                inputRef={nameRef}
                onKeyDown={keyPressHandler}
                onBlur={validateInputHandler}
                helperText={formErrors.name.error ? formErrors.name.msg : null}
                error={formErrors.name.error}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                id="nameArInput"
                label="NameAr"
                name="nameAr"
                onChange={handleChangeForm}
                fullWidth
                value={formValues.nameAr || ""}
                inputRef={nameArRef}
                onKeyDown={keyPressHandler}
                onBlur={validateInputHandler}
                helperText={formErrors.nameAr.error ? formErrors.nameAr.msg : null}
                error={formErrors.nameAr.error}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                id="categoryInput"
                label="Category"
                name="category"
                onChange={handleChangeForm}
                fullWidth
                value={formValues.category || ""}
                inputRef={categoryRef}
                onKeyDown={keyPressHandler}
                onBlur={validateInputHandler}
                helperText={formErrors.category.error ? formErrors.category.msg : null}
                error={formErrors.category.error}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                id="categoryArInput"
                label="CategoryAr"
                name="categoryAr"
                onChange={handleChangeForm}
                fullWidth
                value={formValues.categoryAr || ""}
                inputRef={categoryArRef}
                onKeyDown={keyPressHandler}
                onBlur={validateInputHandler}
                helperText={formErrors.categoryAr.error ? formErrors.categoryAr.msg : null}
                error={formErrors.categoryAr.error}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                id="priceInput"
                label="Price"
                name="price"
                onChange={handleChangeForm}
                fullWidth
                value={formValues.price || ""}
                inputRef={priceRef}
                onKeyDown={keyPressHandler}
                onBlur={validateInputHandler}
                helperText={formErrors.price.error ? formErrors.price.msg : null}
                error={formErrors.price.error}
              />
            </Grid>
            <Grid item xs={12}>
              <NestedTable arrayName={fridgesTypes} setArrayName={setFridgesTypes} title="Fridges Types" dbTable="fridgesTypes" />
            </Grid>
            
            <Grid item xs={12} className="clientTables">
              <Button
                variant="contained"
                color="primary"
                size="large"
                className="btn btn--save"
                type="submit"
                startIcon={<Save />}
                ref={submitRef}
                onClick={handleOnSubmit}
              >
                Save
              </Button>
              <Button
                variant="outlined"
                color="primary"
                size="large"
                className="btn btn--save"
                onClick={props.handleClose}
                startIcon={<Close />}
              >
                Close
              </Button>
            </Grid>
          </Grid>
        </div>
      </Fragment>
    );
  };
  
  export default SubTables;
  