import React, { useState } from 'react';
import { TextInput } from '../../components/common/inputs/TextInput';
import { PrimaryButton } from '../../components/common/buttons/PrimaryBtn';
import { connect } from 'react-redux';
import { updatePassword } from '../../redux/action-creators/settings-actions/settings.actions';
import { useToasts } from 'react-toast-notifications';
import ProfileSection from '../../components/common/wrappers/ProfileWrapper';

const ResetPassword = ({ updatePassword }) => {
  const { addToast } = useToasts();
  const [submitting, setIsSubmitting] = useState(false);

  const [password, setPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');

  // const [error, setError] = useState(false);

  const resetPassword = async e => {
    e.preventDefault();
    try {
      setIsSubmitting(true);
      const changePassword = {
        password: password,
        newPassword: newPassword,
      };
      const updatedPassword = await updatePassword(changePassword);
      if (updatedPassword.success === true) {
        addToast('Your password has been updated successfully', {
          appearance: 'success',
        });
      } else {
        addToast(`${updatedPassword.error}`, {
          appearance: 'error',
        });
      }
      setIsSubmitting(false);
    } catch (e) {
      setIsSubmitting(false);
    }
  };

  return (
    <>
      <form onSubmit={resetPassword}>
        <ProfileSection className="sectionw-details">
          <div className="section-details">
            <h3>Recover Password</h3>
            <p>Change your current password</p>
          </div>

          <div className="flex-width-1-2 mb-2 calc-gap">
            <TextInput
              type="password"
              name="password"
              value={password}
              onchange={e => setPassword(e.target.value)}
              label="Current password"
              placeholder="Enter your current password"
              required
            />
            <TextInput
              type="password"
              label="new password"
              name="newPassword"
              placeholder="Enter your new password"
              value={newPassword}
              onchange={e => setNewPassword(e.target.value)}
              required
            />
          </div>
          <div className="flex-width-1-2" style={{ marginTop: '-5rem' }}>
            {/* { */}
            {/*  error &&              <p>required</p> */}
            {/* } */}
            {/* {error &&  <p>required</p>} */}
          </div>
        </ProfileSection>
        <div className="d-flx-alc-jfe py-3 mt-3">
          <PrimaryButton
            type="submit"
            text={!submitting ? 'Update Password' : 'loading...'}
            disabled={submitting}
          />
        </div>
      </form>
    </>
  );
};

export default connect(null, { updatePassword })(ResetPassword);
