import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { expect, it, vi } from "vitest";

import { ProfileEditDialog } from "@/components/dashboard/profile/profile-edit-dialog";

const { updateProfile, updateProfileAvatar } = vi.hoisted(() => ({ updateProfile: vi.fn(), updateProfileAvatar: vi.fn() }));
vi.mock("next-intl", () => ({ useLocale: () => "en", useTranslations: () => (key: string) => key }));
vi.mock("@/components/dashboard/profile/profile-api", () => ({ updateProfile, updateProfileAvatar }));

it("submits supported fields and the selected avatar", async () => {
  updateProfile.mockResolvedValue({ id: 1 });
  updateProfileAvatar.mockResolvedValue({ id: 1 });
  const onOpenChange = vi.fn();
  render(<ProfileEditDialog open profile={{ id: 1, first_name: "Old", last_name: "Name", language: "en", linkedin_url: "https://linkedin.com/in/m" }} onOpenChange={onOpenChange} />);
  fireEvent.change(screen.getByLabelText("fields.firstName"), { target: { value: "Mohammed" } });
  fireEvent.change(screen.getByLabelText("fields.lastName"), { target: { value: "Alotaibi" } });
  const avatar = new File(["avatar"], "avatar.png", { type: "image/png" });
  fireEvent.change(document.querySelector('input[type="file"]')!, { target: { files: [avatar] } });
  fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
  await waitFor(() => expect(updateProfile).toHaveBeenCalledWith({ first_name: "Mohammed", last_name: "Alotaibi", language: "en", linkedin_url: "https://linkedin.com/in/m" }));
  expect(updateProfileAvatar).toHaveBeenCalledWith(avatar);
  expect(onOpenChange).toHaveBeenCalledWith(false);
});