import React from 'react';
import PropTypes from 'prop-types';
import { compose, lifecycle } from 'recompose';
import { reduxForm, Field } from 'redux-form';

import user from 'features/user/actions';
import Spinner from 'common/components/Spinner';

import {
  requiredValid,
  emailValid,
  minLengthValid,
  confirmPasswordValid,
} from 'common/validations';

import Input from './Input';

import { Form, SubmitButton, ApiLink, ValidationMessage } from './styles';

FormView.propTypes = {
  loginSelected: PropTypes.bool.isRequired,
  registerSelected: PropTypes.bool.isRequired,
  resetSelected: PropTypes.bool.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  submitting: PropTypes.bool.isRequired,
  error: PropTypes.array,
};

FormView.defaultProps = {
  error: [],
};

function FormView({
  loginSelected,
  registerSelected,
  resetSelected,
  handleSubmit,
  submitting,
  error,
}) {
  const mainInputText =
    (loginSelected && 'Username or Email') || (registerSelected && 'Username') || 'Email';

  return (
    <Form onSubmit={handleSubmit} autoComplete="on">
      <Field
        label={`Enter ${!resetSelected ? 'username' : 'email'}`}
        name={!resetSelected ? 'username' : 'email'}
        component={Input}
        placeholder={mainInputText}
        validate={!resetSelected ? [requiredValid] : [requiredValid, emailValid]}
      />
      <Field
        label="Enter email"
        name="email"
        component={Input}
        type="email"
        placeholder="Email"
        validate={registerSelected ? [requiredValid, emailValid] : []}
        isHidden={loginSelected || resetSelected}
      />
      <Field
        label="Enter account password"
        name="password"
        component={Input}
        type="password"
        placeholder="Password"
        validate={!resetSelected ? [requiredValid, minLengthValid] : []}
        isHidden={resetSelected}
      />
      <Field
        label="Confirm account password"
        name="confirmPassword"
        component={Input}
        type="password"
        placeholder="Confirm Password"
        validate={registerSelected ? [requiredValid, minLengthValid, confirmPasswordValid] : []}
        isHidden={loginSelected || resetSelected}
      />
      <Field
        label="WaniKani V1 API Key"
        name="apiKey"
        component={Input}
        placeholder="WaniKani V1 API Key"
        validate={registerSelected ? [requiredValid] : []}
        isHidden={loginSelected || resetSelected}
      >
        <ApiLink
          title="Find WK API Key"
          name="HELP"
          color="black"
          href="https://www.wanikani.com/settings/account#public-api-key"
          isHidden={loginSelected || resetSelected}
          tabIndex={loginSelected || resetSelected ? -1 : 0}
          external
        />
      </Field>
      {error.length > 0 && <ValidationMessage>{error}</ValidationMessage>}
      <SubmitButton
        type="submit"
        lang="ja"
        title={
          (submitting && 'Submitting...') ||
          (registerSelected && 'Register') ||
          (loginSelected && "Let's Go!") ||
          (resetSelected && 'Submit')
        }
      >
        {(submitting && '送信している...') ||
          (registerSelected && '登録する') ||
          (loginSelected && '行こう') ||
          (resetSelected && '送信する')}
      </SubmitButton>
      {registerSelected && submitting && <Spinner />}
    </Form>
  );
}

const enhance = compose(
  reduxForm({
    form: 'multiLogin',
    onSubmit: (values, dispatch, props) => {
      const { loginSelected, registerSelected, resetSelected, ...form } = props;
      const { username, email, password, apiKey } = values;

      if (registerSelected) {
        dispatch(
          user.register.request(
            {
              username,
              email,
              password,
              api_key: apiKey,
            },
            { form }
          )
        );
      }

      if (loginSelected) {
        dispatch(user.login.request({ username, password }, { form }));
      }

      if (resetSelected) {
        dispatch(user.resetPassword.request({ email }, { form }));
      }
    },
  }),
  lifecycle({
    componentDidUpdate(prevProps) {
      // reset form if user changes panel and there are lingering general submission errors
      if (prevProps.activePanel !== this.props.activePanel && this.props.error) {
        this.props.reset();
      }
    },
  })
);

export default enhance(FormView);

@@ -918,20 +918,16 @@
 utText =
-%0A   
  (loginS
@@ -2631,30 +2631,30 @@
 ngs/
-account#public-api-key
+personal_access_tokens
 %22%0A  
@@ -2997,27 +2997,24 @@
 mitting...')
- %7C%7C
 %0A          (
@@ -3003,32 +3003,35 @@
 g...')%0A         
+ %7C%7C
  (registerSelect
@@ -3047,19 +3047,16 @@
 gister')
- %7C%7C
 %0A       
@@ -3049,32 +3049,35 @@
 ster')%0A         
+ %7C%7C
  (loginSelected 
@@ -3091,19 +3091,16 @@
 's Go!%22)
- %7C%7C
 %0A       
@@ -3093,32 +3093,35 @@
  Go!%22)%0A         
+ %7C%7C
  (resetSelected 
@@ -3187,19 +3187,16 @@
 %E3%81%A6%E3%81%84%E3%82%8B...')
- %7C%7C
 %0A       
@@ -3193,24 +3193,27 @@
 ')%0A         
+ %7C%7C
  (registerSe
@@ -3229,19 +3229,16 @@
  '%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B')
- %7C%7C
 %0A       
@@ -3239,16 +3239,19 @@
         
+ %7C%7C
  (loginS
@@ -3267,19 +3267,16 @@
 & '%E8%A1%8C%E3%81%93%E3%81%86')
- %7C%7C
 %0A       
@@ -3277,16 +3277,19 @@
         
+ %7C%7C
  (resetS

update WK api key link