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

const CreateFormMock = ({Component}) => {
    const t = useTranslations();
    const validationSchema = Yup.object().shape({
        username: Yup.string().required(t("ExpertMangement.error_message_username")),
        password: Yup.string()
            .required(t("ExpertMangement.error_message_password"))
            .matches(
                /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
                t("ExpertMangement.error_message_password_regex")
            ),
    });
    return (
        <Formik
            initialValues={{
                username: "",
                password: "",
            }}
            validationSchema={validationSchema}
            onSubmit={(values, {}) => {
            }}
        >
            {formikProps => (<Component formik={formikProps}></Component>)}
        </Formik>
    );
};

describe("UserInfo Component From Expert Management (create)", () => {
    describe("Rendering", () => {
        it("UserName TextField Rendered", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
            await waitFor(() => {
                const usernameTextField = screen.queryByLabelText('نام کاربری');
                expect(usernameTextField).toBeInTheDocument();
            });
        });
        it("Password TextField Rendered", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
            await waitFor(() => {
                const passwordTextField = screen.queryByLabelText('رمز عبور');
                expect(passwordTextField).toBeInTheDocument();
            });

        });
    });
    describe("Behavioral", () => {
        it("Username TextField Work Correctly", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
            const usernameTextField = screen.queryByLabelText('نام کاربری');
            fireEvent.change(usernameTextField, {target: {value: 'exampleUsername'}});
            await act(() => {
                expect(usernameTextField).toHaveValue('exampleUsername');
            })
        });
        it("Password TextField Work Correctly", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
            const passwordTextField = screen.queryByLabelText('رمز عبور');
            fireEvent.change(passwordTextField, {target: {value: 'examplePassword'}});
            await act(() => {
                expect(passwordTextField).toHaveValue('examplePassword');
            })
        });
    });
    describe("validation", () => {
        it('Should See Error When Username Input Is Empty', async () => {
            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);

            const usernameInput = screen.queryByLabelText('نام کاربری');

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

            await waitFor(() => {
                expect(screen.queryByText("نام کاربری خود را وارد کنید")).toBeInTheDocument()
            });
        });
        it('Should See Error When Password Input Is Empty', async () => {
            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);

            const passwordInput = screen.queryByLabelText('رمز عبور');

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

            await waitFor(() => {
                expect(screen.queryByText("رمز عبور خود را وارد کنید")).toBeInTheDocument()
            });
        });
        it('Should See Error When Password Field Is Not On Correct Format', async () => {
            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);

            const passwordInput = screen.queryByLabelText('رمز عبور');

            // check without text or symbol
            fireEvent.change(passwordInput, {target: {value: '12345678'}});
            fireEvent.blur(passwordInput);
            await waitFor(() => {
                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد")).toBeInTheDocument()
            });

            // check without number
            fireEvent.change(passwordInput, {target: {value: 'abcdefgh'}});
            fireEvent.blur(passwordInput);
            await waitFor(() => {
                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد")).toBeInTheDocument()
            });

            // check under 8 character
            fireEvent.change(passwordInput, {target: {value: '11Sa'}});
            fireEvent.blur(passwordInput);
            await waitFor(() => {
                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد")).toBeInTheDocument()
            });
        });
    })
});