import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
const row = {
    id : 0,
    getValue : name => {
        if (name === "name") {
            return "manage_passenger_office_navgan";
        }
        else if (name === "name_fa") {
            return "مدیریت کارتابل رییس اداره مسافری استان";
        }
    },
    original : {
        permissions : [
            {
                id: 1,
                name: "manage_passenger_office_navgan",
                name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
            },
            {
                id: 2,
                name: "manage_passenger_office_navgan",
                name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
            }
        ]
    }
}

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>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const textElement = screen.queryByText("ویرایش")
            await waitFor(()=>{
            expect(textElement).toBeInTheDocument()
            })
        });
        it('should see name_en text', async () => {
            render(
                <MockAppWithProviders>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const textElement = screen.queryByLabelText("نام انگلیسی")
            await waitFor(()=>{
            expect(textElement).toBeInTheDocument()
            })
        });
        it('should see name_fa text', async () => {
            render(
                <MockAppWithProviders>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const textElement = screen.queryByLabelText("نام فارسی")
            await waitFor(()=>{
            expect(textElement).toBeInTheDocument()
            })
        });
        it('should see update text in the submit button ', async () => {
            render(
                <MockAppWithProviders>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const buttonElement = screen.queryByText("ثبت")
            await waitFor(()=>{
                expect(buttonElement).toBeInTheDocument()
            })
        });
        it('should see cancel text in the cancel button ', async () => {
            render(
                <MockAppWithProviders>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const buttonElement = screen.queryByText("بستن")
            await waitFor(()=>{
                expect(buttonElement).toBeInTheDocument()
            })
        });
    })

    describe("Behavior", ()=>{
        it('should see what fill in the name_en input', async () => {
            render(
                <MockAppWithProviders>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const nameEnglishInput = screen.getByLabelText('نام انگلیسی');

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

            fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
            await waitFor(()=>{
                // Simulate user input
                expect(nameFarsiInput).toHaveValue('testuser');
            })
        });
        it('should return permissions_list', async () => {
            render(
                <MockAppWithProviders>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
            await waitFor(()=>{
                expect(checkboxElement).toHaveLength(2)
            })
        });
        it('should see the value of the name_en that pass to input value', async () => {
            render(
                <MockAppWithProviders>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const name_enElement = screen.getByLabelText("نام انگلیسی")
            await waitFor(()=>{
                expect(name_enElement).toHaveValue("manage_passenger_office_navgan")
            })
        });
        it('should see the value of the name_fa that pass to input value', async () => {
            render(
                <MockAppWithProviders>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const name_enElement = screen.getByLabelText("نام فارسی")
            await waitFor(()=>{
                expect(name_enElement).toHaveValue("مدیریت کارتابل رییس اداره مسافری استان")
            })
        });
        it('should get checked if the id exists in permission lists', async () => {
            render(
                <MockAppWithProviders>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")
            await waitFor(()=>{
                expect(checkboxElement).toBeChecked();
            })

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

            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>
                    <UpdateContent row={row}/>
                </MockAppWithProviders>
            )
            const name_enInput = screen.getByLabelText("نام انگلیسی")
            expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()

            fireEvent.change(name_enInput, {target : {value : null}});
            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()
            })
        })
    })
})