import React, { memo, useEffect, useState } from 'react';
import { StatusBar } from 'react-native';
// uncomment this if request account feature will be needed
//import { sendEmail } from '../../common/utils/email-client';
// import { NavigationProp } from '@react-navigation/native';
import { SText } from '../../common/s-components/typography/s-text';
// uncomment this if request account feature will be needed
//import { SH4 } from '../../common/s-components/typography/s-h4';
import { SBox } from '../../common/s-components/layout/s-box';
import { SImage } from '../../common/s-components/s-image';
import { SCentered } from '../../common/s-components/layout/s-centered';
import { Button } from '../../common/components/button';
import { LoadingOverlay } from '../../common/components/loading-overlay';
import { Figure } from '../../common/components/figure';
import { TAuthErrorNullable } from '../types';

const logoImageUrl = require('../../../assets/logo.png');

type TProps = {
  login: () => void;
  clearAuthError: () => void;
  loading: boolean;
  authError: TAuthErrorNullable;
  // https://reactnavigation.org/docs/4.x/typescript/
  // navigation: NavigationProp<any>;
};

export const Login: React.FC<TProps> = memo(props => {
  const { authError, login, clearAuthError, loading } = props;
  const [showAuthError, setShowAuthError] = useState(false);

  useEffect(() => {
    setShowAuthError(!!authError);
  }, [authError]);

  /* uncomment this if request account feature will be needed
  requestAccount = () => {
    sendEmail('apollogo@gdbanalytics.com', '[Request An Account]');
  };
  */

  if (loading) {
    // TODO: remove
    // TODO: remove
    // TODO: remove
    return <LoadingOverlay />;
  }
  const content = showAuthError ? (
    <Figure
      fullscreen
      verticalOffset={0}
      variant="profile-paused"
      renderMessage={() => (
        <SText mt={0} mx={30.5} lineHeight="20px" textAlign="center">
          {authError}
        </SText>
      )}
      placeholderHeight={230}
      renderFooter={() => (
        <SBox width={140} mt={27}>
          <Button
            testID="login-back"
            variant="primary"
            onPress={clearAuthError}
            width={1}
          >
            Back
          </Button>
        </SBox>
      )}
    />
  ) : (
    <SBox alignItems="center" mt={-5}>
      <SBox ml={62} mr={62}>
        <SImage source={logoImageUrl} maxWidth={170} maxHeight={96} />
      </SBox>
      <SBox width={140} mt={36}>
        <Button testID="sign-in" variant="primary" onPress={login} width={1}>
          Sign In
        </Button>
      </SBox>
      {/* uncomment this if request account feature will be needed
        <SBox mt={17} mb={19} lineHieght={20}>
          <SH4 normal color="periwinkleGray">
            or
          </SH4>
        </SBox>
        <SBox width={205}>
          <Button variant="request" onPress={this.requestAccount} width={1}>
            Request an account
          </Button>
        </SBox> */}
    </SBox>
  );

  return (
    <SCentered bg="ebonyClay">
      <StatusBar barStyle="light-content" translucent />
      {content}
    </SCentered>
  );
});

// static navigationOptions = {
//   title: 'Login',
//   header: null,
// };