import React, { useEffect, useState } from 'react';
import SignupContainer from 'containers/signupContainer/SignupContainer';
import { inject, observer } from 'mobx-react';
import Authentication from 'store/authentication';
import MobileSignup from 'store/mobileSignup';
import { SignupSteps } from 'store/signupSteps';
import UI from 'store/ui';
import { IContext } from 'typings/context';

type FarsimiSignupProps = {
  mobileSignup: MobileSignup;
  signupSteps: SignupSteps;
  ui: UI;
  authentication: Authentication;
};

const FarsimiSignup = ({ mobileSignup, ui, authentication, signupSteps }: FarsimiSignupProps) => {
  const [loading, setLoading] = useState(true);
  const initialize = () => {
    mobileSignup.initSteps(false);
    signupSteps.init(mobileSignup.steps);
    setLoading(false);
  };

  useEffect(() => {
    initialize();
    ui.setHeaderStyle('dark');
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }
  return (
    <SignupContainer
      type="farsimi"
      steps={mobileSignup.steps}
      authentication={authentication}
      mobileSignup={mobileSignup}
      ui={ui}
    />
  );
};

FarsimiSignup.isWhiteListed = true;

FarsimiSignup.getInitialProps = ({ pathname }: IContext) => {
  return {
    pathname,
    namespacesRequired: ['service'],
  };
};

export default inject(
  'mobileSignup',
  'ui',
  'authentication',
  'signupSteps',
)(observer(FarsimiSignup));