import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import * as Yup from 'yup';
import {
  Formik,
} from 'formik';

import { submitFormAction } from '../accountsReducer';
import Form from '../../_components/Form';
import TextField from '../../_components/TextField';
import Button from '../../_components/Button';

export const formValidationSchema = Yup.object().shape({
  username: Yup.string()
    .email('Username must be a valid email address')
    .trim()
    .required('Username is a required field'),
  password: Yup.string()
    .trim()
    .required('Password is a required field'),
});

export const LoginFormComponent = ({ handleSubmit, handleChange, handleBlur }) => (
  <Form handleSubmit={handleSubmit}>
    <TextField
      name="username"
      label="Username:"
      handleChange={handleChange}
      handleBlur={handleBlur}
    />

    <TextField
      name="password"
      label="Password:"
      handleChange={handleChange}
      handleBlur={handleBlur}
    />

    <Button type="submit">Login</Button>
  </Form>
);

LoginFormComponent.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  handleChange: PropTypes.func.isRequired,
  handleBlur: PropTypes.func.isRequired,
};

/**
 * Submit credentials to login to application
 */
export const LoginPageComponent = ({ submitLoginForm }) => {
  const onSubmit = values => submitLoginForm(values);

  return (
    <>
      <h1>Login</h1>
      <Formik
        onSubmit={onSubmit}
        validationSchema={formValidationSchema}
        render={LoginFormComponent}
      />
    </>
  );
};

LoginPageComponent.propTypes = {
  submitLoginForm: PropTypes.func.isRequired,
};

export default connect(
  state => ({ accounts: state.accounts }),
  {
    submitLoginForm: submitFormAction,
  },
)(LoginPageComponent);