import * as React from "react";
import PropTypes from "prop-types";
import Container from "backpack-ui/dist/components/container";
import Button from "backpack-ui/dist/components/button";
import { MultiStepWrapper } from "backpack-ui/dist/components/multiStep";
import MultiStepLogin from "backpack-ui/dist/components/multiStep/multiStepLogin";
import Modal from "backpack-ui/dist/components/modal";
import { ArrowLeft, Close } from "backpack-ui/dist/components/icon";
import { span } from "backpack-ui/dist/utils/grid";

export type AuthState = {
  modalOpen: boolean,
};

export type AuthProps = {
  authActions: any,
  isOpen: boolean,
  closeModal: Function,
  isMobile: boolean,
};


export default class AuthModal extends React.Component<AuthProps, AuthState>{

  static shouldModalClose(currentStep) {
    return (currentStep === 1 || currentStep === 4);
  }

  static modalTitle() {
    return {
      1: null,
      2: "Sign in / Sign up",
      3: "Sign in / Sign up",
      4: null,
    };
  }

  constructor(props) {
    super(props);

    this.onModalClose = this.onModalClose.bind(this);
  }

  onModalClose(currentStep, setCurrentStep) {
    return AuthModal.shouldModalClose(currentStep) ? () => {
      this.props.closeModal();
      setCurrentStep(1);
    } : () => {
      setCurrentStep(1);
    };
  }

  render() {
    const { authActions, closeModal, isMobile } = this.props;
    return (
      <MultiStepWrapper totalSteps={4}>
        {(currentStep, goToNextStep, goToPreviousStep, setCurrentStep) => {
          return (
            <Modal
              isOpen={this.props.isOpen}
              leftAction={this.onModalClose(currentStep, setCurrentStep)}
              leftActionContent={AuthModal.shouldModalClose(currentStep) ?
                <Close width={24} height={24} /> :
                <ArrowLeft width={24} height={24} />
              }
              closeModal={() => {
                closeModal();
                setCurrentStep(1);
              }}
              desktopMaxHeight="650px"
              desktopWidth={span(6, "static")}
              title={AuthModal.modalTitle()[currentStep]}
            >
              <MultiStepLogin
                currentStep={currentStep}
                setStep={setCurrentStep}
                authActions={authActions}
                showLogo={!isMobile}
                doneAction={() => { this.onModalClose(currentStep, setCurrentStep)(); }}
              />
            </Modal>
          );
        }}
      </MultiStepWrapper>
    );
  }
}