import trackAnalyticsEvent from '@/lib/trackAnalyticsEvent';
import { EmailRegisterForm } from './EmailRegisterForm';
import { AuthButton, AuthSeparator, ButtonLink, LogoWrapper } from './styles';

const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL;

const RegisterSection = (props: {
  showLogo?: boolean;
  onCancel: () => void;
  queryString: string;
  directToStudio?: boolean;
}) => {
  const { onCancel, queryString, showLogo = true, directToStudio = true } = props;

  return (
    <div style={{ width: 300 }}>
      {showLogo && (
        <LogoWrapper>
          <img src="/images/wordmark-black.svg" height={30} width={130} alt="WavTool Logo" />
        </LogoWrapper>
      )}
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '10px',
          alignItems: 'center',
          justifyContent: 'center',
          marginBottom: '20px',
        }}
      >
        <ButtonLink target={directToStudio ? '' : '_blank'} href={`${SERVER_URL}/auth/google/signup${queryString}`}>
          <AuthButton
            onClick={() => {
              if ((window as any).rdt) (window as any).rdt('track', 'SignUp');
              trackAnalyticsEvent({
                name: 'Landing Button Clicked',
                properties: {
                  text: 'Sign up with Google',
                  location: 'Register Modal',
                },
              });
            }}
          >
            Sign up with Google
            <img src="/images/icons/Google.svg" height={24} width={24} alt="Google Logo" />
          </AuthButton>
        </ButtonLink>
        <ButtonLink target={directToStudio ? '' : '_blank'} href={`${SERVER_URL}/auth/facebook/signup${queryString}`}>
          <AuthButton
            onClick={() => {
              if ((window as any).rdt) (window as any).rdt('track', 'SignUp');
              trackAnalyticsEvent({
                name: 'Landing Button Clicked',
                properties: {
                  text: 'Sign up with Facebook',
                  location: 'Register Modal',
                },
              });
            }}
          >
            Sign up with Facebook
            <img src="/images/icons/Facebook.svg" height={24} width={24} alt="Facebook logo" />
          </AuthButton>
        </ButtonLink>
      </div>
      <AuthSeparator>Or</AuthSeparator>

      <EmailRegisterForm directToStudio={directToStudio} onCancel={onCancel} />
    </div>
  );
};

export default RegisterSection;