describe('The admin text detail page', () => {
  beforeEach(() => {
    cy.exec('npm run db:seed')
    cy.loginAsAdmin()
    cy.intercept('GET', '/api/texts/0').as('getText')
    cy.intercept('GET', '/api/nodes/0').as('getNodes')
    cy.visit('/admin/texts/0')
    cy.wait('@getText')
    cy.wait('@getNodes')
  })

  afterEach(() => {
    cy.exec('npm run db:wipe')
  })

  it('shows the text name as a heading', () => {
    cy.get('h1').should('contain', 'Tanach')
  })

  it('shows the root node', () => {
    cy.get('#text-detail li').first().should('contain', 'Tanach')
  })

  it('shows a child node under the root node', () => {
    cy.get('#text-detail > ul > li > ul > li').should('contain', 'Torah')
  })

  it('shows an "Add child" button on each node', () => {
    cy.get('#text-detail li').each(($li) => {
      cy.wrap($li).find('button.add-child').should('exist')
    })
  })

  it('clicking "Add child" reveals an inline form', () => {
    cy.get('#text-detail li').first().children('button.add-child').click()
    cy.get('#text-detail li').first().children('input.child-title').should('be.visible')
    cy.get('#text-detail li').first().children('button.save-child').should('be.visible')
  })

  it('can add a child to the root node', () => {
    cy.intercept('POST', '/api/nodes').as('createNode')
    cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')

    cy.get('#text-detail > ul > li').first().children('button.add-child').click()
    cy.get('#text-detail > ul > li').first().children('input.child-title').type('New Child Node')
    cy.get('#text-detail > ul > li').first().children('button.save-child').click()

    cy.wait('@createNode').its('response.statusCode').should('eq', 201)
    cy.wait('@getNodesRefresh')

    cy.get('#text-detail li').should('contain', 'New Child Node')
  })

  it('can add a child to a child node', () => {
    cy.intercept('POST', '/api/nodes').as('createNode')
    cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')

    cy.get('#text-detail > ul > li > ul > li').first().children('button.add-child').click()
    cy.get('#text-detail > ul > li > ul > li').first().children('input.child-title').type('Nested Child Node')
    cy.get('#text-detail > ul > li > ul > li').first().children('button.save-child').click()

    cy.wait('@createNode').its('response.statusCode').should('eq', 201)
    cy.wait('@getNodesRefresh')

    cy.get('#text-detail li').should('contain', 'Nested Child Node')
  })

  it('keeps a parent expanded after adding a child to it', () => {
    cy.intercept('POST', '/api/nodes').as('createNode')
    cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')

    cy.get('#text-detail > ul > li > ul > li')
      .first()
      .find('button.toggle-children')
      .click()
    cy.get('#text-detail > ul > li > ul > li > ul')
      .first()
      .should('be.visible')

    cy.get('#text-detail > ul > li > ul > li')
      .first()
      .children('button.add-child')
      .click()
    cy.get('#text-detail > ul > li > ul > li')
      .first()
      .children('input.child-title')
      .type('Shemos')
    cy.get('#text-detail > ul > li > ul > li')
      .first()
      .children('button.save-child')
      .click()

    cy.wait('@createNode').its('response.statusCode').should('eq', 201)
    cy.wait('@getNodesRefresh')

    cy.get('#text-detail > ul > li > ul > li > ul')
      .first()
      .should('be.visible')
    cy.get('#text-detail > ul > li > ul > li > ul')
      .first()
      .should('contain', 'Shemos')
  })

  it('newly added child persists after page reload', () => {
    cy.intercept('POST', '/api/nodes').as('createNode')
    cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')

    cy.get('#text-detail > ul > li').first().children('button.add-child').click()
    cy.get('#text-detail > ul > li').first().children('input.child-title').type('Persistent Child')
    cy.get('#text-detail > ul > li').first().children('button.save-child').click()

    cy.wait('@createNode')
    cy.wait('@getNodesRefresh')

    cy.intercept('GET', '/api/texts/0').as('getTextReload')
    cy.intercept('GET', '/api/nodes/0').as('getNodesReload')
    cy.reload()
    cy.wait('@getTextReload')
    cy.wait('@getNodesReload')

    cy.get('#text-detail li').should('contain', 'Persistent Child')
  })
})