import {fireEvent, render, screen, waitFor} from "@testing-library/react";
import React from 'react';
import {useTranslations} from "next-intl";
import * as Yup from "yup";
import {Formik} from "formik";
import MockAppWithProviders from "../../../../../../../../../../mocks/AppWithProvider";
import PositionAndRole from "../../PositionAndRole";

const CreateFormMock = ({Component}) => {
    const t = useTranslations();
    const validationSchema = Yup.object().shape({
        position: Yup.string().required(t("ExpertMangement.error_message_position")),
        roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
    });
    return (
        <Formik
            initialValues={{
                position: "",
                roles: ""
            }}
            validationSchema={validationSchema}
            onSubmit={(values, {}) => {
            }}
        >
            {formikProps => (<Component formik={formikProps}></Component>)}
        </Formik>
    );
};

describe("PositionAndRole Component From Expert Management (create)", () => {
    describe("Rendering", () => {
        it("Position TextField Rendered", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
            await waitFor(() => {
                const positionTextField = screen.queryByLabelText('سمت');
                expect(positionTextField).toBeInTheDocument();
            });
        });
        it("Role Select Box Rendered", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
            const roleSelect = screen.getByTestId('select-box');
            await waitFor(() => {
                expect(roleSelect).toBeInTheDocument();
            });
        });
    });
    describe("Behavioral", () => {
        it("Position TextField Work Correctly", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
            const positionTextField = screen.queryByLabelText('سمت');
            fireEvent.change(positionTextField, {target: {value: 'examplePosition'}});
            await waitFor(() => {
                expect(positionTextField).toHaveValue('examplePosition');
            })
        });
        it("Role Select Box Work Correctly", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
            const roleSelect = screen.getByTestId("option-opener-role");
            await waitFor(() => {
                expect(roleSelect).toBeInTheDocument();
            });
            fireEvent.mouseDown(roleSelect);
            await waitFor(() => {
                const selectItem = screen.queryByText("ادمین");
                expect(selectItem).toBeInTheDocument();
            });
        });
    });
    describe("validation", () => {
        it('Should See Error When Position Input Is Empty', async () => {
            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);

            const positionInput = screen.queryByLabelText('سمت');

            fireEvent.change(positionInput, {target: {value: ''}});
            fireEvent.blur(positionInput);

            await waitFor(() => {
                expect(screen.queryByText("سمت خود را وارد کنید")).toBeInTheDocument()
            });
        });
        it('Should Select An Item With Valid Value of role', async () => {
            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
            const roleInput = await waitFor(() => screen.getByTestId("input-role-id"));
            const roleSelectOpener = await waitFor(() => screen.getByTestId("option-opener-role"));

            fireEvent.mouseDown(roleSelectOpener);
            const selectItem = await waitFor(() => screen.queryByText("ادمین"));
            expect(selectItem).toBeInTheDocument();
            fireEvent.click(selectItem);
            await waitFor(() => {
                expect(roleInput.value).toBe('1')
            });
        });
    })
});