// 每一 describe 就是一個測試套件
// 每一 it 就是一個測試命令
describe('Save Log and Filter', ()=>{
  beforeEach(() => {
    cy.visit('https://REDACTED-HOST/files');
    cy.login();
    cy.visit('https://REDACTED-HOST/files');

    // enter log
    cy.url().should('include', 'files');
    cy.contains('.fileName', 'random').dblclick(); // 選取 'random' log 檔
    cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁
    cy.url().should('include', 'discover/logs'); // 斷言在 discover/logs/:id 路徑
    cy.wait(3000)
    cy.get('#iconFilter').click(); // 選取 Filter sidebar
  });

  // it('Sequence, Have activity(s).', () => {
  //   // select radio
  //   cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
  //   cy.contains('label', 'Have activity(s)') // 選取 Radio 'Have activity(s)'
  //     .prev(2)
  //     .find('input')
  //     .should('have.attr', 'type', 'radio') // select the previous element
  //     .should('be.checked'); // confirm it's type radio (optional)

  //   // No selected.
  //   cy.contains('button', 'Apply').click();
  //   cy.get('.v-toast__text').should('contain', 'Not selected');
  //   cy.wait(3000);

  //   // Clear selected item.
  //   cy.get('.allCheckboxAct') // 選取 all select
  //     .find('input')
  //     .should('not.be.visible').check({ force: true}).should('be.checked'); // 打開隱藏項目並選取
  //   cy.contains('button', 'Clear').click();
  //   cy.get('.allCheckboxAct') // 選取 all select
  //     .find('input')
  //     .should('not.be.visible')
  //     .should('not.be.checked')
  //   cy.wait(3000);

  //   // selected item
  //   cy.get('table tr:nth-child(2) input[type="checkbox"]').check({force: true});
  //   cy.contains('button', 'Apply').click();
  //   cy.get('#tabFunnel').click();
  //   cy.contains('p', 'Sequence');
  //   cy.contains('span', 'Include');
  //   cy.contains('button', 'Apply All').click();

  //   // make sure create map again.
  //   cy.get('header').click();
  //   cy.get('#iconState').click();
  //   cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
  //     const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
  //     expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
  //   });
  // });

  // it('Sequence, Start', () => {
  //   // select radio
  //   cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
  //   cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
  //     .prev(2)
  //     .find('input')
  //     .should('have.attr', 'type', 'radio') // select the previous element
  //     .check({ force: true })
  //     .should('be.checked'); // confirm it's type radio (optional)

  //   // No selected.
  //   cy.contains('button', 'Apply').click();
  //   cy.get('.v-toast__text').should('contain', 'Not selected');
  //   cy.wait(3000);

  //   // Clear selected item.
  //   cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true}); // 選取第二個
  //   cy.contains('button', 'Clear').click();
  //   cy.get('table tr:nth-child(2) input[type="radio"]').should('not.be.checked')
  //   cy.wait(3000);

  //   // selected item
  //   cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true});
  //   cy.contains('button', 'Apply').click();
  //   cy.get('#tabFunnel').click();
  //   cy.contains('p', 'Sequence');
  //   cy.contains('span', 'Start');
  //   cy.contains('button', 'Apply All').click();

  //   //make sure create map again.
  //   cy.get('header').click();
  //   cy.get('#iconState').click();
  //   cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
  //     const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
  //     expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
  //   });
  // });

  // it('Sequence, End', () => {
  //   // select radio
  //   cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
  //   cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
  //     .prev(2)
  //     .find('input')
  //     .should('have.attr', 'type', 'radio') // select the previous element
  //     .check({ force: true })
  //     .should('be.checked'); // confirm it's type radio (optional)
  //   cy.get('input#End1').check({ force: true });

  //   // No selected.
  //   cy.contains('button', 'Apply').click();
  //   cy.get('.v-toast__text').should('contain', 'Not selected');
  //   cy.wait(3000);

  //   // Clear selected item.
  //   cy.get('table tr:nth-child(1) input[type="radio"]').check({force: true}); // 選取第一個
  //   cy.contains('button', 'Clear').click();
  //   cy.get('table tr:nth-child(1) input[type="radio"]').should('not.be.checked')
  //   cy.wait(3000);

  //   // selected item
  //   cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true});
  //   cy.contains('button', 'Apply').click();
  //   cy.get('#tabFunnel').click();
  //   cy.contains('p', 'Sequence');
  //   cy.contains('span', 'End');
  //   cy.contains('button', 'Apply All').click();

  //   // make sure create map again.
  //   cy.get('header').click();
  //   cy.get('#iconState').click();
  //   cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
  //     const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
  //     expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
  //   });
  // });

  it('Sequence, Start & End', () => {
    // select radio
    cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
    cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
      .prev(2)
      .find('input')
      .should('have.attr', 'type', 'radio') // select the previous element
      .check({ force: true })
      .should('be.checked'); // confirm it's type radio (optional)
    cy.get('input[id="Start & End2"]').check({ force: true });

    // No selected.
    cy.contains('button', 'Apply').click();
    cy.get('.v-toast__text').should('contain', 'Both Start and End must be selected');
    cy.wait(3000);

    // 選取 "start" 的 <table>
    cy.contains('p', 'Start activity')
      .parents('div') // 回到 p 的父層 div
      .eq(1) // 同階層的第二個 div
      .find('table') // 向下找 table
      .as('startTable'); // 將選取的元素命名，使用 @startTable 來操作
    // 選取 "end" 的 <table>
    cy.contains('p', 'End activity')
      .parents('div')
      .eq(1)
      .find('table')
      .as('endTable'); // 使用 @endTable 來操作

    // Clear selected item.
    cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
    cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
    cy.contains('button', 'Clear').click();
    cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
    cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
    cy.wait(3000);

    // selected item
    cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
    cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
    cy.contains('button', 'Apply').click();
    cy.get('#tabFunnel').click();
    cy.contains('p', 'Sequence');
    cy.contains('span', 'Start')
      .parent()
      .contains('span', 'End'); // 斷言 text 是否包含 Start 和 End.
    cy.contains('button', 'Apply All').click();

    // make sure create map again.
    cy.get('header').click();
    cy.get('#iconState').click();
    cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
      const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
      expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
    });
  });

});