'use strict';
'use client';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { Form, FormField, FormItem, FormControl, FormMessage } from '../../fd-component-toolbox/form/Form.js';
import { Label } from '../../fd-component-toolbox/label/Label.js';
import { Input } from '../../fd-component-toolbox/input/Input.js';
import { Button } from '../../fd-component-toolbox/button/Button.js';
import { forgotPasswordSchema, getForgotPasswordSuccessMessageId, getForgotPasswordEmailInputId, getForgotPasswordSendButtonId, onForgotPassword } from './ForgotPasswordForm.funcs.js';
import { routes } from '../../../fd-toolbox/routing/routes.js';
import { zodResolver } from '@hookform/resolvers/zod';
import { Link } from '../../fd-component-toolbox/link/Link.js';
import { wellKnownUserProps } from '../../../fd-toolbox/constants/common-user-fields.js';
import { userDisplayProps } from '../user-dto.js';
import { Icon, iconNames } from '../../fd-component-toolbox/icon/Icon.js';
import { SubHeading } from '../../fd-component-toolbox/subheading/SubHeading.js';
import { useSetTitle } from '../../meta/page/use-set-title.js';
import { forgotPasswordMessages } from './forgot-password-messages-constants.js';
import { formMethods } from '../../../base-repo/constants/tools-constants.js';
import { first } from '../../../fd-toolbox/server/collections/single-funcs.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const pageTitle = "Forgot Password";
function ForgotPasswordForm() {
  useSetTitle(pageTitle);
  const form = useForm({
    mode: formMethods.onChange,
    resolver: zodResolver(forgotPasswordSchema)
  });
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
  const email = form.watch(wellKnownUserProps.email);
  return /* @__PURE__ */jsx("div", {
    className: "h-screen w-full lg:grid lg:min-h-152 xl:min-h-11",
    children: /* @__PURE__ */jsx("div", {
      className: "flex items-center justify-center py-12",
      children: /* @__PURE__ */jsx("div", {
        className: "mx-auto grid w-80 gap-6",
        children: showSuccessMessage ? /* @__PURE__ */jsxs("div", {
          className: "flex flex-col items-center text-center",
          id: getForgotPasswordSuccessMessageId(),
          children: [/* @__PURE__ */jsx(Icon, {
            name: iconNames.envelopeClosed,
            className: "size-24"
          }), /* @__PURE__ */jsx(SubHeading, {
            className: "text-foreground mt-3 text-4xl font-bold",
            children: forgotPasswordMessages.successTitle
          }), /* @__PURE__ */jsxs("p", {
            className: "mt-6",
            children: [first(forgotPasswordMessages.successParagraph1.split("{email}")), /* @__PURE__ */jsx("span", {
              className: "font-bold",
              children: email
            }), forgotPasswordMessages.successParagraph1.split("{email}")[1]]
          }), /* @__PURE__ */jsx("p", {
            className: "mt-4",
            children: forgotPasswordMessages.successParagraph2
          }), /* @__PURE__ */jsx("p", {
            className: "mt-4",
            children: /* @__PURE__ */jsxs(Link, {
              href: routes.login,
              children: [forgotPasswordMessages.successLinkTextStart, /* @__PURE__ */jsx("span", {
                className: "font-bold underline",
                children: forgotPasswordMessages.successLinkTextInner
              })]
            })
          })]
        }) : /* @__PURE__ */jsxs(Fragment, {
          children: [/* @__PURE__ */jsx("div", {
            className: "grid gap-2 text-center",
            children: /* @__PURE__ */jsx(SubHeading, {
              className: "text-3xl font-bold",
              children: "Forgot Password"
            })
          }), /* @__PURE__ */jsx(Form, {
            ...form,
            children: /* @__PURE__ */jsxs("form", {
              onSubmit: form.handleSubmit(data => onForgotPassword(data, setShowSuccessMessage)),
              children: [/* @__PURE__ */jsx(FormField, {
                control: form.control,
                name: wellKnownUserProps.email,
                render: ({
                  field
                }) => /* @__PURE__ */jsx(FormItem, {
                  children: /* @__PURE__ */jsxs("div", {
                    className: "w-full p-1",
                    children: [/* @__PURE__ */jsx(Label, {
                      className: form.formState.errors.email ? "text-destructive" : "",
                      children: userDisplayProps.email
                    }), /* @__PURE__ */jsx(FormControl, {
                      children: /* @__PURE__ */jsx(Input, {
                        ...field,
                        inputId: getForgotPasswordEmailInputId(),
                        placeholder: userDisplayProps.email,
                        showClearIcon: true,
                        className: form.formState.errors.email ? "border-red-500" : ""
                      })
                    }), /* @__PURE__ */jsx(FormMessage, {
                      children: form.formState.errors.email?.message
                    }), /* @__PURE__ */jsx("p", {
                      className: "mt-1 text-xs",
                      children: "Enter your e-mail and we will send you reset instructions!"
                    })]
                  })
                })
              }), /* @__PURE__ */jsx(Button, {
                className: "mt-4 mr-4 block w-full",
                id: getForgotPasswordSendButtonId(),
                disabled: !form.formState.isValid,
                type: "submit",
                children: "Send"
              })]
            })
          })]
        })
      })
    })
  });
}
__name(ForgotPasswordForm, "ForgotPasswordForm");

export { ForgotPasswordForm as default };
