// @flow
import React, { useState } from 'react';
import { View } from 'react-native';
import Heading from './Heading';
import Block from './Block';
import TextInput from './TextInput';
import Row from './Row';
import { SignInButton, SignUpButton } from './buttons';
import { defineMessages } from 'react-intl';
import type { Href } from '../../browser/sitemap';
import useIntl from '../../hooks/useIntl';
import { useAuthMutation } from '../../mutations/AuthMutation';
import Router from 'next/router';
import { setCookie } from '../../browser/cookie';

const messages = defineMessages({
  emailPlaceholder: {
    defaultMessage: 'email',
    id: 'auth.emailPlaceholder',
  },
  passwordPlaceholder: {
    defaultMessage: 'password',
    id: 'auth.passwordPlaceholder',
  },
});

type AuthProps = {|
  redirectUrl?: Href,
|};

export default function Auth(props: AuthProps) {
  const intl = useIntl();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [commit, pending, errors] = useAuthMutation();

  function auth(isSignUp = false) {
    commit({ email, password, isSignUp }, auth => {
      const { token } = auth;
      if (token == null) return;
      setCookie({ token });
      // TODO: Typed useRouter.
      if (Router.query.redirectUrl) {
        Router.replace(Router.query.redirectUrl);
      } else if (props.redirectUrl) {
        // $FlowFixMe Wrong libdef.
        Router.replace(props.redirectUrl);
      } else {
        // $FlowFixMe Wrong libdef.
        Router.replace({
          pathname: Router.pathname,
          query: Router.query,
        });
      }
    });
  }

  return (
    <View>
      <Heading size={1}>Auth</Heading>
      <Block>
        <TextInput
          autoComplete="email"
          disabled={pending}
          error={errors && errors.email}
          focusOnError={errors}
          keyboardType="email-address"
          name="email"
          onChangeText={setEmail}
          placeholder={intl.formatMessage(messages.emailPlaceholder)}
          value={email}
          onSubmitEditing={() => auth()}
        />
        <TextInput
          disabled={pending}
          error={errors && errors.password}
          focusOnError={errors}
          name="password"
          onChangeText={setPassword}
          placeholder={intl.formatMessage(messages.passwordPlaceholder)}
          secureTextEntry
          value={password}
          onSubmitEditing={() => auth()}
        />
        <Row>
          <SignInButton
            disabled={pending}
            onPress={() => auth()}
            color="primary"
          />
          <SignUpButton
            disabled={pending}
            onPress={() => auth(true)}
            color="primary"
          />
        </Row>
      </Block>
    </View>
  );
}

@@ -1057,87 +1057,26 @@
 ion 
-auth(isSignUp = false) %7B%0A    commit(%7B email, password, isSignUp %7D, 
+onSuccess(
 auth
- =%3E
+)
  %7B%0A
-  
     
@@ -1099,26 +1099,24 @@
 = auth;%0A    
-  
 if (token ==
@@ -1134,18 +1134,16 @@
 rn;%0A    
- 
- 
 setCooki
@@ -1152,26 +1152,24 @@
 %7B token %7D);%0A
-  
     // TODO:
@@ -1190,18 +1190,16 @@
 er.%0A    
-  
 if (Rout
@@ -1224,26 +1224,24 @@
 rl) %7B%0A      
- 
- 
 Router.repla
@@ -1262,34 +1262,32 @@
 y.redirectUrl);%0A
-  
     %7D else if (p
@@ -1304,34 +1304,32 @@
 ectUrl) %7B%0A      
-  
 // $FlowFixMe Wr
@@ -1338,34 +1338,32 @@
 g libdef.%0A      
- 
- 
 Router.replace(p
@@ -1385,18 +1385,16 @@
 l);%0A    
-  
 %7D else %7B
@@ -1394,18 +1394,16 @@
  else %7B%0A
-  
       //
@@ -1430,26 +1430,24 @@
 bdef.%0A      
-  
 Router.repla
@@ -1451,18 +1451,16 @@
 place(%7B%0A
-  
         
@@ -1486,18 +1486,16 @@
 thname,%0A
-  
         
@@ -1525,18 +1525,16 @@
     
-  
 %7D);%0A    
   %7D%0A
@@ -1533,17 +1533,102 @@
     
+%7D%0A
   %7D%0A
-    %7D
+%0A  function auth(isSignUp = false) %7B%0A    commit(%7B email, password, isSignUp %7D, onSuccess
 );%0A 

Be explicit