import Routing from '../../../../pages/eui/10x/routing-10x.js'
import CookieBannerActions from '../../../../actions/cookieBanner.js'
import utils from '../../../../core/utils.js'
import FormControlPage from '../../../../pages/eui/10x/ux/ux-form-control-10x.po.js'

describe('eUI - <ux-form-control> Component Object @CCQA-840', async () => {
  let formControlPg = new FormControlPage();
  it('should navigate to <ux-form-control> component', async () => {
    browser.addTestMeta({uuid:"1f968919-d63a-4e0a-b5f4-d182f885a05a", zephyrKey: "CCQA-840", zephyrStep: "371974", reportGroups: ["eUI.10x.ux"]});
    formControlPg.open(Routing.getUxComponentUrl('ux-form-control'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(formControlPg.pageTitle);
    await expect(pgTitle).toBeDisplayedInViewport({message:'<ux-form-control> page title is not displayed on page'});
    await expect(pgTitle).toHaveText('ux-form-control');
    await expect(await $(formControlPg.appDocPageById('ux-form-control'))).toExist({message:'Page Id is not present in page'});
    await expect(await $(formControlPg.navigationList)).toBeDisplayedInViewport({message:'Navigation List -> is not displayed on page'});
  });
  it('should verify the presence of the Component Object on the page', async () => {
    browser.addTestMeta({zephyrStep: "371975"});
    let sectionId= 'checkbox-type';
    let pageSection = await $(formControlPg.sectionById(sectionId));
    await  pageSection.scrollIntoView();
    let formC = formControlPg.coUxFormControl.byIndex(1);
    await expect(await $(formC.dataE2E)).toBeDisplayedInViewport({message:'Form Control by index 1 is not displayed on page'});
  });
  it('should verify the <Checkbox> type methods', async () => {
    browser.addTestMeta({zephyrStep: "371976"});
    let sectionId= 'checkbox-type';
    let pageSection = await $(formControlPg.sectionById(sectionId));
    await pageSection.scrollIntoView();

    let formControlCO1 = formControlPg.getCoUnderSectionTitleByText(sectionId, 1);
    let formControlCO2 = formControlPg.getCoUnderSectionTitleByText(sectionId, 2);
    let formControlCO4 = formControlPg.getCoUnderSectionTitleByText(sectionId, 4);
    await expect(await (await formControlCO1.checkboxCO.element())).toBeDisplayedInViewport({message:'<ux-form-control><Checkbox> CO1 -> is not displayed on page'});

    await expect(await formControlCO1.checkboxCO.isCheckBoxDisabled()).toBe(false, 'This checkbox should NOT be Disabled');
    await expect(await formControlCO4.checkboxCO.isCheckBoxDisabled()).toBe(true, 'This checkbox should be Disabled');

    await expect(await formControlCO1.isReadOnly()).toBe(false, 'This checkbox should NOT be ReadOnly');
    await expect(await formControlCO2.isReadOnly()).toBe(true, 'This checkbox should be ReadOnly');

    await expect(await formControlCO1.checkboxCO.isSelected()).toBe(false, 'This checkbox should NOT be selected');
    await (await $(formControlCO1.checkboxCO.checkBoxLabel)).click();
    await expect(await formControlCO1.checkboxCO.isSelected()).toBe(true, 'This checkbox should now be selected');
  });
  it('should verify the <input-text> type methods', async () => {
    browser.addTestMeta({zephyrStep: "371978"});
    let sectionId= 'input-text';
    let pageSection = await $(formControlPg.sectionById(sectionId));
    await pageSection.scrollIntoView();

    let formControlCO1 = formControlPg.getCoUnderSectionTitleByText(sectionId, 1);
    let formControlCO2 = formControlPg.getCoUnderSectionTitleByText(sectionId, 2);
    let formControlCO3 = formControlPg.getCoUnderSectionTitleByText(sectionId, 3);
    let formControlCO4 = formControlPg.getCoUnderSectionTitleByText(sectionId, 4);
    let formControlCO6 = formControlPg.getCoUnderSectionTitleByText(sectionId, 6);
    let formControlCO8 = formControlPg.getCoUnderSectionTitleByText(sectionId, 8);

    await expect(await (await formControlCO1.inputTextCO.element())).toBeDisplayedInViewport({message:'<ux-form-control><input-text> CO1 -> is not displayed on page'});
    await expect(await formControlCO1.isReadOnly()).toBe(false, '<ux-form-control> CO1 should NOT be ReadOnly');
    await expect(await formControlCO2.isReadOnly()).toBe(true, '<ux-form-control> CO2 should be ReadOnly');
    await expect(await formControlCO3.inputTextCO.isDisabled()).toBe(false, '<ux-form-control><input-text> CO3 should NOT be Disable');
    await expect(await formControlCO4.inputTextCO.isDisabled()).toBe(true, '<ux-form-control><input-text> CO4 should be Disable');

    await expect(await formControlCO6.inputTextCO.hasMaxLength()).toBe(true, '<ux-form-control><input-text> CO6 should have max lenght');
    await expect(await formControlCO6.inputTextCO.maxLength()).toBe('20', '<ux-form-control><input-text> CO6 max lenght should be 20');
    await expect(await $(formControlCO6.inputTextCO.maxLengthIndicator)).toHaveText('20', {wait: 1000, message: '<ux-form-control><input-text> CO6 max lenght indicatorf should be 20'});
    await (await $(formControlCO6.inputTextCO.input)).setValue(utils.getRandomdString(5));
    await expect(await $(formControlCO6.inputTextCO.maxLengthIndicator)).toHaveText('15', {wait: 1000, message: '<ux-form-control><input-text> CO6 max lenght indicatorf should be 15'});

    await expect(await formControlCO8.inputTextCO.maxLength()).toBe('20', '<ux-form-control><input-text> CO8 max lenght should be 0');
    await expect(await $(formControlCO8.inputTextCO.maxLengthIndicator)).toHaveText('0', {wait: 1000, message: '<ux-form-control><input-text> CO8 max lenght indicatorf should be 0'});
    await expect(await formControlCO8.inputTextCO.hasError()).toBe(true, '<ux-form-control><input-text> CO8 should have <max lenght error> present and displayed')
    await expect(await $(formControlCO8.inputTextCO.controlFeedbackCO.message)).toHaveText('Maximum length reached', {wait: 1000, message: '<ux-form-control><input-text> CO8 error message differs from expected'});
  });
  it('should verify the <Input number> type methods', async () => {
    browser.addTestMeta({zephyrStep: "371977"});
    let sectionId= 'input-number';
    let pageSection = await $(formControlPg.sectionById(sectionId));
    await pageSection.scrollIntoView();

    let formControlCO1 = formControlPg.getCoUnderSectionTitleByText(sectionId, 1);
    let formControlCO2 = formControlPg.getCoUnderSectionTitleByText(sectionId, 2);
    let formControlCO3 = formControlPg.getCoUnderSectionTitleByText(sectionId, 3);
    let formControlCO5 = formControlPg.getCoUnderSectionTitleByText(sectionId, 5);

    await expect(await (await formControlCO1.inputNumberCO.element())).toBeDisplayedInViewport({message:'<ux-form-control><input-number> CO1 -> is not displayed on page'});

    await expect(await formControlCO3.inputNumberCO.isDisabled()).toBe(false, '<ux-form-control><input-number> CO3 should NOT be Disable');
    await expect(await formControlCO5.inputNumberCO.isDisabled()).toBe(true, '<ux-form-control><input-number> CO4 should be Disable');

    await expect(await formControlCO1.inputNumberCO.isReadOnly()).toBe(false, '<ux-form-control><input-number> CO1 should NOT be ReadOnly');
    await expect(await formControlCO2.inputNumberCO.isReadOnly()).toBe(true, '<ux-form-control><input-number> CO2 should be ReadOnly');
  });
  it('should verify the <radio-type> type methods', async () => {
    browser.addTestMeta({zephyrStep: "371979"});
    let sectionId= 'radio-type';
    let pageSection = await $(formControlPg.sectionById(sectionId));
    await pageSection.scrollIntoView();

    let formControlCO1 = formControlPg.getCoUnderSectionTitleByText(sectionId, 1);
    let formControlCO3 = formControlPg.getCoUnderSectionTitleByText(sectionId, 3);
    let formControlCO5 = formControlPg.getCoUnderSectionTitleByText(sectionId, 5);
    let formControlCO6 = formControlPg.getCoUnderSectionTitleByText(sectionId, 6);

    await expect(await (await formControlCO1.radioCO.element())).toBeDisplayedInViewport({message:'<ux-form-control><radio-type> CO1 -> is not displayed on page'});

    await expect(await formControlCO1.radioCO.isDisabled()).toBe(false, '<ux-form-control><radio-type> CO1 should NOT be Disabled');
    await expect(await formControlCO5.radioCO.isDisabled()).toBe(true, '<ux-form-control><radio-type> CO5 should be Disabled');

    await expect(await formControlCO3.isReadOnly()).toBe(false, '<ux-form-control><radio-type> CO3 should NOT be ReadOnly');
    await expect(await formControlCO6.isReadOnly()).toBe(true, '<ux-form-control><radio-type> CO2 should be ReadOnly');

    await expect(await (await $(formControlCO1.radioCO.currentPath)).isSelected()).toBe(false, '<ux-form-control><radio-type> CO1 should NOT be selected');
    await (await $(formControlCO1.radioCO.radioLabel)).click();
    await expect(await (await $(formControlCO1.radioCO.currentPath)).isSelected()).toBe(true,
      '<ux-form-control><radio-type> CO1 should be selected after clicking the CO1 label');
    await expect(await $(formControlCO6.readOnlyValue)).toHaveText('Readonly value', {wait: 1000, message: '<ux-form-control> CO6 value doesn\'t match with the expected value'});
  });
  it('should verify the <select-type> method', async () => {
    browser.addTestMeta({zephyrStep: "371980"});
    let sectionId= 'select-type';
    let pageSection = await $(formControlPg.sectionById(sectionId));
    await pageSection.scrollIntoView();

    let formControlCO1 = formControlPg.getCoUnderSectionTitleByText(sectionId, 1);
    let formControlCO2 = formControlPg.getCoUnderSectionTitleByText(sectionId, 2);
    let formControlCO3 = formControlPg.getCoUnderSectionTitleByText(sectionId, 3);
    let formControlCO10 = formControlPg.getCoUnderSectionTitleByText(sectionId, 10);

    await expect(await (await formControlCO1.selectCO.element())).toBeDisplayedInViewport({message:'<ux-form-control><select-type> CO1 -> is not displayed on page'});

    await expect(await formControlCO1.isReadOnly()).toBe(false, '<ux-form-control> CO1 should NOT be ReadOnly');
    await expect(await formControlCO2.isReadOnly()).toBe(true, '<ux-form-control> CO2 should be ReadOnly');

    await expect(await formControlCO1.selectCO.isDisabled()).toBe(false, '<ux-form-control><select-type> CO1 should NOT be Disabled');
    await expect(await formControlCO3.selectCO.isDisabled()).toBe(true, '<ux-form-control><select-type> CO3 should be Disabled');

    await expect(await (await $(formControlCO1.selectCO.currentPath)).getAttribute('value')).toBe(null, '<ux-form-control><select-type> CO1 should have no option selected');
    await (await $(formControlCO1.selectCO.currentPath)).click();
    let option2 = await $(formControlCO1.selectCO.getOptionByValue('option2'));
    await expect(option2).toBeDisplayed({wait: 3000, message:'<ux-form-control><select-type> CO1 - Option 2 is not displayed on page'});
    await option2.click();
    if (await option2.isDisplayed()) {
      await option2.click();
    }
    await expect(await (await $(formControlCO1.selectCO.currentPath)).getValue()).toBe('option2',
      '<ux-form-control><select-type> CO1 should have option2 selected after clicking on it');
    await expect(await formControlCO1.selectCO.optionListHasGroups()).toBe(false,'<ux-form-control><select-type> CO1 should NOT have groups');
    await expect(await formControlCO10.selectCO.optionListHasGroups()).toBe(true,'<ux-form-control><select-type> CO10 should have groups');

    await (await $(formControlCO10.selectCO.currentPath)).click();
    let opt1 = await $(formControlCO10.selectCO.getGroupOptionByValue('group 2', 'group2_option1'));
    await expect(opt1).toBeDisplayed({wait: 3000, message:'<ux-form-control><select-type> CO10 - Group2-Option1 is not displayed on page'});
    await opt1.click();
    if (await opt1.isDisplayed()) {
      await option2.click();
    }
    await expect(await (await $(formControlCO10.selectCO.currentPath)).getValue()).toBe('group2_option1',
      '<ux-form-control><select-type> CO10 should have value 1 selected after clicking on it');
  });
  it('should verify the <textarea-type> method', async () => {
    browser.addTestMeta({zephyrStep: "371981"});
    let sectionId = 'textarea-type';
    let pageSection = await $(formControlPg.sectionById(sectionId));
    await pageSection.scrollIntoView();

    let formControlCO1 = formControlPg.getCoUnderSectionTitleByText(sectionId, 1);
    let formControlCO2 = formControlPg.getCoUnderSectionTitleByText(sectionId, 2);
    let formControlCO3 = formControlPg.getCoUnderSectionTitleByText(sectionId, 3);
    let formControlCO6 = formControlPg.getCoUnderSectionTitleByText(sectionId, 6);
    let formControlCO7 = formControlPg.getCoUnderSectionTitleByText(sectionId, 7);
    let formControlCO9 = formControlPg.getCoUnderSectionTitleByText(sectionId, 9);

    await expect(await (await formControlCO1.textareaCO.element())).toBeDisplayedInViewport({message:'<ux-form-control><textarea-type> CO1 -> is not displayed on page'});

    await expect(await formControlCO1.isReadOnly()).toBe(false, '<ux-form-control> CO1 should NOT be ReadOnly');
    await expect(await formControlCO2.isReadOnly()).toBe(true, '<ux-form-control> CO2 should be ReadOnly');

    await expect(await formControlCO1.textareaCO.isDisabled()).toBe(false, '<ux-form-control><textarea-type> CO1 should NOT be Disabled');
    await expect(await formControlCO3.textareaCO.isDisabled()).toBe(true, '<ux-form-control><textarea-type> CO3 should be Disabled');

    await expect(await $(formControlCO2.readOnlyValue)).toHaveText('read only value', {wait: 1000, message: '<ux-form-control> CO2 value doesn\'t match with the expected value'});
    await expect(await (await $(formControlCO6.textareaCO.textareaField)).getAttribute('rows')).toBe('10', '<ux-form-control><textarea-type> CO6 Row value doesn\'t match with the expected value');

    await expect(await formControlCO7.textareaCO.hasMaxLength()).toBe(true, '<ux-form-control><textarea-type> CO7 should have max lenght defined');
    await expect(await formControlCO1.textareaCO.hasMaxLength()).toBe(false, '<ux-form-control><textarea-type> CO1 should NOT have max lenght defined');
    await expect(await formControlCO7.textareaCO.maxLength()).toBe('4000', '<ux-form-control><textarea-type> CO7 should have max lenght of 4000 characters');
    await expect(await $(formControlCO7.textareaCO.maxLengthIndicator)).toHaveText('4000', {wait: 1000, message: '<ux-form-control><textarea-type> CO7 should have max lenght indicator of 4000 characters'});

    await (await $(formControlCO7.textareaCO.textareaField)).setValue(utils.getRandomdString(50));
    await expect(await $(formControlCO7.textareaCO.maxLengthIndicator)).toHaveText('3950', {wait: 1000, message:
      '<ux-form-control><textarea-type> CO7 should have max lenght indicator of 3950 characters'});

    // generating a string of 4000 characters is taking ~20 second.
    // If that is acceptable we can leave this verification. If not we should remove it.
    await (await $(formControlCO9.textareaCO.textareaField)).setValue(utils.getRandomdString(4000));
    await expect(await $(formControlCO9.textareaCO.controlFeedbackCO.currentPath)).toBeDisplayed({wait: 3000, message:
      '<ux-form-control><textarea-type> CO9 - Error message is not displayed on page'});
  });
});
