import { Text } from '../components/Text';
import {
  ISignInFields,
  SignInForm,
  SignInFormProps
} from '../components/Form/SignInForm';
import { Popup } from '../components/popup/Popup';
import { css } from 'glamor';
import { Button, useApphouse } from '..';
import { observer } from 'mobx-react';
import { setAlpha } from '../utils/color/setAlpha';
import React from 'react';

const buttonSwitchStyleWrapper = {
  display: 'flex',
  justifyContent: 'center',
  flexDirection: 'column',
  alignItems: 'center',
  paddingTop: '1rem'
};

export interface SignInPopup extends SignInFormProps {
  onSwitchAuth: () => void;
  /**
   * If true, the close button will be displayed
   * @default false
   * @optional
   */
  showCloseButton?: boolean;
}
export const SignInPopup: React.FC<SignInPopup> = observer((props) => {
  const {
    reason,
    errorMessage,
    onSubmit,
    children,
    onSwitchAuth,
    showCloseButton = false
  } = props;
  const { colors, tokens } = useApphouse().theme;
  return (
    <Popup
      id="signIn"
      title={<Text variant="header">Sign In</Text>}
      closeOnClickOutside
      hideFooterActions
      hideFooter
      showCloseButton={showCloseButton}
      gutters={tokens.spacings.xl}
      styleOverwrites={{
        container: {
          maxWidth: '360px',
          padding: '30px'
        }
      }}
    >
      <SignInForm
        errorMessage={errorMessage}
        reason={reason}
        onSubmit={(formData: ISignInFields) => {
          if (onSubmit) {
            onSubmit(formData);
          }
        }}
      />
      <div {...css(buttonSwitchStyleWrapper)}>
        <Button
          variant="brandClear"
          onClick={() => {
            onSwitchAuth();
          }}
          styleOverwrites={{
            fontSize: tokens.fontSize.title
          }}
        >
          <Text
            styleOverwrites={{
              color: setAlpha(colors.onSurface, 0.7),
              fontSize: 'inherit'
            }}
          >
            New?
          </Text>{' '}
          Sign Up
        </Button>
      </div>
      {children}
    </Popup>
  );
});