import { observer } from 'mobx-react';
import { ReactNode } from 'react';
import { useApphouse } from '../../context/useApphouse';
import { Button, ButtonProps } from '../Button';
import React from 'react';
import { ISignUpFields } from '../Form/SignUpForm';
import { ISignInFields } from '../Form/SignInForm';
import { SignInPopup } from '../../templates/SignInPopup';
import { SignUpPopup } from '../../templates/SignUpPopup';
import { omit } from '../../utils/obj/omit';

export interface ButtonLoginProps extends ButtonProps {
  /**
   * If provided, it will overwrite the default text
   * @default "Sign In"
   * @optional
   */
  children?: ReactNode;
  /**
   * If provided, the reason will be displayed on the login prompt
   * @optional
   */
  reason?: string;
  /**
   *
   */
  /**
   * A function that is called when the sign up form is submitted
   * @param formData
   * @returns void
   */
  onSignUp: (formData: ISignUpFields) => void;
  /**
   * A function that is called when the sign In form is submitted
   * @param formData
   * @returns void
   */
  onSignIn: (formData: ISignInFields) => void;
  /**
   * An error message to be displayed if the form has an error
   * on submission
   */
  errorMessage?: React.ReactNode;
  /**
   * If true, a close button will be displayed on the popup
   * @default false
   * @optional
   */
  showCloseButton?: boolean;
}
/**
 * A button that will open a login prompt
 */
export const ButtonLogin: React.FC<ButtonLoginProps> = observer((props) => {
  const {
    children,
    reason,
    errorMessage,
    onSignIn,
    onSignUp,
    showCloseButton
  } = props;
  const { openPopup } = useApphouse();
  const AuthPopup = (
    <AuthenticatePopup
      showCloseButton={showCloseButton}
      popup="signIn"
      errorMessage={errorMessage}
      onSignIn={onSignIn}
      onSignUp={onSignUp}
      reason={reason}
    />
  );
  const handleClick = () => {
    openPopup(AuthPopup);
  };
  const buttonProps = omit(props, [
    'onSignIn',
    'onSignUp',
    'reason',
    'errorMessage',
    'showCloseButton'
  ]);
  return (
    <Button variant="brand" onClick={handleClick} {...buttonProps}>
      {children || 'Sign In'}
    </Button>
  );
});

export const AuthenticatePopup: React.FC<{
  onSignUp: (formData: ISignUpFields) => void;
  onSignIn: (formData: ISignInFields) => void;
  errorMessage?: React.ReactNode;
  reason?: string;
  popup: 'signIn' | 'signUp';
  showCloseButton?: boolean;
}> = observer(
  ({
    onSignUp,
    onSignIn,
    errorMessage,
    reason,
    popup,
    showCloseButton = false
  }) => {
    const [popupId, setPopupId] = React.useState<string>(popup);
    return popupId === 'signIn' ? (
      <SignInPopup
        reason={reason}
        errorMessage={errorMessage}
        showCloseButton={showCloseButton}
        onSwitchAuth={() => {
          setPopupId('signUp');
        }}
        onSubmit={(formData: ISignInFields) => {
          if (onSignIn) {
            onSignIn(formData);
          }
        }}
      />
    ) : (
      <SignUpPopup
        errorMessage={errorMessage}
        showCloseButton={showCloseButton}
        reason={reason}
        onSwitchAuth={() => {
          setPopupId('signIn');
        }}
        onSubmit={(formData: ISignUpFields) => {
          if (onSignUp) {
            onSignUp(formData);
          }
        }}
      />
    );
  }
);