import makeFakeUser from '../../factories/user';

describe('Payments Page', () => {
  beforeEach(() => {
    // Place any setup code here, such as logging in or navigating to the payments page
    const currentUser = makeFakeUser();
    cy.stubAuthenticate({ ...currentUser });
    cy.intercept('GET', /\S+\/invoice_history\?limit=10&cursor=0/, { fixture: 'payments_page1' }).as('getPayments1');
    cy.intercept('GET', /\S+\/invoice_history\?limit=10&cursor=10/, { fixture: 'payments_page2' }).as('getPayments2');
    cy.intercept('GET', /\S+\/invoice_history\?limit=10&cursor=20/, { fixture: 'payments_page3' }).as('getPayments3');
  });

  describe('in desktop', () => {

    beforeEach(() => {
      cy.viewport('macbook-13');
    });

    it('should list user\'s payments', () => {
      // Call the external API that fetches the payment records
      cy.visit('/account/payments')
      cy.wait('@getPayments1')
      cy.get('[data-testid="paymentsListTable"]').should('be.visible').find('tbody tr td').first().within(() => {
        cy.contains('12/01/2022')
      })

    })

    it('paginate through the payments', () => {
      // Call the external API that fetches the payment records
      cy.visit('/account/payments')
      cy.wait('@getPayments1')
      cy.get('[data-testid="paymentsListTable"]').should('be.visible').find('tbody tr').first().within(() => {
        cy.contains('12/01/2022')
      })

      // Click the next page button
      cy.get('[data-testid="nextPageButton"]').click()
      cy.wait('@getPayments2')
      cy.get('[data-testid="paymentsListTable"]').should('be.visible').find('tbody tr:nth-child(11)').first().within(() => {
        cy.contains('02/01/2022')
      })

      // Click the next page button
      cy.get('[data-testid="nextPageButton"]').click()
      cy.wait('@getPayments3')
      cy.get('[data-testid="paymentsListTable"]').should('be.visible').find('tbody tr:nth-child(22)').first().within(() => {
        cy.contains('03/01/2021')
      })
    });

  });

  describe('in mobile', () => {
      
      beforeEach(() => {
        cy.viewport('iphone-6');
      });
  
      it('should list user\'s payments', () => {
        // Call the external API that fetches the payment records
        cy.visit('/account/payments')
        cy.wait('@getPayments1')
        cy.get('[data-testid=paymentSwiper]').should('be.visible')

        for (let i = 0; i < 9; i++) {
          cy.get('.swiper-button-next').click();
          cy.wait(500);
        }
        cy.wait('@getPayments2')
        for (let i = 0; i < 10; i++) {
          cy.get('.swiper-button-next').click();
          cy.wait(500);
        }
        cy.get('.swiper-button-next').click();
        cy.wait('@getPayments3')
         for (let i = 0; i < 2; i++) {
          cy.get('.swiper-button-next').click();
          cy.wait(500);
        }
        cy.get('.swiper-button-next').should('have.class', 'swiper-button-disabled');
      });

      
  
      
   })

})