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

const buttonSwitchStyleWrapper = {
  display: 'flex',
  justifyContent: 'center',
  flexDirection: 'column',
  alignItems: 'center',
  paddingTop: '1rem'
};
export interface SignUpPopup extends SignUpFormProps {
  onSwitchAuth: () => void;
  /**
   * If true, the close button will be displayed
   * @default false
   * @optional
   */
  showCloseButton?: boolean;
}

export const SignUpPopup: React.FC<SignUpPopup> = observer((props) => {
  const {
    errorMessage,
    onSubmit,
    reason,
    children,
    onSwitchAuth,
    showCloseButton = false
  } = props;
  const { colors, tokens } = useApphouse().theme;
  return (
    <Popup
      id="Sign Up"
      title={<Text variant="header">Sign Up</Text>}
      closeOnClickOutside
      hideFooterActions
      showCloseButton={showCloseButton}
      hideFooter
      gutters={tokens.spacings.xl}
      styleOverwrites={{
        container: {
          maxWidth: '360px',
          padding: '30px'
        }
      }}
    >
      <SignUpForm
        errorMessage={errorMessage}
        reason={reason}
        onSubmit={(formData) => {
          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'
            }}
          >
            Not New?
          </Text>{' '}
          Sign In
        </Button>
      </div>
      {children}
    </Popup>
  );
});