import { Link } from 'react-router-dom';
import { PATHS as AUTH_PAGE, TEMP_USERNAME } from './AuthenticationPage';

import { useUrlSearchParams } from 'hooks/useUrlSearchParams';

import { Button } from 'components/common';
import { Input } from 'components/inputs';

import { SubmitRegister } from './types';

export type ResetPasswordFormValues = {
  username: string;
};

const ResetPasswordForm = ({
  submit,
  register,
}: SubmitRegister<ResetPasswordFormValues>) => {
  return (
    <div>
      <form className="spacingY2" onSubmit={submit}>
        <Input
          placeholder="Email address"
          type="email"
          {...register('username')}
          required
        />
        <Button size="l" block type="submit" onClick={submit}>
          Reset password
        </Button>
      </form>
      <div className="marginY4 fz16">
        <Link className="link" to={`../${AUTH_PAGE.signin}`}>
          Remember your password? Sign in
        </Link>
      </div>
    </div>
  );
};

export type ChangePasswordFormValues = {
  username: string;
  verificationCode: string;
  newPassword: string;
  confirmPassword: string;
};

const ChangePasswordForm = ({
  submit,
  register,
}: SubmitRegister<ChangePasswordFormValues>) => {
  const hasUsername = sessionStorage.getItem(TEMP_USERNAME);

  return (
    <div>
      <form className="spacingY2" onSubmit={submit}>
        {hasUsername === null && (
          <Input
            placeholder="Email address"
            type="email"
            {...register('username')}
            required
          />
        )}
        <Input
          placeholder="Verification Code"
          {...register('verificationCode')}
          required
        />
        <Input
          placeholder="New password"
          type="password"
          {...register('newPassword')}
          required
        />
        <Input
          placeholder="Confirm password"
          type="password"
          {...register('confirmPassword')}
          required
        />
        <Button size="l" block type="submit" onClick={submit}>
          Change password
        </Button>
      </form>
      <div className="marginY4 fz16">
        <Link to={`../${AUTH_PAGE.signin}`}>
          Remember your password? Sign in
        </Link>
      </div>
    </div>
  );
};

export const ForgotPassword = ({
  reset,
  submit,
  register,
}: SubmitRegister<any> & {
  reset: SubmitRegister['submit'];
}) => {
  const { verify } = useUrlSearchParams();
  return verify ? (
    <ChangePasswordForm register={register} submit={submit} />
  ) : (
    <ResetPasswordForm register={register} submit={reset} />
  );
};