text: import React, { useState, useCallback, useRef, Fragment,useEffect } from "react";
  import PropTypes from "prop-types";
  import classNames from "classnames";
  import { withRouter } from "react-router-dom";
  import {
    TextField,
    Button,
    Checkbox,
    Typography,
    FormControlLabel,
    withStyles,
  } from "@material-ui/core";
  
  
  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 {ACTIONS,setUserDetailsToStore,userFetchType} from '../../../store/action';
  import {connect} from 'react-redux'
  import {state_to_props,getCookie} from '../../../util/common_utils'
  
  const styles = (theme) => ({
    forgotPassword: {
      marginTop: theme.spacing(2),
      color: theme.palette.primary.main,
      cursor: "pointer",
      "&:enabled:hover": {
        color: theme.palette.primary.dark,
      },
      "&:enabled:focus": {
        color: theme.palette.primary.dark,
      },
    },
    disabledText: {
      cursor: "auto",
      color: theme.palette.text.disabled,
    },
    formControlLabel: {
      marginRight: 0,
    },
  });
  
  function LoginDialog(props) {
    const {
      setStatus,
      history,
      classes,
      onClose,
      openChangePasswordDialog,
      status,
    } = props;
    const [isLoading, setIsLoading] = useState(false);
    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
    const loginEmail = useRef();
    const loginPassword = useRef();
  
    useEffect(()=>{
      console.log(" props.user ",props.user)
      if(props.user.username && props.user.email &&getCookie("token"))
      {
        props.history.push('/c')
      }
      else if(props.user.error)
      {
        console.log("error 1 ==?",props.user.error)
        if(props.user.error.detail)
        {
          console.log("error  ==?",props.user.error.detail)
          setStatus("error_"+props.user.error.detail);
        }
        
      }
      setIsLoading(false);
      setIsLoading(false);
    },[props.user])
  
    const login = useCallback(() => {
      setIsLoading(true);
      setStatus(null);
      const value={email:loginEmail.current.value,password:loginPassword.current.value};
     props.setUserDetailsToStore(value,userFetchType.LOGIN)
    }, [setIsLoading, loginEmail, loginPassword, history, setStatus]);
  
    return (
      <Fragment>
        <FormDialog
          open
          onClose={onClose}
          loading={isLoading}
          onFormSubmit={(e) => {
            e.preventDefault();
            login();
          }}
          hideBackdrop
          headline="Login"
          content={
            <Fragment>
              <TextField
                variant="outlined"
                margin="normal"
                error={status === "invalidEmail"}
                required
                fullWidth
                label="Email Address"
                inputRef={loginEmail}
                autoFocus
                autoComplete="off"
                type="email"
                onChange={() => {
                  if (status === "invalidEmail") {
                    setStatus(null);
                  }
                }}
                helperText={
                  status === "invalidEmail" &&
                  "This email address isn't associated with an account."
                }
                FormHelperTextProps={{ error: true }}
              />
              <VisibilityPasswordTextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                error={status === "invalidPassword"}
                label="Password"
                inputRef={loginPassword}
                autoComplete="off"
                onChange={() => {
                  if (status === "invalidPassword") {
                    setStatus(null);
                  }
                }}
                helperText={
                  status === "invalidPassword" ? (
                    <span>
                      Incorrect password. Try again, or click on{" "}
                      <b>&quot;Forgot Password?&quot;</b> to reset it.
                    </span>
                  ) : (
                    ""
                  )
                }
                FormHelperTextProps={{ error: true }}
                onVisibilityChange={setIsPasswordVisible}
                isVisible={isPasswordVisible}
              />
              <FormControlLabel
                className={classes.formControlLabel}
                control={<Checkbox color="primary" />}
                label={<Typography variant="body1">Remember me</Typography>}
              />
              {status === "verificationEmailSend" ? (
                <HighlightedInformation>
                  We have send instructions on how to reset your password to your
                  email address
                </HighlightedInformation>
              ) : ""}
              {status && status.startsWith("error_") && (
                <HighlightedInformation>
                  {status.replace("error_","")}
                </HighlightedInformation>
              ) }
            </Fragment>
          }
          actions={
            <Fragment>
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="secondary"
                disabled={isLoading}
                size="large"
              >
                Login
                {isLoading && <ButtonCircularProgress />}
              </Button>
              <Typography
                align="center"
                className={classNames(
                  classes.forgotPassword,
                  isLoading ? classes.disabledText : null
                )}
                color="primary"
                onClick={isLoading ? null : openChangePasswordDialog}
                tabIndex={0}
                role="button"
                onKeyDown={(event) => {
                  // For screenreaders listen to space and enter events
                  if (
                    (!isLoading && event.keyCode === 13) ||
                    event.keyCode === 32
                  ) {
                    openChangePasswordDialog();
                  }
                }}
              >
                Forgot Password?
              </Typography>
            </Fragment>
          }
        />
      </Fragment>
    );
  }
  
  LoginDialog.propTypes = {
    classes: PropTypes.object.isRequired,
    onClose: PropTypes.func.isRequired,
    setStatus: PropTypes.func.isRequired,
    openChangePasswordDialog: PropTypes.func.isRequired,
    history: PropTypes.object.isRequired,
    status: PropTypes.string,
  };
  
  export default connect(state_to_props,{setUserDetailsToStore})(withRouter(withStyles(styles)(LoginDialog)));
  