import PropTypes from 'prop-types';
import React from 'react';
import { Form } from 'antd';
import { CapInput, CapButton, CapIcon } from '@capillarytech/cap-ui-library';
import { injectIntl, intlShape } from 'react-intl';
import messages from './messages';
const FormItem = Form.Item;

const NormalLoginForm = ({ authenticate, loginInProgress, isError, intl }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} onFinish={(values) => authenticate(values)} className="login-form">
      <FormItem
        className="login-form-item"
        name="username"
        rules={[{ required: true, message: intl.formatMessage(messages.inputUsernameMandatory) }]}
      >
        <CapInput prefix={<CapIcon type="user" outlined style={{ fontSize: 13 }} />} placeholder={intl.formatMessage(messages.username)} />
      </FormItem>
      <FormItem
        className="login-form-item"
        name="password"
        rules={[{ required: true, message: intl.formatMessage(messages.inputPasswordMandatory) }]}
      >
        <CapInput prefix={<CapIcon type="lock" outlined style={{ fontSize: 13 }} />} type="password" placeholder={intl.formatMessage(messages.password)} />
      </FormItem>
      {isError
      ? <FormItem>
        <span style={{color: "red"}}>{intl.formatMessage(messages.invalidCredentials)}</span>
      </FormItem>
      : null
      }
      <FormItem>
        <CapButton loading={loginInProgress} type="primary" htmlType="submit" className="login-form-button">
          Log in
        </CapButton>
      </FormItem>
    </Form>
  );
};

NormalLoginForm.propTypes = {
  authenticate: PropTypes.func.isRequired,
  loginInProgress: PropTypes.bool,
  isError: PropTypes.bool,
  intl: intlShape.isRequired,
};

export default injectIntl(NormalLoginForm);
