'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { getUserFormMode, getUserFormDefaultFormValues, getUserFormValidationSchema, getUserHandler, onUserFormUserSubmission, onTogglePasswordVisibility } from './EditUserForm.funcs.js';
import { Input } from '../../fd-component-toolbox/input/Input.js';
import { Button } from '../../fd-component-toolbox/button/Button.js';
import { FormItem, FormControl, FormMessage, Form, FormField } from '../../fd-component-toolbox/form/Form.js';
import { Switch } from '../../fd-component-toolbox/switch/Switch.js';
import { wellKnownUserProps } from '../../../fd-toolbox/constants/common-user-fields.js';
import { useSetTitle } from '../../meta/page/use-set-title.js';
import { resourceNames } from '../../../fd-toolbox/resources/resource-names.js';
import { iconNames, Icon } from '../../fd-component-toolbox/icon/Icon.js';
import { SubHeading } from '../../fd-component-toolbox/subheading/SubHeading.js';
import { userDisplayProps, userDtoProps } from '../user-dto.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 {0}";
function onRenderPasswordIcon(field, hidePassword, hideRepeatPassword, togglePasswordVisibility) {
  const isHidden = field === userDisplayProps.password ? hidePassword : hideRepeatPassword;
  const icon = isHidden ? iconNames.visibilityOff : iconNames.visibility;
  return /* @__PURE__ */jsx(Icon, {
    onClick: () => togglePasswordVisibility(field),
    className: "cursor-pointer",
    name: icon
  });
}
__name(onRenderPasswordIcon, "onRenderPasswordIcon");
function EditUserForm(t0) {
  const $ = c(9);
  const {
    userData,
    onCancelClick
  } = t0;
  const [hidePassword, setHidePassword] = useState(true);
  const [hideRepeatPassword, setHideRepeatPassword] = useState(true);
  let t1;
  if ($[0] !== userData?.firstName) {
    t1 = pageTitle.replace("{0}", userData?.firstName ?? resourceNames.user);
    $[0] = userData?.firstName;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  useSetTitle(t1);
  const mode = getUserFormMode(userData?.id);
  const form = useForm({
    resolver: zodResolver(getUserFormValidationSchema(mode)),
    mode: formMethods.onChange,
    defaultValues: getUserFormDefaultFormValues(userData)
  });
  const userHandler = getUserHandler(mode);
  const onSubmit = __name(updatedUserData => onUserFormUserSubmission(userHandler, updatedUserData, userData), "onSubmit");
  let t2;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = field => onTogglePasswordVisibility(field, setHidePassword, setHideRepeatPassword);
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  const togglePasswordVisibility = __name(t2, "togglePasswordVisibility");
  const renderPasswordIcon = __name(field_0 => onRenderPasswordIcon(field_0, hidePassword, hideRepeatPassword, togglePasswordVisibility), "renderPasswordIcon");
  let t3;
  if ($[3] !== form.formState.errors) {
    t3 = t4 => {
      const {
        field: field_1
      } = t4;
      return jsx(FormItem, {
        children: jsxs("div", {
          className: "w-full",
          children: [jsx(FormControl, {
            children: jsx(Input, {
              ...field_1,
              inputId: "FirstNameInput",
              type: "text",
              label: userDisplayProps.firstName,
              showClearIcon: true,
              "aria-invalid": !!form.formState.errors.firstName
            })
          }), jsx(FormMessage, {})]
        })
      });
    };
    $[3] = form.formState.errors;
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  let t4;
  if ($[5] !== form.formState.errors) {
    t4 = t5 => {
      const {
        field: field_2
      } = t5;
      return jsx(FormItem, {
        children: jsxs("div", {
          className: "w-full",
          children: [jsx(FormControl, {
            children: jsx(Input, {
              ...field_2,
              inputId: "LastNameInput",
              type: "text",
              label: userDisplayProps.lastName,
              showClearIcon: true,
              "aria-invalid": !!form.formState.errors.lastName
            })
          }), jsx(FormMessage, {})]
        })
      });
    };
    $[5] = form.formState.errors;
    $[6] = t4;
  } else {
    t4 = $[6];
  }
  let t5;
  if ($[7] !== form.formState.errors) {
    t5 = t6 => {
      const {
        field: field_3
      } = t6;
      return jsx(FormItem, {
        children: jsxs("div", {
          className: "w-full",
          children: [jsx(FormControl, {
            children: jsx(Input, {
              ...field_3,
              value: field_3.value,
              inputId: "EmailInput",
              label: userDisplayProps.email,
              showClearIcon: true,
              "aria-invalid": !!form.formState.errors.email
            })
          }), jsx(FormMessage, {})]
        })
      });
    };
    $[7] = form.formState.errors;
    $[8] = t5;
  } else {
    t5 = $[8];
  }
  return jsx("div", {
    className: "flex w-full flex-col items-center justify-center",
    children: jsx(Form, {
      ...form,
      children: jsxs("form", {
        className: "mt-4 flex w-full flex-col",
        onSubmit: form.handleSubmit(onSubmit),
        children: [jsx(SubHeading, {
          className: "text-foreground mb-10 text-lg",
          children: "User"
        }), jsxs("div", {
          className: "mb-5 flex justify-start gap-2",
          children: [jsx(Button, {
            id: "addButton",
            disabled: !form.formState.isValid,
            type: "submit",
            children: "Save"
          }), jsx(Button, {
            type: "button",
            onClick: onCancelClick,
            id: "cancelButton",
            variant: "outline",
            children: "Cancel"
          })]
        }), jsxs("div", {
          className: "flex flex-col gap-3",
          children: [jsxs("div", {
            className: "flex w-full flex-col gap-x-8 gap-y-2.5",
            children: [jsx(FormField, {
              control: form.control,
              name: userDtoProps.firstName,
              render: t3
            }), jsx(FormField, {
              control: form.control,
              name: wellKnownUserProps.lastName,
              render: t4
            }), jsx(FormField, {
              control: form.control,
              name: wellKnownUserProps.email,
              render: t5
            })]
          }), jsxs("div", {
            className: "flex w-full flex-col gap-x-8 gap-y-2.5",
            children: [jsx(FormField, {
              control: form.control,
              name: wellKnownUserProps.password,
              render: t6 => {
                const {
                  field: field_4
                } = t6;
                return jsx(FormItem, {
                  children: jsxs("div", {
                    className: "w-full",
                    children: [jsx(FormControl, {
                      children: jsx(Input, {
                        ...field_4,
                        inputId: "editUserPasswordInput",
                        type: hidePassword ? "password" : "text",
                        label: userDisplayProps.password,
                        showClearIcon: true,
                        "aria-invalid": !!form.formState.errors.password,
                        children: jsx(Button, {
                          variant: "icon",
                          size: "icon",
                          type: "button",
                          tabIndex: -1,
                          className: "w-6",
                          children: renderPasswordIcon("Password")
                        })
                      })
                    }), jsx(FormMessage, {})]
                  })
                });
              }
            }), jsx(FormField, {
              control: form.control,
              name: wellKnownUserProps.repeatPassword,
              render: t7 => {
                const {
                  field: field_5
                } = t7;
                return jsx(FormItem, {
                  children: jsxs("div", {
                    className: "w-full",
                    children: [jsx(FormControl, {
                      children: jsx(Input, {
                        ...field_5,
                        inputId: "repeatPasswordInput",
                        type: hideRepeatPassword ? "password" : "text",
                        label: userDisplayProps.repeatPassword,
                        showClearIcon: true,
                        "aria-invalid": !!form.formState.errors.repeatPassword,
                        children: jsx(Button, {
                          variant: "icon",
                          size: "icon",
                          type: "button",
                          tabIndex: -1,
                          className: "w-6",
                          children: renderPasswordIcon(wellKnownUserProps.repeatPassword)
                        })
                      })
                    }), jsx(FormMessage, {})]
                  })
                });
              }
            })]
          })]
        }), jsx(FormField, {
          control: form.control,
          name: wellKnownUserProps.isDisabled,
          render: _temp
        })]
      })
    })
  });
}
function _temp(t0) {
  const {
    field: field_6
  } = t0;
  return jsx(FormItem, {
    children: jsx("div", {
      className: "w-full",
      children: jsx(Switch, {
        label: userDisplayProps.isDisabled,
        onCheckedChange: field_6.onChange,
        name: field_6.name,
        checked: field_6.value
      })
    })
  });
}
__name(EditUserForm, "EditUserForm");

export { EditUserForm as default };
