describe("Quiz preview", () => {
    beforeEach(() => {
        cy.fixture("image1.png", null, {}).as("image1");
        cy.fixture("image2.png", null, {}).as("image2");
        cy.fixture("image3.png", null, {}).as("image3");

        cy.visit("/list");

        cy.get("[data-cy=create-quiz]").click();
        cy.get("[data-cy=create-quiz-card]").click();
        cy.get("[data-cy=select-quiz-layout-standard]").click();
        cy.get("[data-cy=setup-questions]").click();
        cy.get("[data-cy=toggle-quiz-preview]").click();
    });

    it("container and layout elements should exist", () => {
        cy.get("[data-cy=quiz-preview-container]").should("exist");
        cy.get("[data-cy=quiz-preview-layout]").should("exist");
    });

    describe("Variant question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-variant]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");

                cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
                cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
                cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
            });
        });

        it("should contain title and options, and be selected properly", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=question-title]").should("have.text", "Question Title");
                cy.get("[data-cy=variant-answer]").eq(0).should("have.text", "Answer 1");
                cy.get("[data-cy=variant-answer]").eq(1).should("have.text", "Answer 2");
                cy.get("[data-cy=variant-answer]").eq(2).should("have.text", "Answer 3");

                cy.get("[data-cy=variant-answer]").eq(0).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");

                cy.get("[data-cy=variant-answer]").eq(1).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");

                cy.get("[data-cy=variant-answer]").eq(2).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("be.checked");
            });
        });
    });

    describe("Image question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-images]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");

                cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
                cy.get("[data-cy=add-image-button]").eq(0).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image1", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();

                cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
                cy.get("[data-cy=add-image-button]").eq(1).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image2", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();

                cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
                cy.get("[data-cy=add-image-button]").eq(2).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image3", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
            });
        });

        it("should contain title and options, and be selected properly", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=variant-button] > img").eq(0).should("have.attr", "src").and("match", /^blob:.+/);
                cy.get("[data-cy=variant-button] > img").eq(1).should("have.attr", "src").and("match", /^blob:.+/);
                cy.get("[data-cy=variant-button] > img").eq(2).should("have.attr", "src").and("match", /^blob:.+/);

                cy.get("[data-cy=variant-button]").eq(0).click();
                // TODO check for images
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");

                cy.get("[data-cy=variant-button]").eq(1).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");

                cy.get("[data-cy=variant-button]").eq(2).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "true");
            });
        });

        it("should work with multiple selection mode", () => {
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=multiple-answers-checkbox]").click();
            });

            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=variant-button]").eq(0).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");

                cy.get("[data-cy=variant-button]").eq(1).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");

                cy.get("[data-cy=variant-button]").eq(2).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "true");

                cy.get("[data-cy=variant-button]").eq(0).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "true");
            });
        });
    });

    describe("Varimg question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-varimg]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");

                cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
                cy.get("[data-cy=add-image-button]").eq(0).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image1", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();

                cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
                cy.get("[data-cy=add-image-button]").eq(1).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image2", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();

                cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
                cy.get("[data-cy=add-image-button]").eq(2).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image3", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
            });
        });

        it("should contain title and options, and be selected properly", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=question-title]").should("have.text", "Question Title");
                cy.get("[data-cy=variant-answer]").eq(0).should("have.text", "Answer 1");
                cy.get("[data-cy=variant-answer]").eq(1).should("have.text", "Answer 2");
                cy.get("[data-cy=variant-answer]").eq(2).should("have.text", "Answer 3");

                cy.get("[data-cy=variant-answer]").eq(0).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");
                cy.get("[data-cy=variant-image]")
                    .invoke("attr", "src")
                    .should("match", /^blob:.+/)
                    .as("src1", { type: "static" });

                cy.get("[data-cy=variant-answer]").eq(1).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");
                cy.get("[data-cy=variant-image]")
                    .invoke("attr", "src")
                    .should("match", /^blob:.+/)
                    .then(src2 => {
                        cy.get("@src1").should("not.equal", src2);
                    });

                cy.get("[data-cy=variant-answer]").eq(2).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("be.checked");
                cy.get("[data-cy=variant-image]")
                    .invoke("attr", "src")
                    .should("match", /^blob:.+/)
                    .then(src3 => {
                        cy.get("@src1").should("not.equal", src3);
                    });
            });
        });
    });

    describe("Emoji question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-emoji]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");

                cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
                cy.get("[data-cy=choose-emoji-button]").eq(0).click();
                cy.get("em-emoji-picker", { withinSubject: null }).within(() => {
                    cy.get(".emoji-mart-emoji", {
                        withinSubject: null,
                        includeShadowDom: true,
                    }).eq(0).click();
                });

                cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
                cy.get("[data-cy=choose-emoji-button]").eq(1).click();
                cy.get("em-emoji-picker", { withinSubject: null }).within(() => {
                    cy.get(".emoji-mart-emoji", {
                        withinSubject: null,
                        includeShadowDom: true,
                    }).eq(1).click();
                });

                cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
                cy.get("[data-cy=choose-emoji-button]").eq(2).click();
                cy.get("em-emoji-picker", { withinSubject: null }).within(() => {
                    cy.get(".emoji-mart-emoji", {
                        withinSubject: null,
                        includeShadowDom: true,
                    }).eq(2).click();
                });
            });
        });

        it("should contain title and options, and be selected properly", () => {
            const emojiRegex = "(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])";

            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=question-title]").should("have.text", "Question Title");
                cy.get("[data-cy=variant-answer]").eq(0).invoke("text").should("match",
                    new RegExp(`${emojiRegex} Answer 1`)
                );
                cy.get("[data-cy=variant-answer]").eq(1).invoke("text").should("match",
                    new RegExp(`${emojiRegex} Answer 2`)
                );
                cy.get("[data-cy=variant-answer]").eq(2).invoke("text").should("match",
                    new RegExp(`${emojiRegex} Answer 3`)
                );

                cy.get("[data-cy=variant-answer]").eq(0).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");

                cy.get("[data-cy=variant-answer]").eq(1).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");

                cy.get("[data-cy=variant-answer]").eq(2).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("be.checked");
            });
        });
    });

    describe("Text question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-text]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");
                cy.get("[data-cy=textfield]").type("Suggestion");
            });
        });

        it("should contain title and textfield, that can be filled", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=question-title]").should("have.text", "Question Title");
                cy.get("[data-cy=textfield] input").should("have.attr", "placeholder", "Suggestion");
                cy.get("[data-cy=textfield] input").focus().type("Some text");
                cy.get("[data-cy=textfield] input").should("have.prop", "value", "Some text");
            });
        });
    });

    describe("Select question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-select]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");
                cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
                cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
                cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
            });
        });

        it("should contain title and select, and be selected properly", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=question-title]").should("have.text", "Question Title");
                cy.get("[data-cy=select]").click();
                cy.get("[data-cy=select-option]", { withinSubject: null }).eq(0).click();
                cy.get("[data-cy=select] #category-select").should("have.text", "Answer 1");
                cy.get("[data-cy=select]").click();
                cy.get("[data-cy=select-option]", { withinSubject: null }).eq(1).click();
                cy.get("[data-cy=select] #category-select").should("have.text", "Answer 2");
                cy.get("[data-cy=select]").click();
                cy.get("[data-cy=select-option]", { withinSubject: null }).eq(2).click();
                cy.get("[data-cy=select] #category-select").should("have.text", "Answer 3");
            });
        });
    });

    describe("Date question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-date]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");
            });
        });

        it("should contain title and datepicker", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=question-title]").should("have.text", "Question Title");
                cy.get("[data-cy=open-datepicker]").should("exist");
            });
        });
    });

    describe("Number question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-number]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");
                cy.get("[data-cy=textfield]").eq(0).type("{selectall}{backspace}10");
                cy.get("[data-cy=textfield]").eq(1).type("{selectall}{backspace}90");
                cy.get("[data-cy=textfield]").eq(2).type("{selectall}{backspace}50");
                cy.get("[data-cy=textfield]").eq(3).type("{selectall}{backspace}5");
            });
        });

        it("should contain title and slider", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=question-title]").should("have.text", "Question Title");
                cy.get("[data-cy=slider]").should("exist");
            });
        });
    });

    describe("File question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-file]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");
            });
        });

        it("should contain title and filepicker", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=question-title]").should("have.text", "Question Title");
                cy.get("[data-cy=file-upload-input]").selectFile("@image1", { force: true });
                cy.get("[data-cy=chosen-file-name]").should("contain.text", "Выбран файл:");
            });
        });
    });

    describe("Page question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-page]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");
                cy.get("[data-cy=textfield]").type("Some text");

                cy.get("[data-cy=add-image-button]").eq(0).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image1", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
            });
        });

        it("should contain title and filepicker", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=question-title]").should("have.text", "Question Title");
                cy.get("[data-cy=question-text]").should("have.text", "Some text");
                cy.get("img").invoke("attr", "src").should("match", /^blob:.+/);
            });
        });
    });

    describe.only("Rating question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-rating]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");
            });
        });

        it("should contain title and filepicker", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=question-title]").should("have.text", "Question Title");
                cy.get("[data-cy=rating-button]").should("have.length", 5);
                cy.get("[data-cy=rating-button]").eq(2).click();
                cy.get("[data-cy=rating]").should("have.attr", "data-rating", 3);
                cy.get("[data-cy=rating-button]").eq(4).click();
                cy.get("[data-cy=rating]").should("have.attr", "data-rating", 5);
            });
        });
    });
});