import { IEntity, passwordStrategy } from '@websolutespa/bom-core';
import { EmailValidator, MatchValidator, PatternValidator, RequiredTrueValidator, RequiredValidator, useFormSchema } from '@websolutespa/bom-mixer-forms';
import { useApi, useLabel } from '@websolutespa/bom-mixer-hooks';
import { Button, Divider, FieldCheckbox, FieldPassword, FieldText, Flex, FormError, FormTester, Text } from '@websolutespa/bom-mixer-ui';
import { ReactNode, useState } from 'react';
import { AuthSubmitPosition, useAuth } from '../hooks';
import { IUserRegister } from '../models';
import { AuthForm } from './auth-form';

export type AuthRegisterProps = {
  children?: ReactNode;
  onSignedUp?: () => void;
  onNavToLogin?: () => void;
};

export const AuthRegister: React.FC<AuthRegisterProps> = ({ onSignedUp, onNavToLogin }: AuthRegisterProps) => {
  const label = useLabel();
  const api = useApi();
  const auth = useAuth();

  const required = RequiredValidator();
  const requiredTrue = RequiredTrueValidator();
  const email = EmailValidator();
  const match = MatchValidator((value, rootValue, control, root) => {
    return rootValue?.password;
  });
  const password = PatternValidator(passwordStrategy, 'password');

  const { form } = useFormSchema<IUserRegister>({
    firstName: { schema: 'text', label: 'field.firstName', validators: [required] },
    lastName: { schema: 'text', label: 'field.lastName', validators: [required] },
    email: { schema: 'text', label: 'field.email', validators: [required, email] },
    password: { schema: 'password', label: 'field.password', validators: [required, password] },
    confirmPassword: { schema: 'password', label: 'field.confirmPassword', validators: [required, match] },
    privacy: { schema: 'checkbox', label: 'field.privacy', validators: [requiredTrue] },
    checkField: { schema: 'text', hidden: true }, // check hidden field for antiforgery
  });

  const [error, setError] = useState<Error>();

  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError(undefined);
    if (form.valid) {
      // console.log('AuthRegister.onSubmit.valid', form.value);
      const value = form.value!;
      const data: IUserRegister = {
        firstName: value.firstName,
        lastName: value.lastName,
        email: value.email,
        password: value.password,
        confirmPassword: value.confirmPassword,
        privacy: value.privacy,
        checkField: value.checkField,
      };
      try {
        const response = await api.post<{ doc: IEntity }>('/auth/register', data);
        /*
        if (isBrowser && 'dataLayer' in window) {
          (window.dataLayer as any[]).push({
            'event': 'Action Complete',
            'wsActionComplete': 'IscrizioneNewsletter',
            'wsActionId': response.doc?.id,
            'wsEmail': value.info.email,
          });
        }
        */
        if (typeof onSignedUp === 'function') {
          onSignedUp();
        }
      } catch (error: any) {
        console.log('AuthRegister.error', error);
        setError(error);
      }
    } else {
      console.log('AuthRegister.onSubmit.invalid');
      form.touched = true;
    }
  };

  const onLogin = () => {
    if (typeof onNavToLogin === 'function') {
      onNavToLogin();
    }
  };

  return (
    <Flex.Col justifyContent="space-between">
      <AuthForm form={form} onSubmit={onSubmit}>
        <Flex.Col flex="1" rowGap="1rem">
          <Text variant="heading30" fontWeight="700" marginBottom="1rem">{label('auth.register.title')}</Text>
          <Text variant="paragraph20" marginBottom="2rem">{label('auth.register.abstract')}</Text>
          <FieldText control={form.controls.checkField}></FieldText>
          <FieldText control={form.controls.firstName}></FieldText>
          <FieldText control={form.controls.lastName}></FieldText>
          <FieldText control={form.controls.email}></FieldText>
          <FieldPassword control={form.controls.password}></FieldPassword>
          <FieldPassword control={form.controls.confirmPassword}></FieldPassword>
          <FieldCheckbox margin="0" control={form.controls.privacy}></FieldCheckbox>
          {error && <FormError error={error}>{label('form.submit.error')}</FormError>}
          {auth.submitPosition === AuthSubmitPosition.Form && (
            <Button type="submit" variant="primary" size="lg" justifyContent="center" margin="1rem 0"><span>{label('auth.register.signUp')}</span></Button>
          )}
          {auth.login && (
            <>
              <Divider>{label('auth.register.alreadyRegistered')}</Divider>
              <Flex.Row justifyContent="center">
                <Button variant="link" onClick={onLogin}>{label('auth.register.login')}</Button>
              </Flex.Row>
            </>
          )}
        </Flex.Col>
        <FormTester form={form} test={auth.registerTest || {
          firstName: 'John',
          lastName: 'Appleseed',
          email: 'john@appleseed.com',
          password: '123456Aa!',
          confirmPassword: '123456Aa!',
          privacy: true,
        }} ></FormTester>
        {auth.submitPosition === AuthSubmitPosition.Bottom && (
          <Button type="submit" variant="primary" size="lg" position="sticky" bottom="1rem" justifyContent="center"><span>{label('auth.register.signUp')}</span></Button>
        )}
      </AuthForm>
    </Flex.Col>
  );
};