text: import React, { useState, useCallback, useRef, Fragment ,useEffect} from "react";
  import PropTypes from "prop-types";
  import {
    FormHelperText,
    TextField,
    Button,
    Checkbox,
    Typography,
    FormControlLabel,
    withStyles,
  } from "@material-ui/core";
  import {makeStyles}  from "@material-ui/core/styles";
  import FormDialog from "../../../shared/components/FormDialog";
  import HighlightedInformation from "../../../shared/components/HighlightedInformation";
  import ButtonCircularProgress from "../../../shared/components/ButtonCircularProgress";
  import VisibilityPasswordTextField from "../../../shared/components/VisibilityPasswordTextField";
  import {connect} from 'react-redux'
  import {state_to_props,getCookie} from '../../../util/common_utils'
  import {setUserDetailsToStore,emtStores,userFetchType} from '../../../store/action'
  import {withRouter} from 'react-router-dom'
  
  const useStyles = makeStyles((theme) => ({
    link: {
      transition: theme.transitions.create(["background-color"], {
        duration: theme.transitions.duration.complex,
        easing: theme.transitions.easing.easeInOut,
      }),
      cursor: "pointer",
      color: theme.palette.primary.main,
      "&:enabled:hover": {
        color: theme.palette.primary.dark,
      },
      "&:enabled:focus": {
        color: theme.palette.primary.dark,
      },
    },
  }));
  
  function RegisterDialog(props) {
    console.log("props ==> ",props);
    const { setStatus, theme, onClose, openTermsDialog, status,openPrivacyPolicy } = props;
    const [isLoading, setIsLoading] = useState(false);
    const [hasTermsOfServiceError, setHasTermsOfServiceError] = useState(false);
    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
    const registerTermsCheckbox = useRef();
    const registerPassword = useRef();
    const registerEmail = useRef();
    const registerPasswordRepeat = useRef();
    const classes=useStyles();
  
  
    useEffect(()=>{
      console.log("props user==>",props.user)
      if(props.user && props.user.username && props.user.email && getCookie("token"))
      {
            setIsLoading(false);
            props.history.push("/home")
      }
      else if(props.user.error)
      { 
        if(props.user.error.detail.email){
          if(props.user.error.detail.email==="This field must be unique."){
              setStatus("error_Same email exists try loginin with it")
          }else{
            setStatus("error_ Email -"+props.user.error.detail.email);
          }
         
        }else if(props.user.error.detail.password){
            setStatus("error_ Password -"+props.user.error.detail.password);
        }else  if(props.user.error.detail){
          setStatus("error_"+props.user.error.detail);
        }else{
          setStatus("error_Exception in creating user, kindly retry, if issue persist kindly contact customer care");
        }
  
       
        setIsLoading(false);
        props.emtStores()
      }
      else
      {
      setIsLoading(false);
      }
    },[props.user])
  
    const register = useCallback(() => {
      if (!registerTermsCheckbox.current.checked) {
        setHasTermsOfServiceError(true);
        return;
      }
      if (
        registerPassword.current.value !== registerPasswordRepeat.current.value
      ) {
        setStatus("passwordsDontMatch");
        return;
      }
     
      setStatus(null);
      setIsLoading(true);
      const registerJO={username: registerEmail.current.value.split("@")[0],email:registerEmail.current.value,password:registerPassword.current.value};
      console.log("registerJO ",registerJO);
      props.setUserDetailsToStore(registerJO,userFetchType.SIGNUP);
      setIsLoading(false);
     
    }, [
      setIsLoading,
      setStatus,
      setHasTermsOfServiceError,
      registerPassword,
      registerPasswordRepeat,
      registerTermsCheckbox,
    ]);
  
    return (
      <FormDialog
        loading={isLoading}
        onClose={onClose}
        open
        headline="Register"
        onFormSubmit={(e) => {
          e.preventDefault();
          console.log("record submit events",e.target.email);
          register();
        }}
        hideBackdrop
        hasCloseIcon
        content={
          <Fragment>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              error={status === "invalidEmail"}
              label="Email Address"
              autoFocus
              autoComplete="off"
              type="email"
              name="email"
              inputRef={registerEmail}
              onChange={() => {
                if (status === "invalidEmail") {
                  setStatus(null);
                }
              }}
              FormHelperTextProps={{ error: true }}
            />
            <VisibilityPasswordTextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              error={
                status === "passwordTooShort" || status === "passwordsDontMatch"
              }
              label="Password"
              inputRef={registerPassword}
              autoComplete="off"
              onChange={() => {
                if (
                  status === "passwordTooShort" ||
                  status === "passwordsDontMatch"
                ) {
                  setStatus(null);
                }
              }}
              helperText={(() => {
                if (status === "passwordTooShort") {
                  return "Create a password at least 6 characters long.";
                }
                if (status === "passwordsDontMatch") {
                  return "Your passwords dont match.";
                }
                return null;
              })()}
              FormHelperTextProps={{ error: true }}
              isVisible={isPasswordVisible}
              onVisibilityChange={setIsPasswordVisible}
              name="password"
            />
            <VisibilityPasswordTextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              error={
                status === "passwordTooShort" || status === "passwordsDontMatch"
              }
              label="Repeat Password"
              inputRef={registerPasswordRepeat}
              autoComplete="off"
              onChange={() => {
                if (
                  status === "passwordTooShort" ||
                  status === "passwordsDontMatch"
                ) {
                  setStatus(null);
                }
              }}
              helperText={(() => {
                if (status === "passwordTooShort") {
                  return "Create a password at least 6 characters long.";
                }
                if (status === "passwordsDontMatch") {
                  return "Your passwords dont match.";
                }
              })()}
              FormHelperTextProps={{ error: true }}
              isVisible={isPasswordVisible}
              onVisibilityChange={setIsPasswordVisible}
            />
            <FormControlLabel
              style={{ marginRight: 0 }}
              control={
                <Checkbox
                  color="primary"
                  inputRef={registerTermsCheckbox}
                  onChange={() => {
                    setHasTermsOfServiceError(false);
                  }}
                />
              }
              label={
                <Typography variant="body1">
                  I agree to the
                  <span
                    className={classes.link}
                    onClick={isLoading ? null : openPrivacyPolicy}
                    tabIndex={0}
                    role="button"
                    onKeyDown={(event) => {
                      // For screenreaders listen to space and enter events
                      if (
                        (!isLoading && event.keyCode === 13) ||
                        event.keyCode === 32
                      ) {
                        openPrivacyPolicy();
                      }
                    }}
                  >
                    {" "}
                    privacy policy
                  </span> and 
                  <span
                    className={classes.link}
                    onClick={isLoading ? null : openTermsDialog}
                    tabIndex={0}
                    role="button"
                    onKeyDown={(event) => {
                      // For screenreaders listen to space and enter events
                      if (
                        (!isLoading && event.keyCode === 13) ||
                        event.keyCode === 32
                      ) {
                        openTermsDialog();
                      }
                    }}
                  >
                    {" "}
                    terms of service
                  </span>
                </Typography>
              }
            />
            {hasTermsOfServiceError && (
              <FormHelperText
                error
                style={{
                  display: "block",
                  marginTop: -1,
                }}
              >
                In order to create an account, you have to accept our terms of
                service.
              </FormHelperText>
            )}
            {status  &&  status.startsWith("error_") && (
              <HighlightedInformation >
                {status.replace("error_","")}
              </HighlightedInformation>
            ) }
          </Fragment>
        }
        actions={
          <Button
            type="submit"
            fullWidth
            variant="contained"
            size="large"
            color="secondary"
            disabled={isLoading}
          >
            Register
            {isLoading && <ButtonCircularProgress />}
          </Button>
        }
      />
    );
  }
  
  RegisterDialog.propTypes = {
   
    onClose: PropTypes.func.isRequired,
    openTermsDialog: PropTypes.func.isRequired,
    status: PropTypes.string,
    setStatus: PropTypes.func.isRequired,
  };
  
  export default connect(state_to_props,{setUserDetailsToStore,emtStores})(RegisterDialog);
  