import { shallow } from "enzyme";
import moment from "moment";
import React from "react";
import DeptAssignmentNew from "./DeptAssignmentNew";
import { mockRoles } from "../../../../shared/testing/mocks/MockRoles";
import { MultiSelectOption } from "../../../../shared/types/IMultiSelectOption";

const mockDepartments = [
    {
        departmentId: 0,
        id: 55,
        departmentName: "WAUWATOSA",
        businessLineCode: "OPS",
        state: "Active"
    },
    {
        departmentId: 1,
        id: 56,
        departmentName: "HEADQUARTERS",
        businessLineCode: "OPS",
        state: "Active"
    }
];

const departmentOptions = mockDepartments.map(
    (department) =>
        ({
            key: department.id?.toString(),
            label: department.departmentName,
            value: department.id?.toString()
        } as MultiSelectOption)
);

const mockSubmit = jest.fn();

beforeEach(() => {
    mockSubmit.mockClear();
});

describe("User wants to add a new dept assignment", () => {
    it("updates state when input changed", () => {
        const wrapper = shallow(
            <DeptAssignmentNew
                roles={mockRoles}
                departments={mockDepartments}
                submitNewDepartmentAssignment={(data) => mockSubmit(data)}
            />
        );
        expect(wrapper.find('[data-test="dept-input"]').prop("value")).toEqual(
            []
        );
        expect(wrapper.find('[data-test="note-input"]').prop("value")).toBe("");
        expect(wrapper.find('[data-test="start-input"]').prop("value")).toEqual(
            ""
        );
        expect(wrapper.find('[data-test="end-input"]').prop("value")).toEqual(
            ""
        );
        expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
            false
        );
        wrapper
            .find('[data-test="dept-input"]')
            .simulate("change", { target: { value: [departmentOptions[0]] } });
        wrapper
            .find('[data-test="note-input"]')
            .simulate("change", { target: { value: "note" } });
        wrapper
            .find('[data-test="start-input"]')
            .simulate("change", { target: { value: moment("2021-01-01") } });
        wrapper
            .find('[data-test="end-input"]')
            .simulate("change", { target: { value: moment("2021-01-02") } });
        wrapper.update();
        expect(wrapper.find('[data-test="dept-input"]').prop("value")).toEqual({
            target: { value: [departmentOptions[0]] }
        });
        expect(wrapper.find('[data-test="note-input"]').prop("value")).toBe(
            "note"
        );
        expect(wrapper.find('[data-test="start-input"]').prop("value")).toEqual(
            "2021-01-01"
        );
        expect(wrapper.find('[data-test="end-input"]').prop("value")).toEqual(
            "2021-01-31"
        );
        expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
            false
        );
    });
    it("disables submit until required data is entered", () => {
        const wrapper = shallow(
            <DeptAssignmentNew
                roles={mockRoles}
                departments={mockDepartments}
                submitNewDepartmentAssignment={(data) => mockSubmit(data)}
            />
        );
        expect(
            wrapper.find('[data-test="submit-button"]').prop("disabled")
        ).toBe(true);
        wrapper
            .find('[data-test="dept-input"]')
            .simulate("change", { target: { value: [departmentOptions[0]] } });
        //Note not required
        wrapper
            .find('[data-test="start-input"]')
            .simulate("change", { target: { value: moment("2021-01-01") } });
        //EndDate Not Required
        wrapper.update();
        expect(
            wrapper.find('[data-test="submit-button"]').prop("disabled")
        ).toBe(false);
        expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
            false
        );
    });
    it("disables submit if endDate is before startDate", () => {
        const wrapper = shallow(
            <DeptAssignmentNew
                roles={mockRoles}
                departments={mockDepartments}
                submitNewDepartmentAssignment={(data) => mockSubmit(data)}
            />
        );
        expect(
            wrapper.find('[data-test="submit-button"]').prop("disabled")
        ).toBe(true);
        wrapper
            .find('[data-test="dept-input"]')
            .simulate("change", { target: { value: [departmentOptions[0]] } });
        wrapper
            .find('[data-test="note-input"]')
            .simulate("change", { target: { value: "note" } });
        wrapper
            .find('[data-test="start-input"]')
            .simulate("change", { target: { value: moment("2021-02-01") } });
        wrapper
            .find('[data-test="end-input"]')
            .simulate("change", { target: { value: moment("2021-01-02") } });
        wrapper.update();
        expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
            true
        );
        expect(
            wrapper.find('[data-test="submit-button"]').prop("disabled")
        ).toBe(true);
    });
    it("hides the clear button when there is nothing to clear", () => {
        const wrapper = shallow(
            <DeptAssignmentNew
                roles={mockRoles}
                departments={mockDepartments}
                submitNewDepartmentAssignment={(data) => mockSubmit(data)}
            />
        );
        expect(wrapper.find('[data-test="clear-button"]').prop("hidden")).toBe(
            true
        );
        wrapper
            .find('[data-test="dept-input"]')
            .simulate("change", { target: { value: [departmentOptions[0]] } });
        wrapper
            .find('[data-test="note-input"]')
            .simulate("change", { target: { value: "note" } });
        expect(wrapper.find('[data-test="clear-button"]').prop("hidden")).toBe(
            false
        );
    });
});

describe("User no longer wishes to add a new dept assignment", () => {
    it("resets all inputs when the clear button is clicked", () => {
        const wrapper = shallow(
            <DeptAssignmentNew
                roles={mockRoles}
                departments={mockDepartments}
                submitNewDepartmentAssignment={(data) => mockSubmit(data)}
            />
        );
        expect(wrapper.find('[data-test="clear-button"]').prop("hidden")).toBe(
            true
        );
        wrapper
            .find('[data-test="dept-input"]')
            .simulate("change", { target: { value: [departmentOptions[0]] } });
        wrapper
            .find('[data-test="note-input"]')
            .simulate("change", { target: { value: "note" } });
        expect(wrapper.find('[data-test="clear-button"]').prop("hidden")).toBe(
            false
        );
        wrapper.find('[data-test="clear-button"]').simulate("click");
        wrapper.update();
        expect(wrapper.find('[data-test="dept-input"]').prop("value")).toEqual(
            []
        );
        expect(wrapper.find('[data-test="note-input"]').prop("value")).toBe("");
        expect(wrapper.find('[data-test="start-input"]').prop("value")).toEqual(
            ""
        );
        expect(wrapper.find('[data-test="end-input"]').prop("value")).toEqual(
            ""
        );
        expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
            false
        );
    });
});

describe("User submits a new dept assignment", () => {
    it("passes the proper data on submit", () => {
        const wrapper = shallow(
            <DeptAssignmentNew
                roles={mockRoles}
                departments={mockDepartments}
                submitNewDepartmentAssignment={(data) => mockSubmit(data)}
            />
        );
        wrapper
            .find('[data-test="dept-input"]')
            .simulate("change", { target: { value: [departmentOptions[0]] } });
        wrapper
            .find('[data-test="role-input"]')
            .simulate("change", { target: { value: "Admin" } });
        wrapper
            .find('[data-test="note-input"]')
            .simulate("change", { target: { value: "note" } });
        wrapper
            .find('[data-test="sliding-payout-input"]')
            .simulate("change", { target: { value: "65" } });
        wrapper
            .find('[data-test="start-input"]')
            .simulate("change", { target: { value: "2021-01-01" } });
        wrapper
            .find('[data-test="end-input"]')
            .simulate("change", { target: { value: "2021-01-02" } });
        wrapper.update();
        expect(
            wrapper.find('[data-test="submit-button"]').prop("disabled")
        ).toBe(false);
        wrapper.find('[data-test="submit-button"]').simulate("click");
        wrapper.update();
        expect(wrapper.find('[data-test="dept-input"]').prop("value")).toEqual(
            []
        );
        expect(wrapper.find('[data-test="note-input"]').prop("value")).toBe("");
        expect(wrapper.find('[data-test="start-input"]').prop("value")).toEqual(
            ""
        );
        expect(wrapper.find('[data-test="end-input"]').prop("value")).toEqual(
            ""
        );
        expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
            false
        );
        //start and end date should be cast as UTC!
    });
});