import AccessibilityIcon from "@mui/icons-material/Accessibility";
import {fireEvent, render, screen} from "@testing-library/react";
import SidebarListItem from "@/components/layouts/Dashboard/Sidebar/SidebarListItem";
import MockAppWithProviders from "../../../../../../mocks/AppWithProvider";

describe('SidebarListItemComponent', () => {
    describe('Rendering', () => {
        it('should show sidebarlistitem name in sidebar', () => {
            const sampleItem={
                key: "sidebar.role-management",
                name : "role_management",
                type: "page",
                route: "/dashboard/role-management",
                icon: <AccessibilityIcon />,
                selected: false,
                permission: "manage_roles",
            }
            render(<MockAppWithProviders><SidebarListItem item={sampleItem} /></MockAppWithProviders>);
            expect(screen.getByText('مدیریت نقش ها')).toBeInTheDocument();
        });
        it('should show sidebarlistitem icon in sidebar', () => {
            const sampleItem={
                key: "sidebar.role-management",
                name : "role_management",
                type: "page",
                route: "/dashboard/role-management",
                icon: <AccessibilityIcon aria-label="Sidebar Icon"/>,
                selected: false,
                permission: "manage_roles",
            }
            render(<MockAppWithProviders><SidebarListItem item={sampleItem} /></MockAppWithProviders>);
            const iconElement = screen.getByLabelText("Sidebar Icon");
            expect(iconElement).toBeInTheDocument();
        });
        it('should have selected class for subitem', () => {
            const sampleItem={
                key: "sidebar.role-management",
                name : "role_management",
                type: "page",
                route: "/dashboard/role-management",
                icon: <AccessibilityIcon />,
                selected: true,
                permission: "manage_roles",
            }
            render(<MockAppWithProviders><SidebarListItem item={sampleItem} /></MockAppWithProviders>);
            const element = screen.getByText('مدیریت نقش ها');
            expect(element.parentElement.parentElement).toHaveClass('Mui-selected');
        });

        it('should not have selected class for subitem', () => {
            const sampleItem={
                key: "sidebar.role-management",
                name : "role_management",
                type: "menu",
                route: "/dashboard/role-management",
                icon: <AccessibilityIcon />,
                selected: false,
                permission: "manage_roles",
            }
            render(<MockAppWithProviders><SidebarListItem item={sampleItem} /></MockAppWithProviders>);
            const element = screen.getByText('مدیریت نقش ها');
            expect(element.parentElement.parentElement).not.toHaveClass('Mui-selected');
        });

        it('should show sidebarlistitem secondary in sidebar', () => {
            const sampleItem={
                key: "sidebar.role-management",
                name : "role_management",
                secondary: "between",
                type: "menu",
                route: "/dashboard/role-management",
                icon: <AccessibilityIcon />,
                selected: false,
                permission: "manage_roles",
            }
            render(<MockAppWithProviders><SidebarListItem item={sampleItem} /></MockAppWithProviders>);
            expect(screen.getByText('میان')).toBeInTheDocument();
        });

        it('should not show sidebarlistitem secondary in sidebar', () => {
            const sampleItem={
                key: "sidebar.role-management",
                name : "role_management",
                type: "menu",
                route: "/dashboard/role-management",
                icon: <AccessibilityIcon />,
                selected: false,
                permission: "manage_roles",
            }
            render(<MockAppWithProviders><SidebarListItem item={sampleItem} /></MockAppWithProviders>);
            expect(screen.queryByText('secondry')).not.toBeInTheDocument();
        });
    })
    describe('Behavior', () => {
        it('should call dispatch when hasSubItems is true and item is clicked', () => {
            const dispatchMock = jest.fn();
            const sampleItem={
                key: "sidebar.role-management",
                name : "role_management",
                type: "menu",
                route: "/dashboard/role-management",
                icon: <AccessibilityIcon />,
                selected: false,
                permission: "manage_roles",
                subItem :[
                    {
                        key: "greaterThan",
                        route: "/dashboard/role-management",
                        secondary: "between",
                        name : "sidebar.admin",
                        selected: true,
                        icon: <AccessibilityIcon />,
                    }
                ]
            }
            render(<MockAppWithProviders><SidebarListItem item={sampleItem} dispatch={dispatchMock}/></MockAppWithProviders>);
            const listItem = screen.getByText('مدیریت نقش ها');
            fireEvent.click(listItem);
            expect(dispatchMock).toHaveBeenCalledWith({
                type: 'COLLAPSE_MENU',
                key: "sidebar.role-management",
            });
        });
    })
})