text: import { useState, useEffect } from 'react';
  import { Link } from 'react-router-dom';
  
  // material-ui
  import { useTheme } from '@mui/material/styles';
  import {
      Box,
      Button,
      Checkbox,
      FormControl,
      FormControlLabel,
      FormHelperText,
      Grid,
      IconButton,
      InputAdornment,
      InputLabel,
      OutlinedInput,
      Typography
  } from '@mui/material';
  
  // third party
  import * as Yup from 'yup';
  import { Formik } from 'formik';
  
  // project imports
  import useScriptRef from 'hooks/useScriptRef';
  import AnimateButton from 'ui-component/extended/AnimateButton';
  import { strengthColor, strengthIndicator } from 'utils/password-strength';
  
  // assets
  import Visibility from '@mui/icons-material/Visibility';
  import VisibilityOff from '@mui/icons-material/VisibilityOff';
  
  // filePond
  import { FilePond, registerPlugin } from 'react-filepond';
  import 'filepond/dist/filepond.min.css';
  import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
  import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
  import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
  import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
  import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
  import FilePondPluginImageResize from 'filepond-plugin-image-resize';
  import FilePondPluginImageCrop from 'filepond-plugin-image-crop';
  import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
  import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
  import { AuthApi } from '../../../../api/restful';
  import sha1 from 'js-sha1';
  
  registerPlugin(
      FilePondPluginImageExifOrientation,
      FilePondPluginImagePreview,
      FilePondPluginFileValidateSize,
      FilePondPluginFileValidateType,
      FilePondPluginFileEncode,
      FilePondPluginImageResize,
      FilePondPluginImageCrop,
      FilePondPluginImageTransform
  );
  
  // ===========================|| FIREBASE - REGISTER ||=========================== //
  
  const FirebaseRegister = ({ ...others }) => {
      const theme = useTheme();
      const scriptedRef = useScriptRef();
      const [showPassword, setShowPassword] = useState(false);
      const [checked, setChecked] = useState(true);
  
      const [strength, setStrength] = useState(0);
      const [level, setLevel] = useState();
  
      const [files, setFiles] = useState([]);
      const [base64, setBase64] = useState('');
      const handleAddFile = (err, file) => {
          setBase64(file?.getFileEncodeDataURL());
          // console.log(base64);
      };
  
      const handleClickShowPassword = () => {
          setShowPassword(!showPassword);
      };
  
      const handleMouseDownPassword = (event) => {
          event.preventDefault();
      };
  
      const changePassword = (value) => {
          const temp = strengthIndicator(value);
          setStrength(temp);
          setLevel(strengthColor(temp));
      };
  
      useEffect(() => {
          changePassword('123456');
      }, []);
  
      return (
          <>
              <Grid container direction="column" justifyContent="center" spacing={2}>
                  <Grid item xs={12}>
                      <FilePond
                          files={files}
                          onaddfile={handleAddFile}
                          onupdatefiles={setFiles}
                          allowMultiple={false}
                          stylePanelLayout="compact circle"
                          imageResizeTargetWidth={100}
                          imageResizeTargetHeight={100}
                          imagePreviewHeight={70}
                          imageCropAspectRatio="1:1"
                          maxFileSize="5MB"
                          acceptedFileTypes={['image/png', 'image/jpeg']}
                          maxFiles={1}
                          name="avatar"
                          labelIdle='拖入图片 或 <span class="filepond--label-action">浏览</span>'
                      />
                  </Grid>
              </Grid>
  
              <Formik
                  initialValues={{
                      account: '',
                      nickName: '',
                      cname: '',
                      password: '',
                      submit: null
                  }}
                  validationSchema={Yup.object().shape({
                      account: Yup.string().max(255).required('账户不能为空'),
                      nickName: Yup.string().max(255).required('昵称不能为空'),
                      cname: Yup.string().max(255).required('真实姓名不能为空'),
                      password: Yup.string().max(255).required('密码不能为空')
                  })}
                  onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
                      try {
                          if (scriptedRef.current) {
                              const authapi = new AuthApi();
                              const customer = {
                                  account: values.account,
                                  nickName: values.nickName,
                                  cname: values.cname,
                                  password: sha1(values.password),
                                  avatar: base64
                              };
                              // console.log(customer);
                              authapi.customerRegister(customer).then((res) => {
                                  // console.log(res);
                                  if (res.status === 200) {
                                      window.location.href = '/login';
                                      setStatus({ success: true });
                                      setSubmitting(false);
                                  }
                              });
                          }
                      } catch (err) {
                          console.error(err);
                          if (scriptedRef.current) {
                              setStatus({ success: false });
                              setErrors({ submit: err.message });
                              setSubmitting(false);
                          }
                      }
                  }}
              >
                  {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
                      <form noValidate onSubmit={handleSubmit} {...others}>
                          <FormControl fullWidth error={Boolean(touched.account && errors.account)} sx={{ ...theme.typography.customInput }}>
                              <InputLabel htmlFor="outlined-adornment-email-register">账户</InputLabel>
                              <OutlinedInput
                                  id="outlined-adornment-email-register"
                                  type="account"
                                  value={values.account}
                                  name="account"
                                  onBlur={handleBlur}
                                  onChange={handleChange}
                                  inputProps={{}}
                              />
                              {touched.account && errors.account && (
                                  <FormHelperText error id="standard-weight-helper-text--register">
                                      {errors.account}
                                  </FormHelperText>
                              )}
                          </FormControl>
                          <FormControl
                              fullWidth
                              error={Boolean(touched.nickName && errors.nickName)}
                              sx={{ ...theme.typography.customInput }}
                          >
                              <InputLabel htmlFor="outlined-adornment-email-register">昵称</InputLabel>
                              <OutlinedInput
                                  id="outlined-adornment-email-register"
                                  type="nickName"
                                  value={values.nickName}
                                  name="nickName"
                                  onBlur={handleBlur}
                                  onChange={handleChange}
                                  inputProps={{}}
                              />
                              {touched.nickName && errors.nickName && (
                                  <FormHelperText error id="standard-weight-helper-text--register">
                                      {errors.nickName}
                                  </FormHelperText>
                              )}
                          </FormControl>
                          <FormControl fullWidth error={Boolean(touched.cname && errors.cname)} sx={{ ...theme.typography.customInput }}>
                              <InputLabel htmlFor="outlined-adornment-email-register">真实姓名</InputLabel>
                              <OutlinedInput
                                  id="outlined-adornment-email-register"
                                  type="cname"
                                  value={values.cname}
                                  name="cname"
                                  onBlur={handleBlur}
                                  onChange={handleChange}
                                  inputProps={{}}
                              />
                              {touched.cname && errors.cname && (
                                  <FormHelperText error id="standard-weight-helper-text--register">
                                      {errors.cname}
                                  </FormHelperText>
                              )}
                          </FormControl>
  
                          <FormControl
                              fullWidth
                              error={Boolean(touched.password && errors.password)}
                              sx={{ ...theme.typography.customInput }}
                          >
                              <InputLabel htmlFor="outlined-adornment-password-register">密码</InputLabel>
                              <OutlinedInput
                                  id="outlined-adornment-password-register"
                                  type={showPassword ? 'text' : 'password'}
                                  value={values.password}
                                  name="password"
                                  label="Password"
                                  onBlur={handleBlur}
                                  onChange={(e) => {
                                      handleChange(e);
                                      changePassword(e.target.value);
                                  }}
                                  endAdornment={
                                      <InputAdornment position="end">
                                          <IconButton
                                              aria-label="toggle password visibility"
                                              onClick={handleClickShowPassword}
                                              onMouseDown={handleMouseDownPassword}
                                              edge="end"
                                              size="large"
                                          >
                                              {showPassword ? <Visibility /> : <VisibilityOff />}
                                          </IconButton>
                                      </InputAdornment>
                                  }
                                  inputProps={{}}
                              />
                              {touched.password && errors.password && (
                                  <FormHelperText error id="standard-weight-helper-text-password-register">
                                      {errors.password}
                                  </FormHelperText>
                              )}
                          </FormControl>
  
                          {strength !== 0 && (
                              <FormControl fullWidth>
                                  <Box sx={{ mb: 2 }}>
                                      <Grid container spacing={2} alignItems="center">
                                          <Grid item>
                                              <Box
                                                  style={{ backgroundColor: level?.color }}
                                                  sx={{ width: 85, height: 8, borderRadius: '7px' }}
                                              />
                                          </Grid>
                                          <Grid item>
                                              <Typography variant="subtitle1" fontSize="0.75rem">
                                                  {level?.label}
                                              </Typography>
                                          </Grid>
                                      </Grid>
                                  </Box>
                              </FormControl>
                          )}
  
                          <Grid container alignItems="center" justifyContent="space-between">
                              <Grid item>
                                  <FormControlLabel
                                      control={
                                          <Checkbox
                                              checked={checked}
                                              onChange={(event) => setChecked(event.target.checked)}
                                              name="checked"
                                              color="primary"
                                          />
                                      }
                                      label={
                                          <Typography variant="subtitle1">
                                              同意 &nbsp;
                                              <Typography variant="subtitle1" component={Link} to="#">
                                                  使用协议及条款。
                                              </Typography>
                                          </Typography>
                                      }
                                  />
                              </Grid>
                          </Grid>
                          {errors.submit && (
                              <Box sx={{ mt: 3 }}>
                                  <FormHelperText error>{errors.submit}</FormHelperText>
                              </Box>
                          )}
  
                          <Box sx={{ mt: 2 }}>
                              <AnimateButton>
                                  <Button
                                      disableElevation
                                      disabled={isSubmitting}
                                      fullWidth
                                      size="large"
                                      type="submit"
                                      variant="contained"
                                      color="primary"
                                  >
                                      注册
                                  </Button>
                              </AnimateButton>
                          </Box>
                      </form>
                  )}
              </Formik>
          </>
      );
  };
  
  export default FirebaseRegister;
  