import { SideBySideLayout } from 'components/common';
import {
    LoginLayoutManagerLoading, LoginLayoutState, LoginStateManager, LoginStrategy
} from 'domains/user/LoginStateManager';
import { LoginData, PersonData } from 'domains/user/models';
import { UserStatus, UserStatusEntity, UserStatusStore } from 'domains/user/UserStatusStore';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { Inject } from 'utils/di';
import { LoginForm, PersonDataForm, PhoneInput } from './components';
import { InputMask } from './types';

@observer
export class PageLogin extends React.Component<RouteComponentProps<any>> {
  @Inject(LoginStateManager)
  loginStateManager: LoginStateManager
  @Inject(UserStatusStore)
  userStatusStore: UserStatusStore
  @observable
  loginData: LoginData = new LoginData()
  @observable
  personData: PersonData = new PersonData()

  phoneMaskOptions = {
    forceMaskOnFocus: true,
    mask: '+0 (000) 000-00-00',
    unmask: true,
    onAccept: this.handleMaskedInputChange
  }

  constructor(props: RouteComponentProps<any>) {
    super(props)

    this.handleMaskedInputChange = this.handleMaskedInputChange.bind(this)
    this.checkUser = this.checkUser.bind(this)
  }

  @computed
  get formSectionComponent(): JSX.Element {
    if (!this.loginStateManager.state) {
      return this.renderPhoneInput()
    }
    const { title, tip, step, finalStep, name } = this.loginStateManager.state

    return (
      <div>
        {!!(step && finalStep) && (
          <span>
            Шаг {step} из {finalStep}
          </span>
        )}
        {title && <h2>{title}</h2>}
        {tip && <p>{tip}</p>}
        {name === LoginLayoutState.REGISTRATION_PERSONAL_DATA ? (
          <PersonDataForm personData={this.personData} />
        ) : (
          <LoginForm loginData={this.loginData} />
        )}
      </div>
    )
  }

  @computed
  get illustrationSectionComponent(): JSX.Element {
    if (!this.loginStateManager.state) {
      return <span>Start illustration</span>
    }

    // здесь можно прописать компоненты для каждой секции в отдельности, в зависимости от состояния
    switch (this.loginStateManager.state.name) {
      case LoginLayoutState.PASSWORD:
        return <span>Иллюстрация для ввода пароля</span>
      default:
        return <span>Start form</span>
    }
  }

  @computed
  get phoneIsValid() {
    return this.loginData.phone.length === 11
  }

  @action.bound
  handleMaskedInputChange(value: string, masked: InputMask) {
    if (masked.el && masked.el.input) {
      const { name } = masked.el.input

      this.loginData.set(name, value)
    }
  }

  checkUser(): void {
    this.loginStateManager.setLoading(LoginLayoutManagerLoading.PAGE, { state: true })

    this.userStatusStore.getStatus(this.loginData.phone).then((checkStatusEntity: UserStatusEntity) => {
      this.loginStateManager.resetLoading(LoginLayoutManagerLoading.PAGE)
      switch (checkStatusEntity.auth) {
        case UserStatus.PASSWORD:
          this.loginStateManager.setStrategy(LoginStrategy.OLD_USER)
          break
        case UserStatus.SMS:
          this.loginStateManager.setStrategy(LoginStrategy.OLD_USER_NOPASSWORD)
          break
        default:
          this.loginStateManager.setStrategy(LoginStrategy.NEW_USER)
      }
    })
    // TODO: добавить ошибку в catch, когда появятся макеты
  }

  renderPhoneInput(): JSX.Element {
    return (
      <div>
        <h2>Введите свой номер телефона, чтобы войти или зарегистрироваться</h2>
        <PhoneInput maskOptions={this.phoneMaskOptions} value={this.loginData.phone} />
        <button type="button" onClick={this.checkUser} disabled={!this.phoneIsValid}>
          Продолжить
        </button>
      </div>
    )
  }

  render(): JSX.Element {
    const { formLoading, illustrationLoading, pageLoading } = this.loginStateManager

    return (
      <SideBySideLayout
        left={this.formSectionComponent}
        right={this.illustrationSectionComponent}
        leftLoading={formLoading}
        rightLoading={illustrationLoading}
        pageLoading={pageLoading}
      />
    )
  }
}