import { Link } from 'react-router-dom';
import { PATHS as AUTH_PAGE } from './AuthenticationPage';
import { Button } from 'components/common';
import { Input, PasswordInput } from 'components/inputs';
import { ExternalLink } from 'components/router/ExternalLink';
import { SubmitRegister } from './types';

export type SignInFormValues = {
  username: string;
  password: string;
};

export const SignInForm = ({
  submit,
  register,
}: SubmitRegister<SignInFormValues>) => {
  return (
    <div>
      <form className="spacingY2" onSubmit={submit}>
        <Input {...register('username')} placeholder="Username" required />
        <PasswordInput
          type="password"
          {...register('password')}
          placeholder="Password"
          required
        />
        <Button size="l" block type="submit" onClick={submit}>
          Sign In
        </Button>
      </form>
      <div className="marginY4 fz14">
        By using FanSifter, I accept
        <br />
        <ExternalLink href="https://fansifter.com/terms-of-service.pdf">
          Terms of Service
        </ExternalLink>
        ,{' '}
        <ExternalLink href="https://fansifter.com/data-processing-addendum.pdf">
          Data Processing Addendum
        </ExternalLink>
        ,{' '}
        <ExternalLink href="https://fansifter.com/gdpr.pdf">
          Privacy Policy (GDPR)
        </ExternalLink>
        ,{' '}
        <ExternalLink href="https://fansifter.com/ccpa.pdf">
          Privacy Policy (CCPA)
        </ExternalLink>
        , and{' '}
        <ExternalLink href="https://fansifter.com/cookies-policy.pdf">
          Cookies Policy
        </ExternalLink>
      </div>
      <div className="marginY4 fz16">
        <Link className="link" to={`../${AUTH_PAGE.reset}`}>
          Forgot your password?
        </Link>
        <br />
        <Link className="link" to={`../${AUTH_PAGE.confirm}`}>
          Confirm email
        </Link>
      </div>
    </div>
  );
};