import React from 'react';
import { render, screen } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import withReactRouterV3Compatibility, { findRoute } from "../withReactRouterV3Compatibility"; // Update the import path as needed
import { Router } from 'react-router';
import { createMemoryHistory } from 'history';

// Mock componentRoutes
const componentRoutes = [
  {
    path: "/home",
    component: () => <div>Home Component</div>,
    routes: [
      {
        path: "/home/sub",
        component: () => <div>Sub Home Component</div>
      }
    ]
  },
  {
    path: "/about",
    component: () => <div>About Component</div>
  }
];

jest.mock("../../routes", () => componentRoutes);

// Mock Component for testing
const TestComponent = ({ router, params, route, location }) => (
  <div>
    <div data-testid="router">{JSON.stringify(router)}</div>
    <div data-testid="params">{JSON.stringify(params)}</div>
    <div data-testid="route">{JSON.stringify(route)}</div>
    <div data-testid="location">{JSON.stringify(location)}</div>
  </div>
);

const EnhancedComponent = withReactRouterV3Compatibility(TestComponent);

describe("withReactRouterV3Compatibility", () => {
  // Existing tests for query parameters
  it("converts URL search parameters to an object", () => {
    render(
      <MemoryRouter initialEntries={["/home?user=123&filter=active"]}>
        <EnhancedComponent match={"/home"} />
      </MemoryRouter>
    );

    const locationText = screen.getByTestId("location").textContent;
    expect(locationText).toContain('"user":"123"');
    expect(locationText).toContain('"filter":"active"');
  });

  it("supports multiple values for the same query parameter", () => {
    render(
      <MemoryRouter initialEntries={["/home?user=123&user=456"]}>
        <EnhancedComponent />
      </MemoryRouter>
    );

    const locationText = screen.getByTestId("location").textContent;
    expect(locationText).toContain('"user":["123","456"]');
  });
});


describe('findRoute function', () => {
  // Setup sample routes array
  const routes = [
    { path: '/home', component: 'HomeComponent' },
    { 
      path: '/about', 
      component: 'AboutComponent', 
      routes: [
        { path: '/about/team', component: 'TeamComponent' },
        { path: '/about/contact', component: 'ContactComponent' }
      ]
    },
    {
      path: '/services',
      routes: [
        {
          path: '/services/design',
          routes: [
            { path: '/services/design/web', component: 'WebDesignComponent' }
          ]
        }
      ]
    }
  ];

  it('finds a top-level route', () => {
    const path = '/home';
    const result = findRoute(routes, path);
    expect(result).toEqual({ path: '/home', component: 'HomeComponent' });
  });

  it('finds a nested route', () => {
    const path = '/about/contact';
    const result = findRoute(routes, path);
    expect(result).toEqual({ path: '/about/contact', component: 'ContactComponent' });
  });

  it('returns undefined if no route is found', () => {
    const path = '/non-existent';
    const result = findRoute(routes, path);
    expect(result).toBeUndefined();
  });

  it('handles routes without a path property safely', () => {
    const badRoutes = [
      { component: 'NoPathComponent' },
      { path: '/valid', component: 'ValidComponent' }
    ];
    const path = '/valid';
    const result = findRoute(badRoutes, path);
    expect(result).toEqual({ path: '/valid', component: 'ValidComponent' });
  });

  it('finds a deeply nested route', () => {
    const path = '/services/design/web';
    const result = findRoute(routes, path);
    expect(result).toEqual({ path: '/services/design/web', component: 'WebDesignComponent' });
  });

  it('does not find a route if null values are present', () => {
    const nullRoutes = [
      null,
      { path: '/null-route', component: 'NullComponent' }
    ];
    const path = '/null-route';
    const result = findRoute(nullRoutes, path);
    expect(result).toEqual({ path: '/null-route', component: 'NullComponent' });
  });
});