import React, { Component } from 'react'
import { connect } from 'react-redux'
import autobind from 'autobind-decorator'
import styled from 'styled-components'
import { compose } from 'ramda'
import { withFormik, Field } from 'formik'
import Yup from 'yup'
import { login } from '_client/actions/CashierActions'
import Box from '_client/components/elements/Box'
import App from '_client/components/elements/App'
import Heading from '_client/components/elements/Heading'
import PrimaryButton from '_client/components/composites/PrimaryButton'
import { FormikCustomInput } from '_client/components/elements/InputField'
import BackgroundSVG from '_client/assets/svg/main-background.svg'

const Form = styled.form`
  display: flex;
  flex-direction: column;
`

const loginEnhancer = withFormik({
  displayName: 'LoginForm',
  mapPropsToValues: props => ({
    username: '',
    password: ''
  }),
  validationSchema: Yup.object().shape({
    username: Yup.string().required('Username is required'),
    password: Yup.string().required('Password is required')
  }),
  handleSubmit: (
    values,
    {
      props,
      setSubmitting,
      setErrors
    }
  ) =>
    props.login(values)
      .catch(({ message }) => {
        setErrors({ password: message })
        setSubmitting(false)
      })
})

const Login = props => {
  const {
    values,
    touched,
    errors,
    dirty,
    isSubmitting,
    isValid,
    handleChange,
    handleBlur,
    handleSubmit,
    handleReset
  } = props

  return (
    <App
      full
      orientation="portrait"
      background={`url(${BackgroundSVG})`}
      p={2}
      justify="center"
      >
      <Box>
        <Heading
          fontWeight={400}
          mb="0.2em"
          align="center"
          >
          {'Welcome'}
        </Heading>
        <Heading
          level={2}
          fontWeight={400}
          fontSize={16}
          mb="2em"
          align="center"
          >
          {`Please sign in`}
        </Heading>
        <Form onSubmit={handleSubmit}>
          <Box mb={2}>
            <Field
              autoFocus
              name="username"
              component={FormikCustomInput}
              placeholder="ID"
              value={values.username}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </Box>
          <Box mb={2}>
            <Field
              name="password"
              placeholder="Password"
              type="password"
              component={FormikCustomInput}
              value={values.password}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </Box>
          <PrimaryButton
            label="Login"
            type="submit"
            disabled={!isValid || isSubmitting}
          />
        </Form>
      </Box>
    </App>
  )
}

export default connect(
  null,
  dispatch => ({
    login: compose(dispatch, login)
  })
)(loginEnhancer(Login))