import * as React from 'react';
import classNames from 'classnames/bind';
import LoginForm from 'components/forms/LoginForm';
import TextItem from 'components/items/TextItem';
import { config, viewConfig } from 'config/general';
import { fire } from 'store/utils/firebase';
import Logo from 'components/items/Logo';
import ModuleButton from 'components/items/ModuleButton';
import styleIdentifiers from './login.scss';

const styles = classNames.bind(styleIdentifiers);

export interface LoginProps {
  login: Function;
  loading: Record<string, any>;
  showError: Function;
  loginFirebase: Function;
}

interface LoginState {}

export default class Login extends React.Component<LoginProps, LoginState> {
  loginSuccess = () => {
    const options = config.accountOptions;

    const { initAccount, history, logout, showError, logoutFirebase } = this.props;

    initAccount({
      callback: data => {
        let isAuthorized = false;

        let userTypes = data && data[options.typeField];

        // Allow to by pass verification if field do not exist
        if (!userTypes) {
          isAuthorized = true;
        } else {
          userTypes = Array.isArray(userTypes) ? userTypes : [userTypes];

          for (let i = 0; i < userTypes.length; i++) {
            const type = userTypes[i];

            isAuthorized = options.allowedTypes.indexOf(type) >= 0;

            if (isAuthorized) break;
          }
        }

        if (!isAuthorized) {
          // no allowed
          showError({
            data: 'Your are not allowed to access the admin',
          });
          if (config.firebase && fire) {
            logoutFirebase();
          } else {
            logout();
          }
          return;
        }

        if (userTypes && userTypes.includes('admin')) {
          history.push(config.defaultUrl);
        } else {
          history.push(config.noAdminDefaultUrl || config.defaultUrl);
        }
      },
    });
  };

  submit = (values: Record<string, any>): void => {
    const { login, loginFirebase } = this.props;
    if (config.firebase && fire && loginFirebase) {
      loginFirebase({
        data: values,
        noLoading: true,
        callback: this.loginSuccess,
      });
    } else {
      login({
        data: values,
        noLoading: true,
        callback: this.loginSuccess,
      });
    }
  };

  render(): JSX {
    const { loading } = this.props;

    return (
      <div className={styles('Login')}>
        {viewConfig.logoLogin && (
          <div className={styles('logo')}>
            <Logo type={viewConfig.logoLogin} />
          </div>
        )}
        <h1>
          <TextItem path="Login" />
        </h1>
        <LoginForm
          button={ModuleButton}
          inputProps={{
            ...viewConfig.inputProps,
            small: false,
          }}
          buttonProps={{
            large: true,
          }}
          loading={loading.login}
          onSubmit={this.submit}
        />
      </div>
    );
  }
}
