text: import { Card, Button, Form, Alert } from 'react-bootstrap';
  import { useRef, useState } from 'react';
  import { useAuth } from '../contexts/AuthContext';
  import { Link, useHistory } from 'react-router-dom';
  import Footer from '../Footer';
  
  const UpdateProfile = () => {
    const nameRef = useRef();
    const emailRef = useRef();
    const passwordRef = useRef();
    const passwordConfirmRef = useRef();
  
    const { currentUser, updateName, updatePassword, updateEmail } = useAuth();
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);
    const history = useHistory();
  
    function handleSubmit(e) {
      e.preventDefault();
      if (passwordRef.current.value !== passwordConfirmRef.current.value) {
        return setError('Passwords do not match.');
      }
  
      const promises = [];
      setLoading(true);
      setError('');
  
      if (nameRef.current.value !== currentUser.name) {
        promises.push(updateName(nameRef.current.value));
      }
  
      if (emailRef.current.value !== currentUser.email) {
        promises.push(updateEmail(emailRef.current.value));
      }
  
      if (passwordRef.current.value) {
        promises.push(updatePassword(passwordRef.current.value));
      }
  
      Promise.all(promises)
        .then(() => {
          history.push('/');
        })
        .catch(() => {
          setError('Failed to update account');
        })
        .finally(() => {
          setLoading(false);
        });
  
      setLoading(false);
    }
  
    return (
      <>
        <Card>
          <Card.Body>
            <h2 className="text-center mb-4">Update Profile</h2>
            {error && <Alert variant="danger">{error}</Alert>}
            <Form onSubmit={handleSubmit}>
              <Form.Group id="name">
                <Form.Label>Name</Form.Label>
                <Form.Control
                  ref={nameRef}
                  required
                  defaultValue={currentUser.displayName}
                ></Form.Control>
              </Form.Group>
              <Form.Group id="email">
                <Form.Label>Email</Form.Label>
                <Form.Control
                  type="email"
                  ref={emailRef}
                  required
                  defaultValue={currentUser.email}
                ></Form.Control>
              </Form.Group>
              <Form.Group id="password">
                <Form.Label>Password</Form.Label>
                <Form.Control
                  type="password"
                  ref={passwordRef}
                  placeholder="Leave blank to keep the same"
                ></Form.Control>
              </Form.Group>
              <Form.Group id="password-confirm">
                <Form.Label>Password Confirmation</Form.Label>
                <Form.Control
                  type="password"
                  ref={passwordConfirmRef}
                  placeholder="Leave blank to keep the same"
                ></Form.Control>
              </Form.Group>
              <Button
                disabled={loading}
                type="Submit"
                className="w-100"
                style={{ backgroundColor: 'black' }}
              >
                Update
              </Button>
            </Form>
          </Card.Body>
        </Card>
        <div className="w-100 text-center mt-2">
          <Link to="/">Cancel</Link>
        </div>
        <Footer />
      </>
    );
  };
  
  export default UpdateProfile;
  