import { buildUser } from '../support/generate';

describe('anonymous MoJaams user', () => {
  const customer = buildUser();
  it('can place an order in the system', () => {
    cy.visit('/')
      .get('.bg-teal')
      .should('to.contain', 'MoJaams')
      .get('.start-btn')
      .should('be.visible')
      .should('contain', 'Create Order')
      .click()
      .get('.next')
      .should('not.exist')
      .get('.nav-btn')
      .click()
      .get('.start-btn')
      .should('contain', 'Create Order')
      .click()
      .get('.full-page.visible > .visible')
      .should('not.exist')
      .get('.full-page.visible > :nth-child(2) > :nth-child(1)')
      .click()
      .should('to.have.class', 'selected')
      .get('.full-page.visible > .visible')
      .should('exist')
      .get('.next')
      .should('not.exist')
      .get('.counter-container')
      .should('to.be.hidden')
      .get('.full-page.visible > .visible > .pizza-container > :nth-child(2)')
      .click()
      .should('to.have.class', 'selected')
      .get('.counter-container')
      .should('to.be.visible')
      .should('contain', '1')
      .get('.next')
      .should('exist')
      .get('[title="I want less!"] > .svg-inline--fa')
      .click()
      .get('.counter')
      .should('contain', '1')
      .get('[title="I want more!"] > .svg-inline--fa')
      .click()
      .click()
      .get('.counter')
      .should('contain', '3')
      .get('.full-page.visible > :nth-child(2) > :nth-child(2)')
      .click()
      .get('.full-page.visible > :nth-child(2) > :nth-child(1)')
      .should('not.have.class', 'selected')
      .get('.counter-container')
      .should('to.be.hidden')
      .get('.full-page.visible > .visible > .pizza-container')
      .should(($items) => {
        const variants = $items.map((_, el) => {
          return Cypress.$(el).attr('class');
        });

        expect(variants.get()).not.have.class('selected');
      })
      .get('.next')
      .should('not.exist')
      .get('.full-page.visible > .visible > .pizza-container > :nth-child(1)')
      .click()
      .get('.counter-container')
      .should('to.be.visible')
      .should('contain', '1')
      .get('[title="I want more!"] > .svg-inline--fa')
      .click()
      .get('.counter')
      .should('contain', '2')
      .get('.next')
      .should('exist')
      .click()
      .get('strong')
      .should('contain', '2')
      .get('.order-item.empty')
      .should('not.exist')
      .get('.back')
      .should('contain', 'ADD MORE')
      .get('.next')
      .should('contain', 'CONFIRM')
      .get('.order-item button')
      .invoke('show')
      .get('.order-item > div > :nth-child(1)')
      .should('contain', 'UPDATE')
      .get('.order-item > div > :nth-child(2)')
      .should('contain', 'DELETE')
      .click()
      .get('.order-item.empty')
      .should('exist')
      .should('contain', "Nothing's Here!")
      .get('.nav-btn.back')
      .should('not.exist')
      .get('.nav-btn.next')
      .should('not.exist')
      .get('button')
      .should('contain', 'ADD PIZZA')
      .click()
      .get('.next')
      .should('not.exist')
      .get('.counter-container')
      .should('to.be.hidden')
      .get('.full-page.visible > .visible > .pizza-container')
      .should(($items) => {
        const variants = $items.map((_, el) => {
          return Cypress.$(el).attr('class');
        });

        expect(variants.get()).not.have.class('selected');
      })
      .get('.full-page.visible > :nth-child(2) > :nth-child(2)')
      .click()
      .get('.full-page.visible > .visible > .pizza-container > :nth-child(1)')
      .click()
      .should('to.have.class', 'selected')
      .get('.counter-container')
      .should('to.be.visible')
      .should('contain', '1')
      .get('[title="I want more!"] > .svg-inline--fa')
      .click()
      .get('.next')
      .should('exist')
      .click()
      .get('.order-item button')
      .invoke('show')
      .get('.order-item > div > :nth-child(1)')
      .click()
      .get('.full-page.visible > :nth-child(2) > :nth-child(2)')
      .should('to.have.class', 'selected')
      .get('.full-page.visible > .visible > .pizza-container > :nth-child(1)')
      .should('to.have.class', 'selected')
      .get('.counter')
      .should('contain', '2')
      .get('[title="I want less!"] > .svg-inline--fa')
      .click()
      .get('.next')
      .click()
      .get('strong')
      .should('contain', '1')
      .get('.next')
      .click()
      .get('.next')
      .should('not.exist')
      .get('[placeholder="your name, please?"]')
      .should('have.focus')
      .type(customer.name)
      .get('[placeholder="and the address to deliver your pizza?"]')
      .click()
      .type(customer.address)
      .get('.next')
      .should('exist')
      .get('.back')
      .click()
      .get('.next')
      .click()
      .get('[placeholder="your name, please?"]')
      .should('have.value', customer.name)
      .get('[placeholder="and the address to deliver your pizza?"]')
      .should('have.value', customer.address)
      .get('.next')
      .should('exist')
      .click()
      .get('h3')
      .should('contain', 'Congratulations!');
  });
});