/* eslint-disable @typescript-eslint/quotes */
import React from "react";
import { mount, shallow } from "enzyme";
import DepartmentTableRow from "./DepartmentTableRow";
import Translate from "../../translate/Translate";
import { IDepartment } from "../../shared/models/Department";
import ViewDepartmentTableRow from "./ViewDepartmentTableRow";

let wrapper: any;

const mockUniqueFunction = jest.fn();
const mockSubmitFunction = jest.fn();

export interface IFakePermissionProps {
    requiredPermissions: string[];
    showWarning?: boolean;
    children: JSX.Element;
}

export const FakePermissionGuard: React.FC<IFakePermissionProps> = (props) => {
    return props.children;
};

jest.mock("../../containers/shared/PermissionGuard", () => FakePermissionGuard);

beforeEach(() => {
    mockUniqueFunction.mockReturnValue(true);
    wrapper = mount(
        <table>
            <tbody>
                <DepartmentTableRow
                    department={
                        {
                            id: 4,
                            departmentName: "testName",
                            businessLineCode: "bl2",
                            regionCode: "",
                            state: "Active"
                        } as IDepartment
                    }
                    updateDepartment={(department) =>
                        mockSubmitFunction(department)
                    }
                    isDepartmentNameUnique={(deptName) => {
                        return mockUniqueFunction();
                    }}
                    businessLines={[
                        { name: "businessLine1", code: "bl1", orgCode: "ORG" },
                        { name: "businessLine2", code: "bl2", orgCode: "ORG" }
                    ]}
                    departmentStateSet={{
                        Avctive: "Active",
                        Inactive: "Inactive"
                    }}
                    regions={[
                        {
                            name: "North",
                            businessLineCode: "BCHOPS",
                            code: "NORTH"
                        },
                        {
                            name: "South",
                            businessLineCode: "BCHOPS",
                            code: "SOUTH"
                        }
                    ]}
                />
            </tbody>
        </table>
    );
});

describe("User Views a DepartmentTableRow", () => {
    it("Displays Proper Department Data", () => {
        let x = 0;
        const temp = () => {
            x++;
        };
        const tempWrapper = shallow(
            <ViewDepartmentTableRow
                department={
                    {
                        id: 4,
                        departmentName: "testName",
                        businessLineCode: "123",
                        state: "Active"
                    } as IDepartment
                }
                toggleEdit={temp}
            />
        );

        expect(tempWrapper.find('[data-test="department_tr_4"]').length).toBe(
            1
        );
        expect(tempWrapper.find('[data-test="edit-row"]').length).toBe(0);
        expect(tempWrapper.find("td").length).toBe(6);
        expect(tempWrapper.find('[data-test="dept-name"]').length).toBe(1);
        expect(tempWrapper.find('[data-test="business-line"]').length).toBe(1);
        expect(tempWrapper.find('[data-test="dept-state"]').length).toBe(1);
        expect(
            tempWrapper.find("td").find("Button").children().text()
        ).toContain(
            Translate.Get.components.departmentTable.departmentTableRow
                .editButton
        );
    });
});

describe("Associate Can Toggle and Make Edits", () => {
    test("Clicking Edit Button Opens Edit", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
        expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
        expect(wrapper.find("td").length).toBe(6);
        expect(
            wrapper.find('[data-test="dept-name-input"]').hostNodes().length
        ).toBe(1);
        expect(
            wrapper.find('[data-test="business-line-input"]').hostNodes().length
        ).toBe(1);
        expect(
            wrapper.find('[data-test="region-input"]').hostNodes().length
        ).toBe(1);
        expect(
            wrapper.find('[data-test="dept-state-input"]').hostNodes().length
        ).toBe(1);
        expect(
            wrapper.find('[data-test="submit-button"]').hostNodes().text()
        ).toContain(
            Translate.Get.components.departmentTable.departmentTableRow
                .saveUpdateButton
        );
        expect(
            wrapper.find('[data-test="clear-button"]').hostNodes().length
        ).toBe(1);
    });

    test("Initial Values are Set Properly", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
        expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
        expect(wrapper.find("td").length).toBe(6);
        expect(
            wrapper
                .find('[data-test="dept-name-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("testName");
        expect(
            wrapper
                .find('[data-test="business-line-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("bl2");
        expect(
            wrapper.find('[data-test="region-input"]').hostNodes().prop("value")
        ).toBe("");
        expect(
            wrapper
                .find('[data-test="dept-state-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("Active");
        expect(
            wrapper.find('[data-test="submit-button"]').hostNodes().text()
        ).toContain(
            Translate.Get.components.departmentTable.departmentTableRow
                .saveUpdateButton
        );
        expect(
            wrapper.find('[data-test="clear-button"]').hostNodes().length
        ).toBe(1);
    });

    test("Updating Values Updates State", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
        expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
        expect(wrapper.find("td").length).toBe(6);
        wrapper
            .find('[data-test="dept-name-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "NewName" } });
        wrapper
            .find('[data-test="business-line-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "bl1" } });
        wrapper
            .find('[data-test="region-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "NORTH" } });
        wrapper
            .find('[data-test="dept-state-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "Inactive" } });
        wrapper.update();
        expect(
            wrapper
                .find('[data-test="dept-name-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("NewName");
        expect(
            wrapper
                .find('[data-test="business-line-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("bl1");
        expect(
            wrapper.find('[data-test="region-input"]').hostNodes().prop("value")
        ).toBe("NORTH");
        expect(
            wrapper
                .find('[data-test="dept-state-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("Inactive");
    });

    test("Only - allowed as special charcter", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        expect(wrapper.find("td").length).toBe(6);
        wrapper
            .find('[data-test="dept-name-input"]')
            .hostNodes()
            .simulate("change", {
                target: { value: "New-Name Name.!@#$!#@$" }
            });
        wrapper.update();
        expect(
            wrapper
                .find('[data-test="dept-name-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("New-NameName");
    });

    test("Submit is Disabled until Changes are Made - Name", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
        wrapper
            .find('[data-test="dept-name-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "NewName" } });
        wrapper.update();
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(false);

        wrapper
            .find('[data-test="dept-name-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "testName" } });
        wrapper.update();
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
    });

    test("Submit is Disabled until Changes are Made - BusinessLine", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
        wrapper
            .find('[data-test="business-line-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "bl1" } });
        wrapper.update();
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(false);
        wrapper
            .find('[data-test="business-line-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "bl2" } });
        wrapper.update();
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
    });

    test("Submit is Disabled until Changes are Made - State", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
        wrapper
            .find('[data-test="dept-state-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "Inactive" } });
        wrapper.update();
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(false);

        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(false);
        wrapper
            .find('[data-test="dept-state-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "Active" } });
        wrapper.update();
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
    });
});

describe("Associate Inputs Are Validated", () => {
    test("Name Must Be at least 3 Characters", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
        wrapper
            .find('[data-test="dept-name-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "Ne" } });
        wrapper.update();
        ///Input disabled because too short
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
        expect(wrapper.find("FormFeedback").text()).toContain(
            Translate.Get.components.departmentTable.departmentTableRow
                .validation.departmentNameLength
        );

        //Input Enabled once name is > 2 characters
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
        wrapper
            .find('[data-test="dept-name-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "New" } });
        wrapper.update();
        expect(wrapper.find("FormFeedback").hostNodes().length).toBe(0);
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(false);
    });

    test("Name Must Be Unique If Name is Not Original Name", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        mockUniqueFunction.mockReturnValue(false);
        wrapper.update();

        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
        wrapper
            .find('[data-test="dept-name-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "NewNewName" } });
        wrapper.update();

        ///Input disabled because unique check fails
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
        expect(wrapper.find("FormFeedback").text()).toContain(
            Translate.Get.components.departmentTable.departmentTableRow
                .validation.departmentNameUnique
        );

        //Input Enabled once name is unique
        expect(
            wrapper
                .find('[data-test="submit-button"]')
                .hostNodes()
                .prop("disabled")
        ).toBe(true);
        wrapper
            .find('[data-test="dept-name-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "NewNewName" } });
    });
});

describe("Associate can Abandon Changes", () => {
    test("Cancel Button Clears Inputs and Returns to Display State", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
        expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
        expect(wrapper.find("td").length).toBe(6);
        wrapper
            .find('[data-test="dept-name-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "NewName" } });
        wrapper
            .find('[data-test="business-line-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "bl1" } });
        wrapper
            .find('[data-test="region-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "SOUTH" } });
        wrapper
            .find('[data-test="dept-state-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "Inactive" } });
        wrapper.update();

        wrapper
            .find('[data-test="clear-button"]')
            .hostNodes()
            .simulate("click");
        wrapper.update();

        expect(wrapper.find('[data-test="department_tr_4"]').length).toBe(1);
        expect(wrapper.find('[data-test="edit-row"]').length).toBe(0);

        wrapper.find("Button").simulate("click");
        wrapper.update();

        //Assert Values did Not Update After Cancel and are Reset to Prop Values
        expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
        expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
        expect(wrapper.find("td").length).toBe(6);
        expect(
            wrapper
                .find('[data-test="dept-name-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("testName");
        expect(
            wrapper
                .find('[data-test="business-line-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("bl2");
        expect(
            wrapper.find('[data-test="region-input"]').hostNodes().prop("value")
        ).toBe("");
        expect(
            wrapper
                .find('[data-test="dept-state-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("Active");
    });
});

describe("Associate can Submit Changes", () => {
    test("Submit Button Sends Correct Form Data", () => {
        wrapper.find("Button").simulate("click");
        wrapper.update();

        wrapper
            .find('[data-test="dept-name-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "NewName" } });
        wrapper
            .find('[data-test="business-line-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "bl1" } });
        wrapper
            .find('[data-test="region-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "NORTH" } });
        wrapper
            .find('[data-test="dept-state-input"]')
            .hostNodes()
            .simulate("change", { target: { value: "Inactive" } });
        wrapper.update();

        wrapper
            .find('[data-test="submit-button"]')
            .hostNodes()
            .simulate("click");
        expect(mockSubmitFunction.mock.calls[0][0]).toEqual({
            departmentName: "NewName",
            businessLineCode: "bl1",
            state: "Inactive",
            id: 4,
            regionCode: "NORTH"
        });
        wrapper.update();

        expect(wrapper.find('[data-test="department_tr_4"]').length).toBe(1);
        expect(wrapper.find('[data-test="edit-row"]').length).toBe(0);

        wrapper.find("Button").simulate("click");
        wrapper.update();

        //Assert Values have updated since submit
        expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
        expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
        expect(wrapper.find("td").length).toBe(6);
        expect(
            wrapper
                .find('[data-test="dept-name-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("testName");
        expect(
            wrapper
                .find('[data-test="business-line-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("bl2");
        expect(
            wrapper.find('[data-test="region-input"]').hostNodes().prop("value")
        ).toBe("");
        expect(
            wrapper
                .find('[data-test="dept-state-input"]')
                .hostNodes()
                .prop("value")
        ).toBe("Active");
    });
});