import React from "react";
import { render } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { Header } from ".";
const useNeighborhoodHeroMock = vi.fn();
vi.mock("~/sdks/NeighborhoodHero/context", () => ({
    useNeighborhoodHero: () => useNeighborhoodHeroMock(),
}));
describe("Header", () => {
    beforeEach(() => {
        vi.resetAllMocks();
    });
    it("does not render if loading", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: true,
        });
        const { queryByTestId } = render(React.createElement(Header, null));
        expect(queryByTestId("header-container")).toBeNull();
    });
    it("renders the header if not loading", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
        });
        const { getByTestId } = render(React.createElement(Header, null));
        expect(getByTestId("header-container")).toBeInTheDocument();
    });
    it("renders the header with background image when neighborhoodImage is available", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            neighborhoodImage: "https://example.com/image.jpg",
        });
        const { getByTestId } = render(React.createElement(Header, null));
        expect(getByTestId("header-container")).toHaveStyle('background-image: url("https://example.com/image.jpg")');
    });
    it("does not apply background image style when neighborhoodImage is null", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            neighborhoodImage: null,
        });
        const { getByTestId } = render(React.createElement(Header, null));
        expect(getByTestId("header-container")).not.toHaveStyle('background-image: url("https://example.com/image.jpg")');
    });
    it("renders the geography name as the title in english", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            locale: "en",
            geography: {
                name: {
                    en: "neighborhood_name_en",
                },
            },
        });
        const { getByTestId } = render(React.createElement(Header, null));
        expect(getByTestId("micro-location")).toHaveTextContent("neighborhood_name_en");
    });
    it("renders the geography name as the title in french", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            locale: "fr",
            geography: {
                name: {
                    fr: "neighborhood_name_fr",
                },
            },
        });
        const { getByTestId } = render(React.createElement(Header, null));
        expect(getByTestId("micro-location")).toHaveTextContent("neighborhood_name_fr");
    });
    it("does not render title content if geography is undefined", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            locale: "en",
            geography: undefined,
        });
        const { queryByTestId } = render(React.createElement(Header, null));
        expect(queryByTestId("micro-location")).toBeEmptyDOMElement();
    });
    it("does not render title content if geography name is undefined", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            locale: "en",
            geography: {
                name: undefined,
            },
        });
        const { queryByTestId } = render(React.createElement(Header, null));
        expect(queryByTestId("micro-location")).toBeEmptyDOMElement();
    });
    it("does not render title content if geography name for the current locale is undefined", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            locale: "en",
            geography: {
                name: {
                    fr: "neighborhood_name_fr",
                },
            },
        });
        const { queryByTestId } = render(React.createElement(Header, null));
        expect(queryByTestId("micro-location")).toBeEmptyDOMElement();
    });
    it("renders the macro location when geography level is less than 30 and city name is available", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            locale: "en",
            geography: {
                level: 10,
                city: {
                    en: "city_name_en",
                },
            },
        });
        const { getByTestId } = render(React.createElement(Header, null));
        expect(getByTestId("macro-location")).toHaveTextContent("city_name_en");
    });
    it("does not render the macro location when geography level is 30 or above", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            locale: "en",
            geography: {
                level: 30,
                city: {
                    en: "city_name_en",
                },
            },
        });
        const { queryByTestId } = render(React.createElement(Header, null));
        expect(queryByTestId("macro-location")).toBeNull();
    });
    it("does not render the macro location when city name is undefined", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            locale: "en",
            geography: {
                level: 10,
                city: undefined,
            },
        });
        const { queryByTestId } = render(React.createElement(Header, null));
        expect(queryByTestId("macro-location")).toBeNull();
    });
    it("does not render the macro location content when city name for the current locale is undefined", () => {
        useNeighborhoodHeroMock.mockReturnValue({
            isLoading: false,
            locale: "en",
            geography: {
                level: 10,
                city: {
                    fr: "city_name_fr",
                },
            },
        });
        const { queryByTestId } = render(React.createElement(Header, null));
        expect(queryByTestId("macro-location")).toBeEmptyDOMElement();
    });
});
//# sourceMappingURL=index.test.js.map