// File Path: monorepo/web/frontend/src/pages/Admin/Staff/Detail/More/Avatar/Page.jsx

import React, { useCallback, memo } from "react";
import { BriefcaseIcon, CameraIcon } from "@heroicons/react/24/outline";
import { useStaffManager } from "../../../../../../services/Services";
import { UIXThemeProvider } from "../../../../../../components/UIX";
import { EntityActionUploadPage } from "../../../../../../components/business/views";

const AdminStaffDetailMoreAvatarPageContent = memo(
  function AdminStaffDetailMoreAvatarPageContent() {
    const staffManager = useStaffManager();

    // Get staff detail function that uses the hook - wrapped with useCallback to prevent infinite loops
    const getStaffDetailWithManager = useCallback(
      async (staffId, onUnauthorized) => {
        return new Promise((resolve, reject) => {
          staffManager.getStaffDetailWithCallbacks(
            staffId,
            (staffData) => resolve(staffData), // onSuccess
            (error) => reject(error), // onError
            () => {}, // onDone
            onUnauthorized, // onUnauthorized
          );
        });
      },
      [staffManager],
    );

    // Handle avatar upload action
    const handleAvatarUpload = async (staffId, file, onUnauthorized) => {
      const formData = new FormData();
      formData.append("staff_id", staffId);
      formData.append("file", file);
      await staffManager.uploadStaffAvatar(formData, onUnauthorized);
    };

    return (
      <EntityActionUploadPage
        entityIcon={BriefcaseIcon}
        entityType="Staff Member"
        entityTypePlural="Staff"
        basePath="/admin/staff"
        entityParamName="aid"
        entityManager={staffManager}
        getEntityDetail={getStaffDetailWithManager}
        actionIcon={CameraIcon}
        actionName="Avatar"
        actionDescription="Upload Photo - Change Staff Photo"
        uploadWarningPoints={[
          "Uploading a new photo will replace the existing one",
          "The previous photo cannot be recovered",
          "The new photo will be visible immediately after upload",
        ]}
        acceptedFileTypes={[
          "image/jpeg",
          "image/jpg",
          "image/png",
          "image/gif",
        ]}
        maxFileSizeMB={10}
        fileTypeDescription="JPEG, PNG, GIF"
        uploadButtonText="Save Photo"
        uploadButtonVariant="success"
        onUploadExecute={handleAvatarUpload}
        successMessage="Photo has been successfully updated"
        redirectPath="/admin/staff"
      />
    );
  },
);

function AdminStaffDetailMoreAvatarPage() {
  return (
    <UIXThemeProvider>
      <AdminStaffDetailMoreAvatarPageContent />
    </UIXThemeProvider>
  );
}

export default AdminStaffDetailMoreAvatarPage;
