import { AppConfig, AppLoginType, Email, PhoneNumber } from '@shared/entities';
import { Routing } from '@shared/features/Routing';
import { AnalyticsService, AnalyticsStore } from '@shared/modules';
import { AuthApi, AuthService, Clock, GoogleAnalytics, ModalRoute, Storage } from '@shared/services';
import { CurrencyStore, MetadataStore, SettingsStore } from '@shared/stores';
import { inject, injectable, named } from 'inversify';
import { action, computed, makeObservable, observable, reaction } from 'mobx';

import { AuthModals } from './AuthModals';
import { LoginViewModel, RecoveryViewModel, RegistrationViewModel } from './formModel';
import { EmailLoginContainer, LoginContainer, PhoneNumberLoginContainer } from './LoginContainer';

const SAVED_COUNTRY_KEY = 'phone_country';

export type FormViewModelType = RegistrationViewModel | RecoveryViewModel | LoginViewModel;

@injectable()
export class AuthViewModel {
  @observable.ref
  public login: LoginContainer | undefined = undefined;

  private readonly recoveryViewModel: RecoveryViewModel;
  private readonly registrationViewModel: RegistrationViewModel;
  private readonly loginViewModel: LoginViewModel;

  public constructor(
    @inject(SettingsStore) private readonly settingsStore: SettingsStore,
    @inject(AuthApi) private readonly api: AuthApi,
    @inject(AuthService) private readonly authService: AuthService,
    @inject(Clock) private readonly clock: Clock,
    @inject(CurrencyStore) private readonly currencyStore: CurrencyStore,
    @inject(GoogleAnalytics) private readonly googleAnalytics: GoogleAnalytics,
    @inject(AnalyticsService) analyticsService: AnalyticsService,
    @inject(AnalyticsStore) analyticsStore: AnalyticsStore,
    @inject(Routing) private readonly routing: Routing,
    @inject(MetadataStore) metadataStore: MetadataStore,
    @inject(Storage) @named(Storage.LOCAL) private readonly storage: Storage,
    @inject(Storage) @named(Storage.SESSION) private readonly sessionStorage: Storage,
  ) {
    makeObservable(this);
    this.recoveryViewModel = new RecoveryViewModel(
      computed(() => this.login),
      this.api,
      this.authService,
      this.clock,
      this.onFinishRecovery,
      this.currencyStore,
      this.googleAnalytics,
      analyticsService,
      sessionStorage,
    );
    this.registrationViewModel = new RegistrationViewModel(
      computed(() => this.login),
      this.api,
      this.authService,
      this.clock,
      this.onFinishRegistration,
      this.currencyStore,
      this.googleAnalytics,
      analyticsService,
      analyticsStore,
      this.routing,
      this.sessionStorage,
      metadataStore,
    );
    this.loginViewModel = new LoginViewModel(
      computed(() => this.login),
      this.api,
      this.authService,
      this.goToRegistration,
      this.goToRecovery,
      this.onLogin,
      this.googleAnalytics,
    );

    reaction(
      () => this.authService.authorized,
      (authorized) => {
        if (authorized) this.closeModal();
      },
      { fireImmediately: true },
    );

    reaction(
      () => this.settingsStore.appConfig,
      action((appConfig) => {
        if (appConfig) this.onConfig(appConfig);
      }),
    );

    reaction(
      () => this.activeModal,
      action((activeModal) => {
        if (activeModal === AuthModals.REGISTRATION) {
          console.log('AAAAAAAAAAAAAAAA A A A A AA  AA  A A A AA A A A  ');
          console.log(window.location.search);
          const params = new URLSearchParams(window.location.search);
          console.log(params.get('acctype'));
        }
      }),
      { fireImmediately: true },
    );
  }

  @action
  private onConfig = (config: AppConfig): void => {
    this.login?.dispose();
    switch (config.loginType) {
      case AppLoginType.PHONE: {
        this.login = new PhoneNumberLoginContainer(
          new PhoneNumber(this.storage.get(SAVED_COUNTRY_KEY) ?? config.defaultCountry),
        );
        break;
      }
      case AppLoginType.EMAIL:
      default: {
        this.login = new EmailLoginContainer(new Email());
        break;
      }
    }
  };

  @computed
  public get formViewModel(): FormViewModelType | undefined {
    switch (this.activeModal) {
      case AuthModals.RECOVERY:
        return this.recoveryViewModel;
      case AuthModals.REGISTRATION:
        return this.registrationViewModel;
      case AuthModals.LOGIN:
        return this.loginViewModel;
      default:
        return undefined;
    }
  }

  @computed
  public get activeModal(): AuthModals | undefined {
    const route = this.activeRoute;
    const routing = this.routing.auth;

    if (route === routing.registration) return AuthModals.REGISTRATION;
    if (route === routing.login) return AuthModals.LOGIN;
    if (route === routing.recovery) return AuthModals.RECOVERY;

    return undefined;
  }

  public goToRegistration = (): void => {
    this.googleAnalytics.event({ category: 'registration', action: 'registration_initiated' });
    this.routing.auth.registration.open();
  };

  public goToLogin = (): void => {
    this.googleAnalytics.event({ category: 'login', action: 'login_initiated' });
    this.routing.auth.login.open();
  };

  public goToRecovery = (): void => {
    this.routing.auth.recovery.open();
  };

  public goToMainPage = (): void => {
    this.routing.shared.main.push();
  };

  public closeModal = (): void => {
    this.activeRoute?.close();
  };

  @computed
  private get activeRoute(): ModalRoute | undefined {
    const routing = this.routing.auth;
    if (routing.registration.isAt()) return routing.registration;
    if (routing.login.isAt()) return routing.login;
    if (routing.recovery.isAt()) return routing.recovery;
    return undefined;
  }

  private onFinishRecovery = (): void => this.onDone(this.closeModal);

  private onFinishRegistration = (): void => this.onDone(this.goToMainPage);

  private onLogin = (): void => this.onDone();

  @action
  private resetForm = (): void => {
    this.login?.reset();
    [this.registrationViewModel, this.recoveryViewModel, this.loginViewModel].forEach((viewModel) => viewModel.reset());
  };

  @action
  private onDone = (onDoneRedirect?: () => void): void => {
    if (this.login?.type === AppLoginType.PHONE) {
      this.storage.set(SAVED_COUNTRY_KEY, this.login.phoneNumber.selectedCountry);
    }
    this.resetForm();
    onDoneRedirect?.();
  };
}