import Routing from '../../../../pages/eui/10x/routing-10x.js'
import CookieBannerActions from '../../../../actions/cookieBanner.js'
import UxDatePickerPage from '../../../../pages/eui/10x/ux/ux-datepicker-10x.po.js'
import DatepickerActions from '../../../../actions/datepicker-actions.js'

describe('eUI - <ux-datepicker> component object', async() => {
  let page = new UxDatePickerPage();
  it('should navigate to <ux-datepicker> component', async() => {
    browser.addTestMeta({uuid:"0fe87ca2-58cc-41fd-824f-6946584ac842", zephyrKey: "CCQA-1061", zephyrStep: "398949", reportGroups: ["eUI.10x.ux"]});
    await page.open(Routing.getUxComponentUrl('ux-datepicker'));
    await CookieBannerActions.cookieBanner(true);
    let pgTitle = await $(page.pageTitle);
    let appDocPageId = await $(page.appDocPageById('ux-datepicker'));
    let navigationList = await $(page.navigationList);
    await pgTitle.scrollIntoView();
    await expect(pgTitle).toBeDisplayed({wait:1000, message:'<ux-datepicker> page title is not displayed on page'});
    await expect(pgTitle).toHaveText('ux-datepicker', {wait: 1000, message: 'Page title text is not as expected'});
    await expect(appDocPageId).toExist({wait:1000, message:'Page Id is not present in page'});
    await expect(navigationList).toBeDisplayed({wait:1000, message:'Navigation List -> is not displayed on page'});
  });
  it('should verify the presence of the Component Object on the page', async() => {
    browser.addTestMeta({zephyrStep: "398950"});

    await expect(await $(page.datepickerFromSectionById('Default').currentPath)).toBeExisting({timeout: 5000,
      timeoutMsg: '<Default> section -> is not existing on page', interval: 100
    });

    let datepicker1 = page.datepickerByIndex(1);
    await expect(await $(datepicker1.dataE2E)).toBeExisting({ timeout: 1000,  timeoutMsg:
      'ux-datepicker by index "1" is not existing on page', interval: 100 });

    await expect(await datepicker1.defaultComponentsCount()).toBe(71,
      'There should be 71 <ux-datepicker> components on the page.');
  });
  it('should verify component elements', async() => {
    browser.addTestMeta({zephyrStep: "398951"});

    let currentSection = 'Default';
    let section = await $(page.sectionById(currentSection));
    await section.scrollIntoView();

    let datepickerCo1 = page.datepickerFromSectionByIdAndIndex('Default', 1);
    await expect(await $(datepickerCo1.input.currentPath)).toBeDisplayed({ message: 'Datepicker 1 - input is not displayed on page' });
    DatepickerActions.selectDayInCurrentMonth(datepickerCo1, '1');
    DatepickerActions.verifySelectedDay(datepickerCo1, '1');
    DatepickerActions.selectDayInCurrentMonth(datepickerCo1, '11');
    DatepickerActions.verifySelectedDay(datepickerCo1, '11');

    let subsectionTitle = await $(page.sectionTitleFromSection(page.sectionById(currentSection), 'With default values (responsive)'));
    await subsectionTitle.scrollIntoView();

    let datepickerCo3 = page.datepickerFromSectionByIdAndIndex('Default', 3);
    await DatepickerActions.selectDayInCurrentMonth(datepickerCo3, '15');
    await DatepickerActions.verifySelectedDay(datepickerCo3, '15');

  });
  it('should verify component custom elements', async() => {
    browser.addTestMeta({zephyrStep: "398952"});

    let currentSection = 'icon';
    let section = await $(page.sectionById(currentSection));
    await section.scrollIntoView();

    let datepickerCo1 = page.datepickerFromSectionByIdAndIndex(currentSection, 1);
    await expect(await $(datepickerCo1.input.currentPath)).toBeDisplayed({ message: 'Datepicker 1 - input is not displayed on page' });
    let btn1Icon = await $(datepickerCo1.datepickerBtnCo.buttonIcon);
    await expect(btn1Icon).toBeDisplayed({ message: 'Datepicker 1 - custom icon is not displayed on page' });
    DatepickerActions.selectDayInCurrentMonth(datepickerCo1, '20');

    let datepickerCo2 = page.datepickerFromSectionByIdAndIndex(currentSection, 2);
    await expect(await $(datepickerCo2.input.currentPath)).toBeDisplayed({ message: 'Datepicker 2 - input is not displayed on page' });
    let btn2Content = await $(datepickerCo2.datepickerBtnCo.buttonContent);
    await expect(btn2Content).toHaveTextContaining('Open', 'Datepicker 2 - doesnt have custom text: Open');
    await DatepickerActions.selectDayInCurrentMonth(datepickerCo2, '21');

    let datepickerCo3 = page.datepickerFromSectionByIdAndIndex(currentSection, 3);
    await expect(await $(datepickerCo3.input.currentPath)).toBeDisplayed({ message: 'Datepicker 3 - input is not displayed on page' });
    let btn3Content = await $(datepickerCo3.datepickerBtnCo.buttonContent);
    await expect(btn3Content).not.toBeDisplayed({ message: 'Datepicker 3 - doesnt have the button' });
    await DatepickerActions.selectDayInCurrentMonth(datepickerCo3, '22');
  });
  it('should verify input custom placeholder', async() => {
    browser.addTestMeta({zephyrStep: "398953"});

    let sectionId = 'placeholder';
    let section = await $(page.sectionById(sectionId));
    await section.scrollIntoView();

    let datepickerCo1 = page.datepickerFromSectionByIdAndIndex(sectionId, 1);
    let datepickerInput = await $(datepickerCo1.input.currentPath);
    await expect(datepickerInput).toBeDisplayed({ message: 'Datepicker - input is not displayed on page' });

    await expect(await datepickerCo1.inputDateFormat()).toBe('Set the date');
  });
  it('should verify isClearable', async() => {
    browser.addTestMeta({zephyrStep: "398954"});
    let currentSection = 'icon';
    let section = await $(page.sectionById(currentSection));
    await section.scrollIntoView();

    let dateCo1 = page.datepickerFromSectionByIdAndIndex(currentSection, 4);
    await expect(await $(dateCo1.input.currentPath)).toBeDisplayed({ message: 'Datepicker 1 - input is not displayed on page' });
    await expect(await dateCo1.isClearable()).toBe(true, 'Datepicker 1 - input is clearable');
    await DatepickerActions.clearDatePicker(dateCo1);

    let dateCo2 = page.datepickerFromSectionByIdAndIndex(currentSection, 5);
    await expect(await $(dateCo2.input.currentPath)).toBeDisplayed({ message: 'Datepicker 2 - input is not displayed on page' });
    await expect(await dateCo2.isClearable()).toBe(true, 'Datepicker 2 - input is clearable');
    await DatepickerActions.clearDatePicker(dateCo2);

    let dateCo3 = page.datepickerFromSectionByIdAndIndex(currentSection, 6);
    await expect(await $(dateCo3.input.currentPath)).toBeDisplayed({ message: 'Datepicker 3 - input is not displayed on page' });
    await expect(await dateCo3.isClearable()).toBe(true, 'Datepicker 3 - input is clearable');
    await DatepickerActions.clearDatePicker(dateCo3);

    // toggle to be not clearable
    let toggle = page.matSlideToggleFromSection(currentSection);
    await expect(await toggle.isSelected()).toBe(true, 'Toggle input is not selected');
    await toggle.select();
    await expect(await toggle.isSelected()).toBe(false, 'Toggle input is still selected');

    // date component should not be clearable after switching the toggle
    await expect(await dateCo1.isClearable()).toBe(false, 'Datepicker 1 - input is clearable');
    await expect(await dateCo2.isClearable()).toBe(false, 'Datepicker 2 - input is clearable');
    await expect(await dateCo3.isClearable()).toBe(false, 'Datepicker 3 - input is clearable');

    await toggle.select();
    await expect(await toggle.isSelected()).toBe(true, 'Toggle input is not selected');

    await expect(await dateCo1.isClearable()).toBe(true, 'Datepicker 1 - input is clearable');
    DatepickerActions.selectDayInCurrentMonth(dateCo1, '3');
  });
  it('should verify isDisabled', async() => {
    browser.addTestMeta({zephyrStep: "398955"});
    let currentSection = 'isDisabled';
    let section = await $(page.sectionById(currentSection));
    await section.scrollIntoView();

    let dateCo1 = page.datepickerFromSectionByIdAndIndex(currentSection, 1);
    await expect(await $(dateCo1.input.currentPath)).toBeDisplayed({ message: 'Datepicker 1 - input is not displayed on page' });
    await expect(await dateCo1.input.isDisabled()).toBe(true, 'Datepicker 1 - input is disabled');
    await expect(await dateCo1.isButtonDisabled()).toBe(true, 'Datepicker 1 - button is disabled');

    let dateCo2 = page.datepickerFromSectionByIdAndIndex(currentSection, 2);
    await expect(await $(dateCo2.input.currentPath)).toBeDisplayed({ message: 'Datepicker 2 - input is not displayed on page' });
    await expect(await dateCo2.input.isDisabled()).toBe(false, 'Datepicker 2 - input is not disabled');
    await expect(await dateCo2.isButtonDisabled()).toBe(true, 'Datepicker 2 - button is disabled');
    await  DatepickerActions.selectDayInCurrentMonth(dateCo2, '8');

    let subsectionTitle = await $(page.sectionTitleFromSection(page.sectionById(currentSection), 'Disable only the input'));
    await subsectionTitle.scrollIntoView();

    let dateCo3 = page.datepickerFromSectionByIdAndIndex(currentSection, 3);
    await expect(await $(dateCo3.input.currentPath)).toBeDisplayed({ message: 'Datepicker 3 - input is not displayed on page' });
    await expect(await dateCo3.input.isDisabled()).toBe(true, 'Datepicker 3 - input is not disabled');
    await expect(await dateCo3.isButtonDisabled()).toBe(false, 'Datepicker 3 - button is disabled');
  });
  it('should verify isReadOnly', async() => {
    browser.addTestMeta({zephyrStep: "398956"});
    let currentSection = 'isReadOnly';
    let section = await $(page.sectionById(currentSection));
    await section.scrollIntoView();

    let dateCo1 = page.datepickerFromSectionByIdAndIndex(currentSection, 1);
    await expect(await $(dateCo1.input.currentPath)).toBeDisplayed({ message: 'Datepicker 1 - input is not displayed on page' });
    await expect(await dateCo1.isInputReadOnly()).toBe(true, 'Datepicker 1 - input is not read only');
  });
  it('should verify monthly view', async() => {
    browser.addTestMeta({zephyrStep: "398957"});
    let currentSection = 'month-picker';
    let section = await $(page.sectionById(currentSection));
    await section.scrollIntoView();

    let dateCo1 = page.datepickerFromSectionByIdAndIndex(currentSection, 1);
    await expect(await $(dateCo1.input.currentPath)).toBeDisplayed({ message: 'Datepicker 1 - input is not displayed on page' });

    await DatepickerActions.selectMonthInCurrentYear(dateCo1, 'JAN');
    await DatepickerActions.verifySelectedMonth(dateCo1, 'JAN');

    await DatepickerActions.selectMonthInCurrentYear(dateCo1, 'FEB');
    await DatepickerActions.verifySelectedMonth(dateCo1, 'FEB');
  });
  it('should verify reactive forms', async() => {
    browser.addTestMeta({zephyrStep: "398958"});
    let currentSection = 'reactive-forms';
    let section = await $(page.sectionById(currentSection));
    await section.scrollIntoView();

    let dateCo1 = page.datepickerFromSectionByIdAndIndex(currentSection, 1);
    await expect(await $(dateCo1.input.currentPath)).toBeDisplayed({message: 'Datepicker 1 - input is not displayed on page' });

    await DatepickerActions.selectDayInCurrentMonth(dateCo1, '1');
    await DatepickerActions.verifySelectedDay(dateCo1, '1');

    // btn to reset the content
    let btnReset = await $(page.buttonFromSectionByIdAndText(currentSection, 'Reset').button);
    await expect(btnReset).toBeDisplayed({message: 'Button Reset is not displayed on page' });
    await btnReset.click();
    await expect(await (await $(dateCo1.input.currentPath)).getValue()).toBe("");

    // btn to toggle enabled-disabled
    let btnToggle = await $(page.buttonFromSectionByIdAndText(currentSection, 'Toggle disabled').button);
    await expect(await dateCo1.input.isDisabled()).toBe(false, 'Datepicker 1 - input is disabled');
    await expect(await dateCo1.isButtonDisabled()).toBe(false, 'Datepicker 1 - button is disabled');
    await btnToggle.click();
    await expect(await dateCo1.input.isDisabled()).toBe(true, 'Datepicker 1 - input is not disabled');
    await expect(await dateCo1.isButtonDisabled()).toBe(true, 'Datepicker 1 - button is not disabled');

  });
  it('should verify multi year view', async() => {
    browser.addTestMeta({zephyrStep: "398959"});
    let currentSection = 'year-picker';
    let section = await $(page.sectionById(currentSection));
    await section.scrollIntoView();

    let dateCo1 = page.datepickerFromSectionByIdAndIndex(currentSection, 1);
    await expect(await $(dateCo1.input.currentPath)).toBeDisplayed({ message: 'Datepicker 1 - input is not displayed on page' });

    await DatepickerActions.selectYear(dateCo1, '2019');
    await DatepickerActions.verifySelectedYear(dateCo1, '2019');

    await DatepickerActions.selectYear(dateCo1, '2020');
    await DatepickerActions.verifySelectedYear(dateCo1, '2020');

    currentSection = 'icon';
    section = await $(page.sectionById(currentSection));
    await section.scrollIntoView();

    let datepickerCo2 = page.datepickerFromSectionByIdAndIndex(currentSection, 2);
    let datepickerCo3 = page.datepickerFromSectionByIdAndIndex(currentSection, 3);
    await expect(await datepickerCo2.noButton()).toBe(false, 'Component shold not be NO button');
    await expect(await datepickerCo3.noButton()).toBe(true, 'Component shold be NO button');
  });
});
