var PageEditor = require('../pages/editor.page.js');

describe('properties panel test', function() {

  var editor;
  beforeEach(function() {
    editor = PageEditor.get('empty');
    editor.addWidget('pbInput');
    editor.setWidth(6);

  });

  it('should display action button, then editAction if custom widget, or viewAction if standard widget', function() {
    expect(element(by.css('#editAction')).isPresent()).toBe(false);
    expect(element(by.css('#widgetActionButton')).isDisplayed()).toBe(true);
    element(by.css('#widgetActionButton')).click();
    expect(element(by.css('#viewAction')).isDisplayed()).toBe(true);
    editor = PageEditor.get('empty');
    expect(element(by.css('#widgetActionButton')).isDisplayed()).toBe(false);
    editor.addWidget('pbContainer');
    expect(element(by.css('#widgetActionButton')).isPresent()).toBe(true);
    editor.addCustomWidget('customAwesomeWidget');
    expect(element(by.css('#widgetActionButton')).isDisplayed()).toBe(true);
    element(by.css('#widgetActionButton')).click();
    expect(element(by.css('#viewAction')).isPresent()).toBe(false);
    expect(element(by.css('#editAction')).isDisplayed()).toBe(true);
  });

  it('should display default properties on container', function() {
    editor.addWidget('container');
    editor.setWidth(12);
    expect(element(by.cssContainingText('.property-label label', 'CSS classes')).isPresent()).toBe(true);
    expect(element(by.cssContainingText('.property-label label', 'Hidden')).isPresent()).toBe(true);
  });

  it('should display properties for label', function() {
    expect(element(by.cssContainingText('.property-label label', 'CSS classes')).isPresent()).toBe(true);
    expect(element(by.cssContainingText('.property-label label', 'Hidden')).isPresent()).toBe(true);
    expect(element(by.cssContainingText('.property-label label', 'Label')).isPresent()).toBe(true);
    expect(element(by.cssContainingText('.property-label label', 'Label position')).isPresent()).toBe(true);
    expect(element(by.cssContainingText('.property-label label', 'Label width')).isPresent()).toBe(true);
    expect(element(by.cssContainingText('.property-label label', 'Placeholder')).isPresent()).toBe(true);
    expect(element(by.cssContainingText('.property-label label', 'Value')).isPresent()).toBe(true);
    expect(element(by.cssContainingText('.property-label label', 'Type')).isPresent()).toBe(true);
  });

  it('should display action button, with the correct menu items, depending on the selected widget', function() {
    expect(element(by.css('#widgetActionButton')).isPresent()).toBe(true);
    element(by.css('#widgetActionButton')).click();
    expect(element(by.css('#viewAction')).isDisplayed()).toBe(true);
    expect(element(by.css('#editAction')).isPresent()).toBe(false);
    expect(element(by.css('#saveAsFragmentAction')).isPresent()).toBe(false);

    editor = PageEditor.get('empty');
    expect(element(by.css('#widgetActionButton')).isDisplayed()).toBe(false);

    editor.addWidget('pbContainer');
    expect(element(by.css('#widgetActionButton')).isDisplayed()).toBe(true);
    element(by.css('#widgetActionButton')).click();
    expect(element(by.css('#saveAsFragmentAction')).isDisplayed()).toBe(true);
    expect(element(by.css('#editAction')).isPresent()).toBe(false);
    expect(element(by.css('#viewAction')).isPresent()).toBe(false);

    editor.addCustomWidget('customAwesomeWidget');
    expect(element(by.css('#widgetActionButton')).isDisplayed()).toBe(true);
    element(by.css('#widgetActionButton')).click();
    expect(element(by.css('#editAction')).isDisplayed()).toBe(true);
    expect(element(by.css('#viewAction')).isPresent()).toBe(false);
    expect(element(by.css('#saveAsFragmentAction')).isPresent()).toBe(false);
  });

  it('should hide properties for label if we choose to hide it', function() {

    // Change the value of a radio button as Angular does not understand when we change prop :/
    var labelHidden = $$('[data-property=labelHidden] input[type=radio]').last();
    var propertyLabel = $$('property-field .property-label');

    expect(propertyLabel.count()).toBe(13);
    labelHidden.click();
    expect(propertyLabel.count()).toBe(10);
  });

  it('should add a component set a type then add a new one and get default config', function() {
    // Select option number
    element(by.css('[data-property=type] option[label="number"]')).click();

    editor.addWidget('pbInput');

    var type = element(by.css('[data-property=type] select'));
    expect(type.$('option:checked').getText()).toBe('text');
  });

  it('should reload the config for properties', function() {
    // Select option number
    element(by.css('[data-property=type] option[label="number"]')).click();

    editor.addWidget('pbInput');

    var type = element(by.css('[data-property=type] select'));
    expect(type.$('option:checked').getText()).toBe('text');

    // Click on the first widget
    $('#component-0').click();

    type = element(by.css('[data-property=type] select'));
    expect(type.$('option:checked').getText()).toBe('number');
  });

});
