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 Province from "../../Province";
import MockAppWithProviders from "../../../../../../../../../../mocks/AppWithProvider";

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

describe("Province Component From Expert Management (create)", () => {
    describe("Rendering", () => {
        it("Province Select Box Rendered", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
            await waitFor(() => {
                const provinceSelectBox = screen.getByTestId('select-box');
                expect(provinceSelectBox).toBeInTheDocument();
            });
        });
    });
    describe("Behavioral", () => {
        it("Province Select Box Work Correctly", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
            const provinceSelectBox = screen.getByTestId('select-box');
            const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener-province"));

            await waitFor(() => {
                expect(provinceSelectBox).toBeInTheDocument();
            });

            fireEvent.mouseDown(provinceSelectOpener);
            await waitFor(() => {
                const selectItem = screen.queryByText("آذربایجان شرقی");
                expect(selectItem).toBeInTheDocument();
            });

        });
    });
    describe("validation", () => {
        it('Should Select An Item With Valid Value of province', async () => {
            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
            const provinceInput = screen.getByTestId("input-province-id")
            const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener-province"));

            fireEvent.mouseDown(provinceSelectOpener);
            const selectItem = await waitFor(() => screen.queryByText("آذربایجان شرقی"));
            expect(selectItem).toBeInTheDocument();
            fireEvent.click(selectItem);
            await waitFor(() => {
                expect(provinceInput.value).toBe('1')
            });
        });
    })
});