text: /* eslint-disable eqeqeq */
  // import * as React from "react";
  import Button from "@mui/material/Button";
  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";
  
  // icon
  import AddIcon from "@mui/icons-material/Add";
  import CancelIcon from "@mui/icons-material/Cancel";
  // import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
  // import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
  // import { grey } from "@mui/material/colors";
  
  import React from "react";
  
  import {
    IconButton,
    Stack,
    TextField,
    Typography,
    Autocomplete,
    Box,
    Skeleton,
    // Grid,
  } from "@mui/material";
  
  import axios from "axios";
  
  const type = [
    { label: "URL", id: 1 },
    { label: "Plugin", id: 2 },
    { label: "Rules", id: 3 },
  ];
  
  class AddWorkflow extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: [type[1]],
        setOpen: false,
        setScroll: false,
        scroll: "paper",
        idUser: "",
        username: "",
        email: "",
        phone: "",
        firstname: "",
        lastname: "",
        city: "",
  
        versionId: "",
      };
    }
  
    handleChange = (event) => {
      this.setState({ age: event.target.value });
      // setAge(event.target.value);
    };
  
    handleClickOpen = () => () => {
      this.setState({ setOpen: true });
    };
  
    handleClose = () => {
      this.setState({
        setOpen: false,
      });
    };
  
    addDataUser = () => () => {
      const firstname = this.state.firstname;
      const lastname = this.state.lastname;
      const username = this.state.username;
      const email = this.state.email;
      const phone = this.state.phone;
      const city = this.state.city;
  
      // axios({
      //   url: "https://fakestoreapi.com/users",
      //   method: "POST",
      //   headers: {
      //     "Content-Type": "application/json",
      //     "Access-Control-Allow-Origin": "*",
      //   },
      //   body: JSON.stringify({
      //     email: `"+${email}+"`,
      //     username: `"+${username}+"`,
      //     password: "m38rmF$",
      //     name: {
      //       firstname: `"+${firstname}+"`,
      //       lastname: `"+${lastname}+"`,
      //     },
      //     address: {
      //       city: `"+${city}+"`,
      //       street: "7835 new road",
      //       number: 3,
      //       zipcode: "12926-3874",
      //       geolocation: {
      //         lat: "-37.3159",
      //         long: "81.1496",
      //       },
      //     },
      //     phone: `"+${phone}+"`,
      //   }),
      // }).then((res) => {
      //   res.json();
      //   // const datax = res.data;
      //   console.log("COMPONENT TYPE " + res);
      //   // this.setState({
      //   //   getData: datax,
      //   // });
      //   // datax.map((data) => {
      //   //   return data.email;
      //   // });
      //   // console.log("DATA PLUGINS " + datax);
      // });
  
      fetch("https://fakestoreapi.com/users", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
        body: JSON.stringify({
          email: `"${email}"`,
          username: `"${username}"`,
          password: "m38rmF$",
          name: {
            firstname: `"${firstname}"`,
            lastname: `"${lastname}"`,
          },
          address: {
            city: `"${city}"`,
            street: "7835 new road",
            number: 3,
            zipcode: "12926-3874",
            geolocation: {
              lat: "-37.3159",
              long: "81.1496",
            },
          },
          phone: `"${phone}"`,
        }),
      })
        .then((res) => {
          res.json();
          // if(res !==null ){
  
          // }
          console.log("DATA POST " + res.json());
        })
        .then((json) => console.log(json));
      // alert(id);
    };
  
    render() {
      const roleId = localStorage.getItem("roleId");
  
      return (
        <>
          <Button
            disabled={roleId == 4 ? true : false}
            underline="none"
            onClick={this.handleClickOpen()}
            size="small"
            variant="contained"
            endIcon={<AddIcon />}
          >
            Add User
          </Button>
          <Dialog
            fullWidth={true}
            open={this.state.setOpen}
            // onClose={this.handleClosedEdit}
            scroll={this.state.scroll}
            aria-labelledby="scroll-dialog-title"
            aria-describedby="scroll-dialog-description"
            sx={{ borderRadius: "20px !important" }}
          >
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
            >
              <DialogTitle id="scroll-dialog-title" alignItems="center">
                Add User
              </DialogTitle>
              <DialogTitle id="scroll-dialog-title" alignItems="center">
                <IconButton aria-label="expand row" size="small">
                  <CancelIcon onClick={this.handleClose} sx={{ color: "red" }} />
                </IconButton>
              </DialogTitle>
            </Stack>
  
            <DialogContent dividers={this.state.scroll === "paper"}>
              <DialogContentText id="scroll-dialog-description" tabIndex={-1}>
                {this.state.loadingEdit ? (
                  <Box
                    sx={{ width: "100%", justifyContent: "center" }}
                    justifyItems="center"
                  >
                    <Skeleton width={500} height={40} />
                    <Skeleton animatio="wave" width={500} height={40} />
                    <Skeleton animation={false} width={500} height={40} />
                  </Box>
                ) : (
                  <Box>
                    <TextField
                      sx={{ mb: 4 }}
                      required
                      id="outlined-required"
                      label="Name"
                      size="small"
                      fullWidth={true}
                      defaultValue={this.state.firstname}
                      onChange={(event) => {
                        this.setState({
                          firstname: event.target.value,
                        });
                      }}
                    />
                    <TextField
                      sx={{ mb: 4 }}
                      required
                      id="outlined-required"
                      label="Email"
                      size="small"
                      fullWidth={true}
                      defaultValue={this.state.email}
                      onChange={(event) => {
                        this.setState({
                          email: event.target.value,
                        });
                      }}
                    />
                    <TextField
                      sx={{ mb: 4 }}
                      required
                      id="outlined-required"
                      label="Username"
                      size="small"
                      fullWidth={true}
                      defaultValue={this.state.username}
                      onChange={(event) => {
                        this.setState({
                          username: event.target.value,
                        });
                      }}
                    />
                    <TextField
                      sx={{ mb: 4 }}
                      required
                      id="outlined-required"
                      label="Phone"
                      size="small"
                      fullWidth={true}
                      defaultValue={this.state.phone}
                      onChange={(event) => {
                        this.setState({
                          phone: event.target.value,
                        });
                      }}
                    />
                    <TextField
                      sx={{ mb: 4 }}
                      required
                      id="outlined-required"
                      label="City"
                      size="small"
                      fullWidth={true}
                      defaultValue={this.state.city}
                      onChange={(event) => {
                        this.setState({
                          city: event.target.value,
                        });
                      }}
                    />
                    {/* <TextField
                      sx={{ mb: 4 }}
                      required
                      id="outlined-required"
                      label="Input"
                      size="small"
                      fullWidth={true}
                      defaultValue={this.state.username}
                      onChange={(event) => {
                        this.setState({
                          username: event.target.value,
                        });
                      }}
                    /> */}
                  </Box>
                )}
              </DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button
                variant="contained"
                // color="myBlue"
                size="small"
                onClick={this.addDataUser()}
              >
                Save
              </Button>
            </DialogActions>
          </Dialog>
        </>
      );
    }
  }
  
  export default AddWorkflow;
  