import * as React from 'react';
import classNames from 'classnames/bind';
import LoginForm from 'components/forms/LoginForm';
import TextItem from 'components/items/TextItem';
import { Redirect } from 'react-router-dom';
import { viewConfig } from 'config/general';
import styleIdentifiers from './login.scss';

const styles = classNames.bind(styleIdentifiers);

export interface LoginProps {
  login: Function;
  user: Record<string, any>;
}

interface LoginState {}

export default class Login extends React.Component<LoginProps, LoginState> {
  submit = (values: Record<string, any>) => {
    const { login } = this.props;

    login(values);
  };

  render() {
    const { user } = this.props;
    const userData = user && user.data;

    if (userData && userData.id) return <Redirect to="/paragraph/pages" />;
    return (
      <div className={styles('Login')}>
        <div className={styles('wrapper')}>
          <h1>
            <TextItem path="CMS Login" />
          </h1>
          <LoginForm inputProps={viewConfig.inputProps} onSubmit={this.submit} />
        </div>
      </div>
    );
  }
}
