import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { toast } from 'react-toastify';
import { Button, Form, FormGroup, Input } from 'reactstrap';
import withRedirect from '../../hoc/withRedirect';
import Label from 'reactstrap/es/Label';
import classNames from 'classnames';
import { useBrowserQuery } from '../../context/BrowserQuery';
import { resetForgotPassword } from '../../helpers/rest';
import { useTranslation } from 'react-i18next';

const PasswordResetForm = ({ setRedirect, setRedirectUrl, layout, hasLabel }) => {
  // State
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [isDisabled, setIsDisabled] = useState(true);
  const queryString = useBrowserQuery();

  const { t } = useTranslation('auth');

  // Handler
  const handleSubmit = e => {
    e.preventDefault();
    const token = queryString.get('token');
    const email = queryString.get('email');
    if (!token || !email) return;

    // if (password !== confirmPassword) return;
    const data = { email, token, password, password_confirmation: password}
    setIsDisabled(true);
    resetForgotPassword(data)
      .then(() => {
        toast.success(t('resetForm.successMessage'));
        setRedirect(true);
      })
      .catch(error => {
        console.error(error);
        // error.json().then(data => {
        //   toast.error(data.message);
        // });
      })
      .finally(() => {
        setIsDisabled(false);
      });
  };

  useEffect(() => {
    setRedirectUrl(`/auth/login`);
  }, [setRedirectUrl, layout]);

  // useEffect(() => {
  //   if (password === '' || confirmPassword === '') return setIsDisabled(true);

  //   setIsDisabled(password !== confirmPassword);
  // }, [password, confirmPassword]);

  useEffect(() => {
    if (password === '') return setIsDisabled(true);

    setIsDisabled(false);
  }, [password]);

  return (
    <Form className={classNames('mt-3', { 'text-left': hasLabel })} onSubmit={handleSubmit}>
      <FormGroup>
        {hasLabel && <Label>{t('resetForm.password')}</Label>}
        <Input
          placeholder={!hasLabel ? t('resetForm.password') : ''}
          value={password}
          onChange={({ target }) => setPassword(target.value)}
          type="password"
        />
      </FormGroup>
      {/* <FormGroup>
        {hasLabel && <Label>{t('resetForm.confirmPassword')}</Label>}
        <Input
          placeholder={!hasLabel ? t('resetForm.confirmPassword') : ''}
          value={confirmPassword}
          onChange={({ target }) => setConfirmPassword(target.value)}
          type="password"
        />
      </FormGroup> */}
      <Button color="primary" block className="mt-3" disabled={isDisabled}>
      {t('resetForm.submit')}
      </Button>
    </Form>
  );
};

PasswordResetForm.propTypes = {
  setRedirect: PropTypes.func.isRequired,
  setRedirectUrl: PropTypes.func.isRequired,
  layout: PropTypes.string,
  hasLabel: PropTypes.bool
};

PasswordResetForm.defaultProps = { layout: 'basic', hasLabel: false };

export default withRedirect(PasswordResetForm);
