define(["jquery", "underscore", "underscore.string", "js/common_helpers/ajax_helpers",
        "js/common_helpers/template_helpers", "js/spec_helpers/edit_helpers",
        "js/views/pages/container", "js/models/xblock_info", "jquery.simulate"],
    function ($, _, str, AjaxHelpers, TemplateHelpers, EditHelpers, ContainerPage, XBlockInfo) {

        describe("ContainerPage", function() {
            var lastRequest, renderContainerPage, expectComponents, respondWithHtml,
                model, containerPage, requests, initialDisplayName,
                mockContainerPage = readFixtures('mock/mock-container-page.underscore'),
                mockContainerXBlockHtml = readFixtures('mock/mock-container-xblock.underscore'),
                mockBadContainerXBlockHtml = readFixtures('mock/mock-bad-javascript-container-xblock.underscore'),
                mockBadXBlockContainerXBlockHtml = readFixtures('mock/mock-bad-xblock-container-xblock.underscore'),
                mockUpdatedContainerXBlockHtml = readFixtures('mock/mock-updated-container-xblock.underscore'),
                mockXBlockEditorHtml = readFixtures('mock/mock-xblock-editor.underscore');

            beforeEach(function () {
                var newDisplayName = 'New Display Name';

                EditHelpers.installEditTemplates();
                TemplateHelpers.installTemplate('xblock-string-field-editor');
                TemplateHelpers.installTemplate('container-message');
                appendSetFixtures(mockContainerPage);

                EditHelpers.installMockXBlock({
                    data: "<p>Some HTML</p>",
                    metadata: {
                        display_name: newDisplayName
                    }
                });

                initialDisplayName = 'Test Container';

                model = new XBlockInfo({
                    id: 'locator-container',
                    display_name: initialDisplayName,
                    category: 'vertical'
                });
            });

            afterEach(function() {
                EditHelpers.uninstallMockXBlock();
            });

            lastRequest = function() { return requests[requests.length - 1]; };

            respondWithHtml = function(html) {
                var requestIndex = requests.length - 1;
                AjaxHelpers.respondWithJson(
                    requests,
                    { html: html, "resources": [] },
                    requestIndex
                );
            };

            renderContainerPage = function(test, html, options) {
                requests = AjaxHelpers.requests(test);
                containerPage = new ContainerPage(_.extend(options || {}, {
                    model: model,
                    templates: EditHelpers.mockComponentTemplates,
                    el: $('#content')
                }));
                containerPage.render();
                respondWithHtml(html);
            };

            expectComponents = function (container, locators) {
                // verify expected components (in expected order) by their locators
                var components = $(container).find('.studio-xblock-wrapper');
                expect(components.length).toBe(locators.length);
                _.each(locators, function(locator, locator_index) {
                    expect($(components[locator_index]).data('locator')).toBe(locator);
                });
            };

            describe("Initial display", function() {
                it('can render itself', function() {
                    renderContainerPage(this, mockContainerXBlockHtml);
                    expect(containerPage.$('.xblock-header').length).toBe(9);
                    expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
                });

                it('shows a loading indicator', function() {
                    requests = AjaxHelpers.requests(this);
                    containerPage.render();
                    expect(containerPage.$('.ui-loading')).not.toHaveClass('is-hidden');
                    respondWithHtml(mockContainerXBlockHtml);
                    expect(containerPage.$('.ui-loading')).toHaveClass('is-hidden');
                });

                it('can show an xblock with broken JavaScript', function() {
                    renderContainerPage(this, mockBadContainerXBlockHtml);
                    expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
                    expect(containerPage.$('.ui-loading')).toHaveClass('is-hidden');
                });

                it('can show an xblock with an invalid XBlock', function() {
                    renderContainerPage(this, mockBadXBlockContainerXBlockHtml);
                    expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
                    expect(containerPage.$('.ui-loading')).toHaveClass('is-hidden');
                });

                it('inline edits the display name when performing a new action', function() {
                    renderContainerPage(this, mockContainerXBlockHtml, {
                        action: 'new'
                    });
                    expect(containerPage.$('.xblock-header').length).toBe(9);
                    expect(containerPage.$('.wrapper-xblock .level-nesting')).not.toHaveClass('is-hidden');
                    expect(containerPage.$('.xblock-field-input')).not.toHaveClass('is-hidden');
                });
            });

            describe("Editing the container", function() {
                var updatedDisplayName = 'Updated Test Container',
                    getDisplayNameWrapper;

                afterEach(function() {
                    EditHelpers.cancelModalIfShowing();
                });

                getDisplayNameWrapper = function() {
                    return containerPage.$('.wrapper-xblock-field');
                };

                it('can edit itself', function() {
                    var editButtons, displayNameElement;
                    renderContainerPage(this, mockContainerXBlockHtml);
                    displayNameElement = containerPage.$('.page-header-title');

                    // Click the root edit button
                    editButtons = containerPage.$('.nav-actions .edit-button');
                    editButtons.first().click();

                    // Expect a request to be made to show the studio view for the container
                    expect(str.startsWith(lastRequest().url, '/xblock/locator-container/studio_view')).toBeTruthy();
                    AjaxHelpers.respondWithJson(requests, {
                        html: mockContainerXBlockHtml,
                        resources: []
                    });
                    expect(EditHelpers.isShowingModal()).toBeTruthy();

                    // Expect the correct title to be shown
                    expect(EditHelpers.getModalTitle()).toBe('Editing: Test Container');

                    // Press the save button and respond with a success message to the save
                    EditHelpers.pressModalButton('.action-save');
                    AjaxHelpers.respondWithJson(requests, { });
                    expect(EditHelpers.isShowingModal()).toBeFalsy();

                    // Expect the last request be to refresh the container page
                    expect(str.startsWith(lastRequest().url,
                        '/xblock/locator-container/container_preview')).toBeTruthy();
                    AjaxHelpers.respondWithJson(requests, {
                        html: mockUpdatedContainerXBlockHtml,
                        resources: []
                    });

                    // Respond to the subsequent xblock info fetch request.
                    AjaxHelpers.respondWithJson(requests, {"display_name":  updatedDisplayName});

                    // Expect the title to have been updated
                    expect(displayNameElement.text().trim()).toBe(updatedDisplayName);
                });

                it('can inline edit the display name', function() {
                    var displayNameInput, displayNameWrapper;
                    renderContainerPage(this, mockContainerXBlockHtml);
                    displayNameWrapper = getDisplayNameWrapper();
                    displayNameInput = EditHelpers.inlineEdit(displayNameWrapper, updatedDisplayName);
                    displayNameInput.change();
                    // This is the response for the change operation.
                    AjaxHelpers.respondWithJson(requests, { });
                    // This is the response for the subsequent fetch operation.
                    AjaxHelpers.respondWithJson(requests, {"display_name":  updatedDisplayName});
                    EditHelpers.verifyInlineEditChange(displayNameWrapper, updatedDisplayName);
                    expect(containerPage.model.get('display_name')).toBe(updatedDisplayName);
                });
            });

            describe("Editing an xblock", function() {
                afterEach(function() {
                    EditHelpers.cancelModalIfShowing();
                });

                it('can show an edit modal for a child xblock', function() {
                    var editButtons;
                    renderContainerPage(this, mockContainerXBlockHtml);
                    editButtons = containerPage.$('.wrapper-xblock .edit-button');
                    // The container should have rendered six mock xblocks
                    expect(editButtons.length).toBe(6);
                    editButtons[0].click();
                    // Make sure that the correct xblock is requested to be edited
                    expect(str.startsWith(lastRequest().url, '/xblock/locator-component-A1/studio_view')).toBeTruthy();
                    AjaxHelpers.respondWithJson(requests, {
                        html: mockXBlockEditorHtml,
                        resources: []
                    });
                    expect(EditHelpers.isShowingModal()).toBeTruthy();
                });

                it('can show an edit modal for a child xblock with broken JavaScript', function() {
                    var editButtons;
                    renderContainerPage(this, mockBadContainerXBlockHtml);
                    editButtons = containerPage.$('.wrapper-xblock .edit-button');
                    editButtons[0].click();
                    AjaxHelpers.respondWithJson(requests, {
                        html: mockXBlockEditorHtml,
                        resources: []
                    });
                    expect(EditHelpers.isShowingModal()).toBeTruthy();
                });
            });

            describe("Editing an xmodule", function() {
                var mockXModuleEditor = readFixtures('mock/mock-xmodule-editor.underscore'),
                    newDisplayName = 'New Display Name';

                beforeEach(function () {
                    EditHelpers.installMockXModule({
                        data: "<p>Some HTML</p>",
                        metadata: {
                            display_name: newDisplayName
                        }
                    });
                });

                afterEach(function() {
                    EditHelpers.uninstallMockXModule();
                    EditHelpers.cancelModalIfShowing();
                });

                it('can save changes to settings', function() {
                    var editButtons, modal, mockUpdatedXBlockHtml;
                    mockUpdatedXBlockHtml = readFixtures('mock/mock-updated-xblock.underscore');
                    renderContainerPage(this, mockContainerXBlockHtml);
                    editButtons = containerPage.$('.wrapper-xblock .edit-button');
                    // The container should have rendered six mock xblocks
                    expect(editButtons.length).toBe(6);
                    editButtons[0].click();
                    AjaxHelpers.respondWithJson(requests, {
                        html: mockXModuleEditor,
                        resources: []
                    });

                    modal = $('.edit-xblock-modal');
                    expect(modal.length).toBe(1);
                    // Click on the settings tab
                    modal.find('.settings-button').click();
                    // Change the display name's text
                    modal.find('.setting-input').text("Mock Update");
                    // Press the save button
                    modal.find('.action-save').click();
                    // Respond to the save
                    AjaxHelpers.respondWithJson(requests, {
                        id: model.id
                    });

                    // Respond to the request to refresh
                    respondWithHtml(mockUpdatedXBlockHtml);

                    // Verify that the xblock was updated
                    expect(containerPage.$('.mock-updated-content').text()).toBe('Mock Update');
                });
            });

            describe("xblock operations", function() {
                var getGroupElement,
                    NUM_COMPONENTS_PER_GROUP = 3, GROUP_TO_TEST = "A",
                    allComponentsInGroup = _.map(
                        _.range(NUM_COMPONENTS_PER_GROUP),
                        function(index) { return 'locator-component-' + GROUP_TO_TEST + (index + 1); }
                    );

                getGroupElement = function() {
                    return containerPage.$("[data-locator='locator-group-" + GROUP_TO_TEST + "']");
                };

                describe("Deleting an xblock", function() {
                    var clickDelete, deleteComponent, deleteComponentWithSuccess,
                        promptSpy;

                    beforeEach(function() {
                        promptSpy = EditHelpers.createPromptSpy();
                    });

                    clickDelete = function(componentIndex, clickNo) {

                        // find all delete buttons for the given group
                        var deleteButtons = getGroupElement().find(".delete-button");
                        expect(deleteButtons.length).toBe(NUM_COMPONENTS_PER_GROUP);

                        // click the requested delete button
                        deleteButtons[componentIndex].click();

                        // click the 'yes' or 'no' button in the prompt
                        EditHelpers.confirmPrompt(promptSpy, clickNo);
                    };

                    deleteComponent = function(componentIndex) {
                        clickDelete(componentIndex);
                        AjaxHelpers.respondWithJson(requests, {});

                        // second to last request contains given component's id (to delete the component)
                        AjaxHelpers.expectJsonRequest(requests, 'DELETE',
                            '/xblock/locator-component-' + GROUP_TO_TEST + (componentIndex + 1),
                            null, requests.length - 2);

                        // final request to refresh the xblock info
                        AjaxHelpers.expectJsonRequest(requests, 'GET', '/xblock/locator-container');
                    };

                    deleteComponentWithSuccess = function(componentIndex) {
                        deleteComponent(componentIndex);

                        // verify the new list of components within the group
                        expectComponents(
                            getGroupElement(),
                            _.without(allComponentsInGroup, allComponentsInGroup[componentIndex])
                        );
                    };

                    it("can delete the first xblock", function() {
                        renderContainerPage(this, mockContainerXBlockHtml);
                        deleteComponentWithSuccess(0);
                    });

                    it("can delete a middle xblock", function() {
                        renderContainerPage(this, mockContainerXBlockHtml);
                        deleteComponentWithSuccess(1);
                    });

                    it("can delete the last xblock", function() {
                        renderContainerPage(this, mockContainerXBlockHtml);
                        deleteComponentWithSuccess(NUM_COMPONENTS_PER_GROUP - 1);
                    });

                    it("can delete an xblock with broken JavaScript", function() {
                        renderContainerPage(this, mockBadContainerXBlockHtml);
                        containerPage.$('.delete-button').first().click();
                        EditHelpers.confirmPrompt(promptSpy);
                        AjaxHelpers.respondWithJson(requests, {});
                        // expect the second to last request to be a delete of the xblock
                        AjaxHelpers.expectJsonRequest(requests, 'DELETE', '/xblock/locator-broken-javascript',
                            null, requests.length - 2);
                        // expect the last request to be a fetch of the xblock info for the parent container
                        AjaxHelpers.expectJsonRequest(requests, 'GET', '/xblock/locator-container');
                    });

                    it('does not delete when clicking No in prompt', function () {
                        var numRequests;

                        renderContainerPage(this, mockContainerXBlockHtml);
                        numRequests = requests.length;

                        // click delete on the first component but press no
                        clickDelete(0, true);

                        // all components should still exist
                        expectComponents(getGroupElement(), allComponentsInGroup);

                        // no requests should have been sent to the server
                        expect(requests.length).toBe(numRequests);
                    });

                    it('shows a notification during the delete operation', function() {
                        var notificationSpy = EditHelpers.createNotificationSpy();
                        renderContainerPage(this, mockContainerXBlockHtml);
                        clickDelete(0);
                        EditHelpers.verifyNotificationShowing(notificationSpy, /Deleting/);
                        AjaxHelpers.respondWithJson(requests, {});
                        EditHelpers.verifyNotificationHidden(notificationSpy);
                    });

                    it('does not delete an xblock upon failure', function () {
                        var notificationSpy = EditHelpers.createNotificationSpy();
                        renderContainerPage(this, mockContainerXBlockHtml);
                        clickDelete(0);
                        EditHelpers.verifyNotificationShowing(notificationSpy, /Deleting/);
                        AjaxHelpers.respondWithError(requests);
                        EditHelpers.verifyNotificationShowing(notificationSpy, /Deleting/);
                        expectComponents(getGroupElement(), allComponentsInGroup);
                    });
                });

                describe("Duplicating an xblock", function() {
                    var clickDuplicate, duplicateComponentWithSuccess,
                        refreshXBlockSpies;

                    clickDuplicate = function(componentIndex) {

                        // find all duplicate buttons for the given group
                        var duplicateButtons = getGroupElement().find(".duplicate-button");
                        expect(duplicateButtons.length).toBe(NUM_COMPONENTS_PER_GROUP);

                        // click the requested duplicate button
                        duplicateButtons[componentIndex].click();
                    };

                    duplicateComponentWithSuccess = function(componentIndex) {
                        refreshXBlockSpies = spyOn(containerPage, "refreshXBlock");

                        clickDuplicate(componentIndex);

                        // verify content of request
                        AjaxHelpers.expectJsonRequest(requests, 'POST', '/xblock/', {
                            'duplicate_source_locator': 'locator-component-' + GROUP_TO_TEST + (componentIndex + 1),
                            'parent_locator': 'locator-group-' + GROUP_TO_TEST
                        });

                        // send the response
                        AjaxHelpers.respondWithJson(requests, {
                            'locator': 'locator-duplicated-component'
                        });

                        // expect parent container to be refreshed
                        expect(refreshXBlockSpies).toHaveBeenCalled();
                    };

                    it("can duplicate the first xblock", function() {
                        renderContainerPage(this, mockContainerXBlockHtml);
                        duplicateComponentWithSuccess(0);
                    });

                    it("can duplicate a middle xblock", function() {
                        renderContainerPage(this, mockContainerXBlockHtml);
                        duplicateComponentWithSuccess(1);
                    });

                    it("can duplicate the last xblock", function() {
                        renderContainerPage(this, mockContainerXBlockHtml);
                        duplicateComponentWithSuccess(NUM_COMPONENTS_PER_GROUP - 1);
                    });

                    it("can duplicate an xblock with broken JavaScript", function() {
                        renderContainerPage(this, mockBadContainerXBlockHtml);
                        containerPage.$('.duplicate-button').first().click();
                        AjaxHelpers.expectJsonRequest(requests, 'POST', '/xblock/', {
                            'duplicate_source_locator': 'locator-broken-javascript',
                            'parent_locator': 'locator-container'
                        });
                    });

                    it('shows a notification when duplicating', function () {
                        var notificationSpy = EditHelpers.createNotificationSpy();
                        renderContainerPage(this, mockContainerXBlockHtml);
                        clickDuplicate(0);
                        EditHelpers.verifyNotificationShowing(notificationSpy, /Duplicating/);
                        AjaxHelpers.respondWithJson(requests, {"locator": "new_item"});
                        EditHelpers.verifyNotificationHidden(notificationSpy);
                    });

                    it('does not duplicate an xblock upon failure', function () {
                        var notificationSpy = EditHelpers.createNotificationSpy();
                        renderContainerPage(this, mockContainerXBlockHtml);
                        refreshXBlockSpies = spyOn(containerPage, "refreshXBlock");
                        clickDuplicate(0);
                        EditHelpers.verifyNotificationShowing(notificationSpy, /Duplicating/);
                        AjaxHelpers.respondWithError(requests);
                        expectComponents(getGroupElement(), allComponentsInGroup);
                        expect(refreshXBlockSpies).not.toHaveBeenCalled();
                        EditHelpers.verifyNotificationShowing(notificationSpy, /Duplicating/);
                    });
                });

                describe('createNewComponent ', function () {
                    var clickNewComponent;

                    clickNewComponent = function (index) {
                        containerPage.$(".new-component .new-component-type a.single-template")[index].click();
                    };

                    it('sends the correct JSON to the server', function () {
                        renderContainerPage(this, mockContainerXBlockHtml);
                        clickNewComponent(0);
                        EditHelpers.verifyXBlockRequest(requests, {
                            "category": "discussion",
                            "type": "discussion",
                            "parent_locator": "locator-group-A"
                        });
                    });

                    it('shows a notification while creating', function () {
                        var notificationSpy = EditHelpers.createNotificationSpy();
                        renderContainerPage(this, mockContainerXBlockHtml);
                        clickNewComponent(0);
                        EditHelpers.verifyNotificationShowing(notificationSpy, /Adding/);
                        AjaxHelpers.respondWithJson(requests, { });
                        EditHelpers.verifyNotificationHidden(notificationSpy);
                    });

                    it('does not insert component upon failure', function () {
                        var requestCount;
                        renderContainerPage(this, mockContainerXBlockHtml);
                        clickNewComponent(0);
                        requestCount = requests.length;
                        AjaxHelpers.respondWithError(requests);
                        // No new requests should be made to refresh the view
                        expect(requests.length).toBe(requestCount);
                        expectComponents(getGroupElement(), allComponentsInGroup);
                    });

                    describe('Template Picker', function() {
                        var showTemplatePicker, verifyCreateHtmlComponent,
                            mockXBlockHtml = readFixtures('mock/mock-xblock.underscore');

                        showTemplatePicker = function() {
                            containerPage.$('.new-component .new-component-type a.multiple-templates')[0].click();
                        };

                        verifyCreateHtmlComponent = function(test, templateIndex, expectedRequest) {
                            var xblockCount;
                            renderContainerPage(test, mockContainerXBlockHtml);
                            showTemplatePicker();
                            xblockCount = containerPage.$('.studio-xblock-wrapper').length;
                            containerPage.$('.new-component-html a')[templateIndex].click();
                            EditHelpers.verifyXBlockRequest(requests, expectedRequest);
                            AjaxHelpers.respondWithJson(requests, {"locator": "new_item"});
                            respondWithHtml(mockXBlockHtml);
                            expect(containerPage.$('.studio-xblock-wrapper').length).toBe(xblockCount + 1);
                        };

                        it('can add an HTML component without a template', function() {
                            verifyCreateHtmlComponent(this, 0, {
                                "category": "html",
                                "parent_locator": "locator-group-A"
                            });
                        });

                        it('can add an HTML component with a template', function() {
                            verifyCreateHtmlComponent(this, 1, {
                                "category": "html",
                                "boilerplate" : "announcement.yaml",
                                "parent_locator": "locator-group-A"
                            });
                        });
                    });
                });
            });
        });
    });
