import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
import CreateContent from "@/components/dashboard/role-management/Form/CreateForm/CreateContent";

describe("Create Content component from Create Form Component in Role Management Component",()=>{
    describe("Rendering", ()=>{
        it('should see AddDialog text in the top ', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const textElement = screen.queryByText("افزودن")
            await waitFor(()=>{
                expect(textElement).toBeInTheDocument()
            })
        });
        it('should see name_en text', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const textElement = screen.queryByLabelText("نام انگلیسی")
            await waitFor(()=>{
                expect(textElement).toBeInTheDocument()
            })
        });
        it('should see name_fa text', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const textElement = screen.queryByLabelText("نام فارسی")
            await waitFor(()=>{
                expect(textElement).toBeInTheDocument()
            })
        });
        it('should see name_fa text', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const textElement = screen.queryByLabelText("نام فارسی")
            await waitFor(()=>{
                expect(textElement).toBeInTheDocument()
            })
        });
    })
    describe("Behavior",()=>{
        it('should see what fill in the name_en input', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const nameEnglishInput = screen.getByLabelText('نام انگلیسی');

            fireEvent.change(nameEnglishInput, {target: {value: 'testuser'}});
            await act(()=>{
                // Simulate user input
                expect(nameEnglishInput).toHaveValue('testuser');
            })
        });
        it('should see what fill in the name_fa input', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const nameFarsiInput = screen.getByLabelText('نام فارسی');

            fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
            await act(()=>{
                // Simulate user input
                expect(nameFarsiInput).toHaveValue('testuser');
            })
        });
        it('should return permissions_list', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
            expect(checkboxElement).toHaveLength(2)
        });
        it('should get checked if permission list item get clicked', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")

            await waitFor(()=>{
                expect(checkboxElement).not.toBeChecked();
            })

            fireEvent.click(checkboxElement);

            await waitFor(()=>{
                expect(checkboxElement).toBeChecked();
            })
        });
    })
    describe("Validation",()=>{
        it('should see error text when name_fa input is empty', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const name_faInput = screen.getByLabelText("نام فارسی")
            expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
            fireEvent.blur(name_faInput);

            await waitFor(()=>{
                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
            })
            fireEvent.change(name_faInput, {target : {value : "نام فارسی"}})

            await waitFor(()=>{
                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
            })
        })
        it('should see error text when name_en input is empty', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const name_enInput = screen.getByLabelText("نام انگلیسی")
            expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
            fireEvent.blur(name_enInput);

            await waitFor(()=>{
                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
            })
            fireEvent.change(name_enInput, {target : {value : "english name"}})

            await waitFor(()=>{
                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
            })
        })
        it('should see errors when click on submit button and field not completed', async () => {
            render(
                <MockAppWithProviders>
                    <CreateContent/>
                </MockAppWithProviders>
            )
            const submitButtonElement = screen.queryByText("ثبت")
            fireEvent.click(submitButtonElement)
            await waitFor(()=>{
                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
            })
            await waitFor(()=>{
                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
            })
            await waitFor(()=>{
                expect(screen.queryByText("حداقل باید یک دسترسی انتخاب شود")).toBeInTheDocument()
            })
        });
    })
})