'use strict';
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useRouter } from '../../meta/client/framework/hooks.js';
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 { Icon, iconNames } from '../../fd-component-toolbox/icon/Icon.js';
import { editPasswordLabels } from '../passwords/edit-password-dto.js';
import { wellKnownUserProps } from '../../../fd-toolbox/constants/common-user-fields.js';
import { useSetTitle } from '../../meta/page/use-set-title.js';
import { getEditPasswordFormCurrentPasswordInputId, getEditPasswordFormNewPasswordInputId, getEditPasswordFormEditButtonId, onEditPassword } from './EditPasswordForm.funcs.js';
import { formMethods } from '../../../base-repo/constants/tools-constants.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const pageTitle = "Edit Password";
function EditPasswordForm() {
  const [hidePassword, setHidePassword] = useState(true);
  useSetTitle(pageTitle);
  const form = useForm({
    defaultValues: {
      currentPassword: "",
      newPassword: ""
    },
    mode: formMethods.onChange
  });
  const currentPassword = form.watch(wellKnownUserProps.currentPassword);
  const newPassword = form.watch(wellKnownUserProps.newPassword);
  const router = useRouter();
  return /* @__PURE__ */jsx("div", {
    className: "flex size-full items-center justify-center py-12",
    children: /* @__PURE__ */jsxs("div", {
      className: "mx-auto grid w-80 gap-6",
      children: [/* @__PURE__ */jsx("div", {
        className: "grid gap-2 text-center",
        children: /* @__PURE__ */jsx("h1", {
          className: "text-3xl font-bold",
          children: "Change Password"
        })
      }), /* @__PURE__ */jsx(Form, {
        ...form,
        children: /* @__PURE__ */jsxs("form", {
          onSubmit: form.handleSubmit(data => onEditPassword(data, router)),
          children: [/* @__PURE__ */jsx(FormField, {
            control: form.control,
            name: wellKnownUserProps.currentPassword,
            render: ({
              field
            }) => /* @__PURE__ */jsx(FormItem, {
              children: /* @__PURE__ */jsxs("div", {
                className: "w-full py-1",
                children: [/* @__PURE__ */jsx(Label, {
                  children: editPasswordLabels.currentPassword
                }), /* @__PURE__ */jsx(FormControl, {
                  children: /* @__PURE__ */jsx(Input, {
                    ...field,
                    value: field.value ?? "",
                    inputId: getEditPasswordFormCurrentPasswordInputId(),
                    placeholder: editPasswordLabels.currentPassword,
                    type: hidePassword ? "password" : "text",
                    showClearIcon: true,
                    children: /* @__PURE__ */jsx(Button, {
                      variant: "icon",
                      size: "icon",
                      type: "button",
                      tabIndex: -1,
                      className: "w-6",
                      children: hidePassword ? /* @__PURE__ */jsx(Icon, {
                        name: iconNames.visibilityOff,
                        onClick: () => setHidePassword(prev => !prev)
                      }) : /* @__PURE__ */jsx(Icon, {
                        name: iconNames.visibility,
                        onClick: () => setHidePassword(prev_0 => !prev_0)
                      })
                    })
                  })
                }), /* @__PURE__ */jsx(FormMessage, {})]
              })
            })
          }), /* @__PURE__ */jsx(FormField, {
            control: form.control,
            name: wellKnownUserProps.newPassword,
            render: ({
              field: field_0
            }) => /* @__PURE__ */jsx(FormItem, {
              children: /* @__PURE__ */jsxs("div", {
                className: "w-full py-1",
                children: [/* @__PURE__ */jsx(Label, {
                  children: editPasswordLabels.newPassword
                }), /* @__PURE__ */jsx(FormControl, {
                  children: /* @__PURE__ */jsx(Input, {
                    ...field_0,
                    value: field_0.value ?? "",
                    inputId: getEditPasswordFormNewPasswordInputId(),
                    placeholder: editPasswordLabels.newPassword,
                    type: hidePassword ? "password" : "text",
                    showClearIcon: true
                  })
                }), /* @__PURE__ */jsx(FormMessage, {})]
              })
            })
          }), /* @__PURE__ */jsx(Button, {
            className: "mt-4 mr-4 block w-full",
            id: getEditPasswordFormEditButtonId(),
            disabled: !currentPassword || !newPassword,
            type: "submit",
            children: "Change"
          })]
        })
      })]
    })
  });
}
__name(EditPasswordForm, "EditPasswordForm");
EditPasswordForm.displayName = "EditPasswordForm";

export { EditPasswordForm as default };
