'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import '../../../fd-component-toolbox/client/framework/index.js';
import { routes } from '../../../../fd-toolbox/routing/routes.js';
import { Input } from '../../../fd-component-toolbox/input/Input.js';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { useForm, useFormState } from 'react-hook-form';
import { Label } from '../../../fd-component-toolbox/label/Label.js';
import { useRouter, useSearchParams } from '../../../meta/client/framework/hooks.js';
import { FormItem, FormControl, FormMessage, Form, FormField } from '../../../fd-component-toolbox/form/Form.js';
import { loginDisplayProps } from '../../../meta/auth/login.js';
import { Card, CardHeader, CardTitle, CardContent } from '../../../fd-component-toolbox/card/Card.js';
import { Icon, iconNames } from '../../../fd-component-toolbox/icon/Icon.js';
import { Link } from '../../../fd-component-toolbox/link/Link.js';
import { wellKnownUserProps } from '../../../../fd-toolbox/constants/common-user-fields.js';
import { useAsyncEffect } from '../../../../fd-toolbox/hooks/use-async-effect.js';
import { getOAuthProvider, handleOAuth, onLoginSubmit, getLoginButtonId, isFullSizeOAuthButton } from './LoginForm.funcs.js';
import { useSetTitle } from '../../../meta/page/use-set-title.js';
import { elements } from '../../../../fd-toolbox/constants/elements.js';
import { elementSuffixes } from '../../../../fd-toolbox/constants/element-suffixes.js';
import { getLoginState } from '../../../../fd-toolbox/auth/internal-login-states.js';
import { cn } from '../../../../fd-toolbox/lib/utils.js';
import { useAuth } from '../../providers/auth-provider/AuthProvider.js';
import { useTheme } from '../../providers/ThemeProvider/ThemeProvider.js';
import { themes } from '../../menu/themes.js';
import { auths } from '../../../../fd-toolbox-core/server/constants/auth-constants.js';
import { formMethods } from '../../../../base-repo/constants/tools-constants.js';
import { oauthCallbackQueryParams } from '../../../../base-repo/constants/internal-query-constants.js';
import FrameworkImage from 'next/image.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const pageTitle = "Sign In";
function LoginForm(t0) {
  const $ = c(40);
  const {
    oAuthLoginConfigs,
    hideSignUpLink
  } = t0;
  const [hidePassword, setHidePassword] = useState(true);
  const [isAuthInit, setIsAuthInit] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const {
    appliedTheme
  } = useTheme();
  const imgSrc = appliedTheme === themes.light ? themes.lightLoginImage : themes.darkLoginImage;
  useSetTitle(pageTitle);
  const context = useAuth();
  const router = useRouter();
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = {
      defaultValues: {
        email: auths.defaultEmail,
        password: auths.defaultPwd
      },
      mode: formMethods.onChange
    };
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const form = useForm(t1);
  let t2;
  if ($[1] !== form.control) {
    t2 = {
      control: form.control
    };
    $[1] = form.control;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  const formState = useFormState(t2);
  const searchParams = useSearchParams();
  let t3;
  if ($[3] !== searchParams) {
    t3 = searchParams.get(oauthCallbackQueryParams.code);
    $[3] = searchParams;
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  const getCodeParam = t3;
  let t4;
  if ($[5] !== oAuthLoginConfigs || $[6] !== searchParams) {
    t4 = getOAuthProvider(searchParams, oAuthLoginConfigs);
    $[5] = oAuthLoginConfigs;
    $[6] = searchParams;
    $[7] = t4;
  } else {
    t4 = $[7];
  }
  const oAuthProvider = t4;
  let t5;
  if ($[8] !== context || $[9] !== getCodeParam || $[10] !== isAuthInit || $[11] !== oAuthLoginConfigs || $[12] !== oAuthProvider || $[13] !== router) {
    t5 = async () => {
      if (!isAuthInit) {
        setIsAuthInit(true);
        setIsSubmitting(true);
        if (getCodeParam && oAuthProvider && oAuthLoginConfigs) {
          await handleOAuth(oAuthProvider, getCodeParam, oAuthLoginConfigs, router);
          context.setLoginState?.(getLoginState());
        }
        setIsSubmitting(false);
      }
    };
    $[8] = context;
    $[9] = getCodeParam;
    $[10] = isAuthInit;
    $[11] = oAuthLoginConfigs;
    $[12] = oAuthProvider;
    $[13] = router;
    $[14] = t5;
  } else {
    t5 = $[14];
  }
  let t6;
  if ($[15] !== getCodeParam || $[16] !== isAuthInit || $[17] !== oAuthLoginConfigs || $[18] !== oAuthProvider || $[19] !== router) {
    t6 = [isAuthInit, getCodeParam, oAuthProvider, oAuthLoginConfigs, router];
    $[15] = getCodeParam;
    $[16] = isAuthInit;
    $[17] = oAuthLoginConfigs;
    $[18] = oAuthProvider;
    $[19] = router;
    $[20] = t6;
  } else {
    t6 = $[20];
  }
  useAsyncEffect(t5, t6);
  let t7;
  if ($[21] !== context || $[22] !== form || $[23] !== formState.isValid || $[24] !== hidePassword || $[25] !== hideSignUpLink || $[26] !== imgSrc || $[27] !== isSubmitting || $[28] !== oAuthLoginConfigs || $[29] !== router) {
    let t8;
    if ($[31] !== context || $[32] !== isSubmitting || $[33] !== router) {
      t8 = async data => {
        await onLoginSubmit(data, isSubmitting, setIsSubmitting, router, context.setLoginState);
      };
      $[31] = context;
      $[32] = isSubmitting;
      $[33] = router;
      $[34] = t8;
    } else {
      t8 = $[34];
    }
    let t9;
    if ($[35] !== isSubmitting) {
      t9 = t10 => {
        const {
          field
        } = t10;
        return jsx(FormItem, {
          children: jsxs("div", {
            className: "w-full py-1",
            children: [jsx(Label, {
              children: loginDisplayProps.email
            }), jsx(FormControl, {
              children: jsx(Input, {
                ...field,
                inputId: elements.login.emailInput + elementSuffixes.input,
                placeholder: loginDisplayProps.email,
                showClearIcon: !isSubmitting,
                disabled: isSubmitting
              })
            }), jsx(FormMessage, {})]
          })
        });
      };
      $[35] = isSubmitting;
      $[36] = t9;
    } else {
      t9 = $[36];
    }
    let t10;
    if ($[37] !== hidePassword || $[38] !== isSubmitting) {
      t10 = t11 => {
        const {
          field: field_0
        } = t11;
        return jsx(FormItem, {
          children: jsxs("div", {
            className: "w-full py-1",
            children: [jsxs("div", {
              className: "flex items-center justify-between",
              children: [jsx(Label, {
                children: loginDisplayProps.password
              }), jsx(Link, {
                id: elements.login.forgotPasswordButton,
                className: "text-muted-foreground inline-block text-xs",
                href: routes.forgotPassword,
                children: "Forgot password?"
              })]
            }), jsxs("div", {
              children: [jsx(FormControl, {
                children: jsx(Input, {
                  ...field_0,
                  value: field_0.value ?? "",
                  inputId: elements.login.passwordInput + elementSuffixes.input,
                  placeholder: loginDisplayProps.password,
                  type: hidePassword ? "password" : "text",
                  showClearIcon: !isSubmitting,
                  disabled: isSubmitting,
                  children: jsx(Button, {
                    variant: "icon",
                    size: "icon",
                    type: "button",
                    tabIndex: -1,
                    className: "w-6",
                    disabled: isSubmitting,
                    children: hidePassword ? jsx("div", {
                      onClick: () => setHidePassword(_temp),
                      children: jsx(Icon, {
                        name: iconNames.visibility
                      })
                    }) : jsx("div", {
                      onClick: () => setHidePassword(_temp2),
                      children: jsx(Icon, {
                        name: iconNames.visibilityOff
                      })
                    })
                  })
                })
              }), jsx(FormMessage, {})]
            })]
          })
        });
      };
      $[37] = hidePassword;
      $[38] = isSubmitting;
      $[39] = t10;
    } else {
      t10 = $[39];
    }
    t7 = jsxs("div", {
      className: "relative h-screen w-full overflow-hidden",
      children: [jsx(FrameworkImage, {
        src: imgSrc,
        alt: "Forest",
        fill: true,
        className: "object-cover",
        priority: true
      }), jsx("div", {
        className: "absolute inset-0 flex items-center justify-center",
        children: jsxs(Card, {
          className: "mx-auto grid w-80 gap-6 rounded-lg p-6 shadow-lg",
          children: [jsx(CardHeader, {
            className: "grid gap-2 p-0 text-center",
            children: jsx(CardTitle, {
              className: "text-3xl font-bold",
              children: "Sign In"
            })
          }), jsxs(CardContent, {
            className: "p-0",
            children: [oAuthLoginConfigs && oAuthLoginConfigs.length > 0 && jsx("div", {
              className: "grid grid-cols-2 gap-3",
              children: oAuthLoginConfigs.map((oauthConfig, index) => jsxs(Button, {
                className: cn("flex w-full items-center gap-1", isFullSizeOAuthButton(oAuthLoginConfigs, index) && "col-span-2"),
                id: getLoginButtonId(oauthConfig.oAuthProvider),
                variant: "outline",
                onClick: oauthConfig.onLogin,
                disabled: isSubmitting,
                children: [jsx(Icon, {
                  name: oauthConfig.iconName
                }), oauthConfig.buttonText]
              }, `${oauthConfig.buttonText}_${oauthConfig.iconName}`))
            }), oAuthLoginConfigs && oAuthLoginConfigs.length > 0 && jsxs("div", {
              className: "flex items-center gap-2 pt-3",
              children: [jsx("hr", {
                className: "w-full"
              }), jsx("span", {
                className: "text-muted-foreground text-xs text-nowrap",
                children: "OR CONTINUE WITH"
              }), jsx("hr", {
                className: "w-full"
              })]
            }), jsx(Form, {
              ...form,
              children: jsxs("form", {
                onSubmit: form.handleSubmit(t8),
                children: [jsx(FormField, {
                  control: form.control,
                  name: wellKnownUserProps.email,
                  render: t9
                }), jsx(FormField, {
                  control: form.control,
                  name: wellKnownUserProps.password,
                  render: t10
                }), jsx("div", {
                  className: "flex w-full justify-center gap-1 px-1 pt-2",
                  children: !hideSignUpLink && jsxs(Fragment, {
                    children: [jsx("p", {
                      className: "text-sm",
                      children: "Don't have an account?"
                    }), jsx(Link, {
                      className: "text-muted-foreground inline-block text-sm",
                      href: routes.register,
                      children: "Sign Up"
                    })]
                  })
                }), jsx(Button, {
                  className: "mt-4 mr-4 flex w-full items-center justify-center",
                  id: elements.login.loginButton,
                  disabled: !formState.isValid || isSubmitting,
                  type: "submit",
                  children: isSubmitting ? jsxs(Fragment, {
                    children: [jsx("div", {
                      className: "mr-2 size-4 animate-spin rounded-full border-2 border-inherit border-r-transparent"
                    }), "Signing in..."]
                  }) : "Sign In"
                })]
              })
            })]
          })]
        })
      })]
    });
    $[21] = context;
    $[22] = form;
    $[23] = formState.isValid;
    $[24] = hidePassword;
    $[25] = hideSignUpLink;
    $[26] = imgSrc;
    $[27] = isSubmitting;
    $[28] = oAuthLoginConfigs;
    $[29] = router;
    $[30] = t7;
  } else {
    t7 = $[30];
  }
  return t7;
}
function _temp2(prev_0) {
  return !prev_0;
}
function _temp(prev) {
  return !prev;
}
__name(LoginForm, "LoginForm");

export { LoginForm };
