import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { router } from "@inertiajs/core";
import { useForm, Link } from "@inertiajs/react";
import classNames from "classnames";
import { useState, useRef } from "react";
import { u as useRoute } from "../app.js";
import { A as ActionMessage } from "./ActionMessage-s_mcCJ3s.js";
import { F as FormSection } from "./FormSection-DI6t3wFC.js";
import { I as InputError, T as TextInput } from "./TextInput-CMJy2hIv.js";
import { I as InputLabel } from "./InputLabel-DhqxoV6M.js";
import { P as PrimaryButton } from "./PrimaryButton-C2B8UWiv.js";
import { S as SecondaryButton } from "./SecondaryButton-G68tKuYQ.js";
import { u as useTypedPage } from "./useTypedPage-Do3SqtsL.js";
import "axios";
import "lodash";
import "react-dom/client";
import "@headlessui/react";
import "./SectionTitle-DnuUNpyS.js";
function UpdateProfileInformationForm({ user }) {
  const form = useForm({
    _method: "PUT",
    name: user.name,
    email: user.email,
    photo: null
  });
  const route = useRoute();
  const [photoPreview, setPhotoPreview] = useState(null);
  const photoRef = useRef(null);
  const page = useTypedPage();
  const [verificationLinkSent, setVerificationLinkSent] = useState(false);
  function updateProfileInformation() {
    form.post(route("user-profile-information.update"), {
      errorBag: "updateProfileInformation",
      preserveScroll: true,
      onSuccess: () => clearPhotoFileInput()
    });
  }
  function selectNewPhoto() {
    var _a;
    (_a = photoRef.current) == null ? void 0 : _a.click();
  }
  function updatePhotoPreview() {
    var _a, _b;
    const photo = (_b = (_a = photoRef.current) == null ? void 0 : _a.files) == null ? void 0 : _b[0];
    if (!photo) {
      return;
    }
    form.setData("photo", photo);
    const reader = new FileReader();
    reader.onload = (e) => {
      var _a2;
      setPhotoPreview((_a2 = e.target) == null ? void 0 : _a2.result);
    };
    reader.readAsDataURL(photo);
  }
  function deletePhoto() {
    router.delete(route("current-user-photo.destroy"), {
      preserveScroll: true,
      onSuccess: () => {
        setPhotoPreview(null);
        clearPhotoFileInput();
      }
    });
  }
  function clearPhotoFileInput() {
    var _a;
    if ((_a = photoRef.current) == null ? void 0 : _a.value) {
      photoRef.current.value = "";
      form.setData("photo", null);
    }
  }
  return /* @__PURE__ */ jsxs(
    FormSection,
    {
      onSubmit: updateProfileInformation,
      title: "Profile Information",
      description: `Update your account's profile information and email address.`,
      renderActions: () => /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(ActionMessage, { on: form.recentlySuccessful, className: "mr-3", children: "Saved." }),
        /* @__PURE__ */ jsx(
          PrimaryButton,
          {
            className: classNames({ "opacity-25": form.processing }),
            disabled: form.processing,
            children: "Save"
          }
        )
      ] }),
      children: [
        page.props.jetstream.managesProfilePhotos ? /* @__PURE__ */ jsxs("div", { className: "col-span-6 sm:col-span-4", children: [
          /* @__PURE__ */ jsx(
            "input",
            {
              type: "file",
              className: "hidden",
              ref: photoRef,
              onChange: updatePhotoPreview
            }
          ),
          /* @__PURE__ */ jsx(InputLabel, { htmlFor: "photo", value: "Photo" }),
          photoPreview ? (
            // <!-- New Profile Photo Preview -->
            /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
              "span",
              {
                className: "block rounded-full w-20 h-20",
                style: {
                  backgroundSize: "cover",
                  backgroundRepeat: "no-repeat",
                  backgroundPosition: "center center",
                  backgroundImage: `url('${photoPreview}')`
                }
              }
            ) })
          ) : (
            // <!-- Current Profile Photo -->
            /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
              "img",
              {
                src: user.profile_photo_url,
                alt: user.name,
                className: "rounded-full h-20 w-20 object-cover"
              }
            ) })
          ),
          /* @__PURE__ */ jsx(
            SecondaryButton,
            {
              className: "mt-2 mr-2",
              type: "button",
              onClick: selectNewPhoto,
              children: "Select A New Photo"
            }
          ),
          user.profile_photo_path ? /* @__PURE__ */ jsx(
            SecondaryButton,
            {
              type: "button",
              className: "mt-2",
              onClick: deletePhoto,
              children: "Remove Photo"
            }
          ) : null,
          /* @__PURE__ */ jsx(InputError, { message: form.errors.photo, className: "mt-2" })
        ] }) : null,
        /* @__PURE__ */ jsxs("div", { className: "col-span-6 sm:col-span-4", children: [
          /* @__PURE__ */ jsx(InputLabel, { htmlFor: "name", value: "Name" }),
          /* @__PURE__ */ jsx(
            TextInput,
            {
              id: "name",
              type: "text",
              className: "mt-1 block w-full",
              value: form.data.name,
              onChange: (e) => form.setData("name", e.currentTarget.value),
              autoComplete: "name"
            }
          ),
          /* @__PURE__ */ jsx(InputError, { message: form.errors.name, className: "mt-2" })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "col-span-6 sm:col-span-4", children: [
          /* @__PURE__ */ jsx(InputLabel, { htmlFor: "email", value: "Email" }),
          /* @__PURE__ */ jsx(
            TextInput,
            {
              id: "email",
              type: "email",
              className: "mt-1 block w-full",
              value: form.data.email,
              onChange: (e) => form.setData("email", e.currentTarget.value)
            }
          ),
          /* @__PURE__ */ jsx(InputError, { message: form.errors.email, className: "mt-2" }),
          page.props.jetstream.hasEmailVerification && user.email_verified_at === null ? /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs("p", { className: "text-sm mt-2 dark:text-white", children: [
              "Your email address is unverified.",
              /* @__PURE__ */ jsx(
                Link,
                {
                  href: route("verification.send"),
                  method: "post",
                  as: "button",
                  className: "underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800",
                  onClick: (e) => {
                    e.preventDefault();
                    setVerificationLinkSent(true);
                  },
                  children: "Click here to re-send the verification email."
                }
              )
            ] }),
            verificationLinkSent && /* @__PURE__ */ jsx("div", { className: "mt-2 font-medium text-sm text-green-600 dark:text-green-400", children: "A new verification link has been sent to your email address." })
          ] }) : null
        ] })
      ]
    }
  );
}
export {
  UpdateProfileInformationForm as default
};