import { httpPost } from '@websolutespa/bom-core';
import { EmailValidator, RequiredValidator, useFormSchema } from '@websolutespa/bom-mixer-forms';
import { 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, useUser } from '../hooks';
import { IUser, IUserLogin } from '../models';
import { AuthForm } from './auth-form';

export type AuthLoginProps = {
  children?: ReactNode;
  onSignedIn?: (user: IUser) => void;
  onNavToForgot?: () => void;
  onNavToRegister?: () => void;
};

export const AuthLogin: React.FC<AuthLoginProps> = ({ onSignedIn, onNavToForgot, onNavToRegister }: AuthLoginProps) => {
  const label = useLabel();
  const auth = useAuth();

  const required = RequiredValidator();
  const email = EmailValidator();

  const { form } = useFormSchema<IUserLogin>({
    email: { schema: 'text', label: 'field.email', validators: [required, email] },
    password: { schema: 'password', label: 'field.password', validators: required },
    rememberMe: { schema: 'checkbox', label: 'field.rememberMe' },
    checkField: { schema: 'text', hidden: true }, // check hidden field for antiforgery
  });

  const { setUser } = useUser((state) => state.actions);

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

  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (form.valid) {
      // console.log('AuthLogin.valid', form.value);
      try {
        setError(undefined);
        const user = await httpPost('/api/auth/login', form.value);
        if (user) {
          setUser(user);
          if (typeof onSignedIn === 'function') {
            onSignedIn(user);
          }
        }/* else {
          setError(new Error('an error occurred'));
        }*/
      } catch (error) {
        console.log('AuthLogin.error', error);
        setError(error as Error);
      }
    } else {
      // console.log('AuthLogin.invalid');
      form.touched = true;
    }
  };

  const onForgot = () => {
    if (typeof onNavToForgot === 'function') {
      onNavToForgot();
    }
  };

  const onRegister = () => {
    if (typeof onNavToRegister === 'function') {
      onNavToRegister();
    }
  };

  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.login.title')}</Text>
          <FieldText control={form.controls.checkField}></FieldText>
          <FieldText control={form.controls.email}></FieldText>
          <FieldPassword control={form.controls.password}></FieldPassword>
          <Flex.Row justifyContent="space-between">
            <FieldCheckbox margin="0" control={form.controls.rememberMe}></FieldCheckbox>
            {auth.forgot && (
              <Button variant="link" onClick={onForgot}>{label('auth.login.forgot')}</Button>
            )}
          </Flex.Row>
          {error && <FormError error={error}>{label('form.submit.loginError')}</FormError>}
          {auth.submitPosition === AuthSubmitPosition.Form && (
            <Button type="submit" variant="primary" size="lg" justifyContent="center" margin="1rem 0"><span>{label('auth.login.signIn')}</span></Button>
          )}
          {/*
          <Flex.Row justifyContent="flex-end" margin="1rem 0">
            <Button type="submit" variant="primary" size="lg"><span>{label('auth.login.signIn')}</span></Button>
          </Flex.Row>
          */}
          {auth.register && (
            <>
              <Divider>{label('auth.login.notRegistered')}</Divider>
              <Flex.Row justifyContent="center">
                <Button variant="link" onClick={onRegister}>{label('auth.login.register')}</Button>
              </Flex.Row>
            </>
          )}
        </Flex.Col>
        <FormTester form={form} test={auth.loginTest || {
          email: 'john@appleseed.com',
          password: '123456Aa!',
        }} ></FormTester>
        {auth.submitPosition === AuthSubmitPosition.Bottom && (
          <Button type="submit" variant="primary" size="lg" position="sticky" bottom="1rem" justifyContent="center"><span>{label('auth.login.signIn')}</span></Button>
        )}
      </AuthForm>
    </Flex.Col>
  );
};