/*
 * Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

describe('Chip List Auto Complete', () => {
  before(() => {
    cy.visit('/form-controls/chip-list-autocomplete-demo');
    cy.viewport(1600, 900);
  });

  describe('Site', () => {
    it('should contain title', () => {
      cy.get('h3', { timeout: 10000 }).should('contain', 'Inline Style');
    });
  });

  describe('Toggles', () => {
    const fixedOptions = 'fixed-options';
    const fixedOptionsWithFreeText = 'fixed-options-free-text';
    const requiredToggle = 'required-input-chip-list';
    const readonlyToggle = 'readonly-input-chip-list';
    const disableToggle = 'disable-input-chip-list';
    it('should require all inputs', () => {
      cy.viewport(1600, 900);
      clickToggle(requiredToggle);
      openSelectionAndSelectFirstOption(fixedOptions);
      chipRemoveIcons(fixedOptions).eq(0).click();
      getFixedOptionsErrorMessage().contains('Select or type your options').should('be.visible');
    });
    it('should readonly all inputs without Free-Text', () => {
      cy.viewport(1600, 900);
      clickToggle(readonlyToggle);
      getChipListInputFor(fixedOptions).should('have.attr', 'readonly', 'readonly');

    });
    it('readonly should not affect inputs with Free-Text', () => {
      cy.viewport(1600, 900);
      getChipListInputFor(fixedOptionsWithFreeText).scrollIntoView().click().type('somethingElse').should('contain.value', 'somethingElse');
    });
    it('should disable all inputs', () => {
      cy.viewport(1600, 900);
      clickToggle(readonlyToggle);
      clickToggle(disableToggle);
      cy.get('[data-qa="fixed-options"] input').should('be.disabled');
      cy.get('[data-qa="fixed-options-limited"] input').should('be.disabled');
      clickToggle(disableToggle);
    });
    it('should have no chip remove icons when disabled', () => {
      cy.get('mat-icon .mat-mdc-chip-remove').should('not.exist');
    });
  });
  
  describe('Fixed Options', () => {
    describe('with unlimited chips', () => {
      const fixedOptions = 'fixed-options';

      it('should allow selecting 3 chip options', () => {
        openSelectionAndSelectFirstOption(fixedOptions);
        openSelectionAndSelectFirstOption(fixedOptions);
        openSelectionAndSelectFirstOption(fixedOptions);

        chipsForMultiSelect(fixedOptions).should('have.length', 3);
        chipsForMultiSelect(fixedOptions).eq(0).should('contain', 'Option1');
        chipsForMultiSelect(fixedOptions).eq(1).should('contain', 'Option2');
        chipsForMultiSelect(fixedOptions).eq(2).should('contain', 'Option3');
      });

      it('should have chip remove icons when not disabled', () => {
        openSelectionAndSelectFirstOption(fixedOptions);
        chipRemoveIcons(fixedOptions).should('exist');
      });

      it('should allow removing a chip', () => {
        chipRemoveIcons(fixedOptions).eq(3).click();

        chipsForMultiSelect(fixedOptions).should('have.length', 3);
        chipsForMultiSelect(fixedOptions).eq(0).should('contain', 'Option1');
        chipsForMultiSelect(fixedOptions).eq(1).should('contain', 'Option2');
        chipsForMultiSelect(fixedOptions).eq(2).should('contain', 'Option3');
      });
    });
    describe('with limit of two chips', () => {
      const fixedOptionsLimited = 'fixed-options-limited';

      it('should allow selecting only 2 chip options', () => {
        openSelectionAndSelectFirstOption(fixedOptionsLimited);
        openSelectionAndSelectFirstOption(fixedOptionsLimited);

        chipsForMultiSelect(fixedOptionsLimited).should('have.length', 2);
        chipsForMultiSelect(fixedOptionsLimited).eq(0).should('contain', 'Option1');
        chipsForMultiSelect(fixedOptionsLimited).eq(1).should('contain', 'Option2');
      });

      it('input should be disabled', () => {
        getChipListInputFor(fixedOptionsLimited).should('not.be.visible');
      });

      it('should have chip remove icons when not disabled', () => {
        chipRemoveIcons(fixedOptionsLimited).should('exist');
      });

      it('should allow removing a chip', () => {
        chipRemoveIcons(fixedOptionsLimited).eq(1).click();

        chipsForMultiSelect(fixedOptionsLimited).should('have.length', 1);
        chipsForMultiSelect(fixedOptionsLimited).eq(0).should('contain', 'Option1');
      });

      it('input should be enabled again', () => {
        cy.get('[data-qa="fixed-options-limited"] input').should('be.visible');
      });
    });
  });

  function openSelectionAndSelectFirstOption(selector) {
    cy.get(`[data-qa="${selector}"] input`).should('be.visible').click();
    cy.get('mat-option').as('options');
    cy.get('@options').should('be.visible');
    cy.get('@options').eq(0).should('be.visible').click();
    cy.get('mat-option').should('not.exist');
  }

  function chipsForMultiSelect(dataQaSelector: string) {
    return cy.get('[data-qa="' + dataQaSelector + '"]').find('.mat-mdc-chip-row');
  }

  function chipRemoveIcons(dataQaSelector: string) {
    return cy.get(`[data-qa="${dataQaSelector}"] .mat-mdc-chip-remove`);
  }

  function getChipListInputFor(dataQaSelector: string) {
    return cy.get('bci-chip-list-autocomplete[data-qa="' + dataQaSelector + '"] input');
  }

  function getFixedOptionsErrorMessage() {
    return cy.get('[data-qa="fixed-options-error-message"]');
  }

  function clickToggle(dataQaSelector: string) {
     cy.get('mat-slide-toggle[data-qa="' + dataQaSelector + '"]').scrollIntoView();
     cy.get('mat-slide-toggle[data-qa="' + dataQaSelector + '"]').click();
  }
});
