/* global element, by */
'use strict';

var env = require('../../lib/env');
var User = new(require('./annotating.user.js'))();
var EC = protractor.ExpectedConditions;


xdescribe('PAGE: Annotation Sidebar', function() {

    // Position of annotations of sidebar related to annotations inside the text
    describe('When the user access the review', function() {

        beforeEach(function() {

            // return User.login()
            // .then(function() {
            // console.log('wat for reviews')
            // return browser.wait(EC.urlContains('/reviews'), 5000);
            // })
            // .then(function() {
            return User.goToAnnotationPage()
                // })
                .then(function() {
                    return browser.wait(EC.urlContains('/reviews'), 5000);
                })
                .then(function() {
                    return User.takeScreenshot('clicking on');
                }).then(function() {
                    return element(by.css('.w-toggle-product-list-to-analyze')).click();
                }).then(function() {
                    return element(by.css('.w-product-name-to-analyze')).click();
                })
                .then(function() {
                    return browser.sleep(2000);
                })
                .then(function() {
                    return User.takeScreenshot('opened');
                });
        });
        it('then each sidebar note should be displayed inside the screen', function() {
            return element.all(by.css('.annotation-list-item')).then(function(elems) {
                return elems.forEach(function(el) {
                    expect(el.isDisplayed()).toBe(true);
                });
            });
        });
        describe('and the user clicks on an annotation inside the text', function() {

            it('The correspondent annotation-item on the aside list should have the css property top that is lower or higher than the css property top of the annotation inside the text for no more than 20px', function() {

                var el;
                var location1, location2;

                return User.createAnnotation()
                    .then(function() {
                        return User.takeScreenshot('before-clicking-on-highlight');

                    })
                    .then(function() {
                        return element(by.css('.annotation-highlight')).click();
                    })
                    .then(function() {
                        return User.wait(5);
                    })
                    .then(function() {
                        el = element.all(by.css('.annotation-list-item')).get(0);
                        return el.isDisplayed();
                    })
                    .then(function(isDisplayed) {
                        expect(isDisplayed).toBe(true);
                        return el.getLocation();
                    })
                    .then(function(loc) {
                        location1 = loc;
                        return element.all(by.css('.annotation-highlight')).get(0).getLocation();
                    })
                    .then(function(loc) {
                        location2 = loc;
                        expect(location1.y).toBeGreaterThan(location2.y - (30 + 10));
                        expect(location1.y).toBeLessThan(location2.y + (30 + 10));
                    });
            }).pend('FIX AS SOON AS POSSIBLE');

        });
    });

    describe('When the user click on an annotation inside the text', function() {
        // it('The correspondent annotation-item on the aside list should have the css property top that is lower or higher than the css property top of the annotation inside the text for no more than 20px', function() {
        //     // here i should create an annotation
        //     User.createAnnotation().then(function() {
        //         element(by.css('.annotation-highlight')).click().then(function() {
        //             element.all(by.css('.annotation-highlight')).getLocation().then(function(locations) {
        //                 element.all(by.css('.annotation-list-item')).then(function(annotations) {
        //                     expect(annotations[0].isDisplayed()).toBe(true);
        //                     annotations[0].getLocation().then(function(location) {
        //                         expect(location.y).toBeGreaterThan(locations[0].y - 30);
        //                         expect(location.y).toBeLessThan(locations[0].y + 30);
        //                     });
        //                 });
        //             });
        //         });
        //     });
        //     // element.all().then(function(elems) {
        //     //     elems[0].click();
        //     //     browser.sleep(1000);
        //     // });
        // });
        // Annotation list item
        describe('and when the user clicks on a annotation-item', function() {
            it('then “Edit” and “Delete” buttons should be present and displayed', function() {
                return element.all(by.css('.annotation-list-item .panel-title a')).get(0).click()
                    .then(function() {
                        return browser.sleep(1000);
                    }).then(function() {
                        return element.all(by.css('.annotation-list-item')).then(function(annotations) {
                            expect(annotations[0].element(by.css('.annotation-list-item-actions .w-edit-annotation')).isPresent()).toBe(true);
                            expect(annotations[0].element(by.css('.annotation-list-item-actions .w-edit-annotation')).isDisplayed()).toBe(true);
                            expect(annotations[0].element(by.css('.annotation-list-item-actions .w-delete-annotation')).isPresent()).toBe(true);
                            expect(annotations[0].element(by.css('.annotation-list-item-actions .w-delete-annotation')).isDisplayed()).toBe(true);
                        });
                    });
            });
            describe('and When the user clicks on “edit” button', function() {
                it('Three sentiment buttons should be displayed', function() {
                    return element.all(by.css('.annotation-list-item')).each(function(el) {
                        return el.element(by.css('.annotation-list-item-actions .w-edit-annotation')).click().then(function() {
                            expect(el.element(by.css('.sentiment-btn-group')).isPresent()).toBe(true);
                            expect(el.element(by.css('.sentiment-btn-group .btn-positive')).isPresent()).toBe(true);
                            expect(el.element(by.css('.sentiment-btn-group .btn-negative')).isPresent()).toBe(true);
                            expect(el.element(by.css('.sentiment-btn-group .btn-neutral')).isPresent()).toBe(true);
                            return browser.sleep(2 * 1000);
                        }).then(function() {
                            expect(el.element(by.css('.sentiment-btn-group .btn-neutral')).isDisplayed()).toBe(true);
                            expect(el.element(by.css('.sentiment-btn-group .btn-negative')).isDisplayed()).toBe(true);
                            expect(el.element(by.css('.sentiment-btn-group .btn-positive')).isDisplayed()).toBe(true);
                            expect(el.element(by.css('.sentiment-btn-group')).isDisplayed()).toBe(true);
                        });
                    });
                });
                describe('and When the user clicks on a sentiment button', function() {
                    it('then the sentiment of the annotation-item should be changed', function() {

                        return element.all(by.css('.annotation-list-item')).get(0).element(by.css('.sentiment-btn-group .btn-negative')).click()
                            .then(function() {
                                return browser.sleep(2000);
                            })
                            .then(function() {
                                return element.all(by.css('.annotation-highlight')).get(0).getCssValue('background-color');
                            })
                            .then(function(cssValue) {
                                expect(cssValue).toEqual('rgba(255, 211, 212, 1)');
                            });
                    });
                });
            });
            describe('When the user clicks on “delete” button', function() {
                it('then a “yes/no” dialogue should be displayed below', function() {
                    element.all(by.css('.annotation-list-item')).each(function(el) {
                        el.element(by.css('.annotation-list-item-actions .w-delete-annotation')).click();
                        expect(el.element(by.css('.annotation-delete-confirmation')).isPresent()).toBe(true);
                        expect(el.element(by.css('.w-delete-button-yes')).isPresent()).toBe(true);
                        expect(el.element(by.css('.w-delete-button-no')).isPresent()).toBe(true);
                        browser.takeScreenshot().then(function(data) {
                            var stream = require('fs').createWriteStream('/usr/src/app/node_modules/' + 'filename');
                            stream.write(new Buffer(data, 'base64'));
                            stream.end();
                            expect(el.element(by.css('.w-delete-button-yes')).isDisplayed()).toBe(true);
                            expect(el.element(by.css('.w-delete-button-no')).isDisplayed()).toBe(true);
                            expect(el.element(by.css('.annotation-delete-confirmation')).isDisplayed()).toBe(true);
                        });

                    });
                });
                describe('When the user clicks “no” in the dialogue', function() {
                    it('then the “yes/no” dialogue should be hidden', function() {
                        return element.all(by.css('.annotation-list-item')).each(function(el) {
                            el.element(by.css('.w-delete-button-no')).click();
                            return User.wait(2)
                                .then(function() {
                                    expect(el.element(by.css('.annotation-delete-confirmation')).isDisplayed()).toBe(false);
                                });
                        });
                    });
                });
                describe('When the user clicks “yes” in the dialogue', function() {
                    it('then annotation-item should be removed and not displayed', function() {
                        var el;
                        el = element(by.css('.annotation-list-item'));
                        return el.element(by.css('.annotation-list-item-actions .w-delete-annotation')).click()
                            .then(function() {
                                return el.element(by.css('.w-delete-button-yes')).click();
                            }).then(function() {
                                expect(element.all(by.css('.annotation-list-item')).count()).toBe(0);
                            });
                    });
                    it('then the correspondent highlight item on text should be removed and not displayed anymore', function() {
                        return element.all(by.css('.annotation-highlight')).count()
                            .then(function(count) {
                                expect(count).toBe(0);
                            });
                    });
                });
            });
        });
    });
}).pend('FIX AS SOON AS POSSIBLE');;