import faker from 'faker';

/// <reference types="Cypress" />
describe('Component area Test', () => {
    it('Should be able to manipulate the image component', () => {
        let testPageName = 'Cypress Test Page '+faker.random.number({min: 10000, max: 99999});

        //Add a new page, enter a code name, and open the EN tab.
        cy.kms_login('kms/default/pages');
        cy.get('[data-test="add_button"]').click();
        cy.get('[data-test="TextField-code_name"]').type(testPageName);
        cy.get('[data-test=entity_tab_nl]').click();

        //Request an overview of all documents
        cy.request('/testapi/v1/documents/index').then((response) => {
            let documents = response.body.data;
            let documentsCountBeforeUpload = documents.length;
            cy.log('Documents count before upload: '+documentsCountBeforeUpload);

            //Define some selectors for testing if uploading works.
            let imageComponentImagesListSelectorBeforeUpload = '#'+imageComponentKey(0)+'-wrapper > ul';
            let imageComponentDragAndDropAreaSelector = '[data-test="'+imageComponentKey(0)+'_file_catcher"]';
            let imageComponentFirstImageThumbSelector = '#'+imageComponentKey(0)+'-wrapper > ul > li:nth-child(1) .thumb';

            //Add the image component
            cy.log('Adding an image component, and verify that it does not have images already');
            cy.get('[data-test="add_image_component_nl"]').click();
            cy.get(imageComponentImagesListSelectorBeforeUpload).children().should('have.length', 0);

            //Upload a file
            cy.log('Uploading an image');
            cy.uploadFile('uploads/flower_image.jpg', imageComponentDragAndDropAreaSelector, 'image/jpeg', false);
            cy.get(imageComponentImagesListSelectorBeforeUpload).children().should('have.length', 1);
            cy.get(imageComponentFirstImageThumbSelector).should('have.class', 'is-uploading');
            cy.get(imageComponentFirstImageThumbSelector).should('not.have.class', 'is-uploading');

            //Save the page, and thus the image component
            cy.get('[data-test="save_button"]').click();

            //Request an overview of all documents
            cy.request('/testapi/v1/documents/index').then((response) => {
                let documents = response.body.data;
                let documentsCountAfterUpload = documents.length;
                cy.log('Documents count after upload: '+documentsCountAfterUpload);
                let uploadedDocument = documents[documents.length - 1];

                //Define some selectors for testing if the upload did work
                let imageComponentImagesListSelectorAfterUpload = '#'+imageComponentKey(uploadedDocument.documentable.id)+'-wrapper > ul';
                let imageComponentFirstImageSelector = '#'+imageComponentKey(uploadedDocument.documentable.id)+'-wrapper > ul > li:nth-child(1)';

                //Check if the given uploaded document is visible in the image component.
                cy.log('Checking if the uploaded document is visible');
                cy.get(imageComponentImagesListSelectorAfterUpload).children().should('have.length', 1);

                //Delete the image
                cy.log('Deleting the image');
                cy.get(imageComponentFirstImageSelector).should('not.have.class', 'deleted');
                cy.get(imageComponentFirstImageSelector+' .delete').click();
                cy.get(imageComponentImagesListSelectorAfterUpload).children().should('have.length', 1);

                //Save and verify that it is deleted.
                cy.log('Saving and verifying that it is deleted');
                cy.get('[data-test="save_button"]').click();
                cy.get(imageComponentImagesListSelectorAfterUpload).children().should('have.length', 0);
            });
        })
    });


    function imageComponentKey(componentId) {
        return `ComponentArea\\|dynamic_group_sections\\|C${componentId}\\|image\\|nl`;
    }
});