/// <reference types="cypress" />

import useNativeAppCheck from '../../../src/hooks/useNativeAppCheck';

describe('Create new session', () => {
  beforeEach(() => {
    cy.stubAuthenticate({ id: '6' });
    cy.intercept('GET', /\S+\/users\/\d+\/friends/, { fixture: 'friends' }).as('friends');
   
  });

  it("adds invitees - using autocomplete list click", () => {
    cy.visit('/sessions/new');
    cy.get('[data-testid=autocomplete-text]').type('Dav')
    cy.get('[data-testid=autocomplete-list] li').should('have.length', 2)
    cy.get('[data-testid=autocomplete-list] li:first').click()
    cy.get('[data-testid=selected-invitees]').children().first().contains('David Wilson')
    cy.get('[data-testid=autocomplete-text]').type('Dav')
    cy.get('[data-testid=autocomplete-list] li').should('have.length', 1)
    cy.get('[data-testid=autocomplete-list] li').should('not.contain', 'David Wilson')
  });

  //skipping this test for now. according to the html specification, when there is a single text field in a form 
  //the behaviour is to submit the form on hitting the enter key. need to figureout a way to prevent this. 
  //https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2
  it.skip("adds invitees using autocomplete enter", () => {
    cy.visit('/sessions/new');
    cy.get('[data-testid=autocomplete-text]').type('Dav')
    cy.get('[data-testid=autocomplete-list] li').should('have.length', 2)
    cy.get('[data-testid=autocomplete-text]').type('{enter}')
    cy.get('[data-testid=selected-invitees]').children().first().contains('David Wilson')
    cy.get('[data-testid=autocomplete-text]').type('Dav')
    cy.get('[data-testid=autocomplete-list] li').should('have.length', 1)
    cy.get('[data-testid=autocomplete-list] li').should('not.contain', 'David Wilson')
  });
  
  it("removes invitees", () => {
    cy.visit('/sessions/new');
    cy.get('[data-testid=autocomplete-text]').type('Seth')
    cy.get('[data-testid=autocomplete-list] li').should('have.length', 1)
    cy.get('[data-testid=autocomplete-list] li:first').click()
    cy.get('[data-testid=selected-invitees]').children().first().contains('Seth Call')
    cy.get('[data-testid=autocomplete-text]').type('Dav')
    cy.get('[data-testid=autocomplete-list] li').should('have.length', 2)
    cy.get('[data-testid=autocomplete-list] li:first').click()
    cy.get('[data-testid=selected-invitees]').children().first().find('a').click()
    cy.get('[data-testid=selected-invitees]').children().should('have.length', 1)
    cy.get('[data-testid=selected-invitees]').children().first().find('a').click()
    cy.get('[data-testid=selected-invitees]').should('not.exist')
  });

  it("choose friends as invitees", ()=> {
    cy.visit('/sessions/new');
    cy.get('[data-testid=btn-choose-friends]').click();
    cy.get('[data-testid=modal-choose-friends]').should('be.visible').contains('Invite Friends to Session')
    cy.get('[data-testid=modal-choose-friends]').find('[type="checkbox"]').first().click()
    cy.get('[data-testid=modal-choose-friends]').contains('Add Friends').click()
    cy.get('[data-testid=selected-invitees]').children().first().contains('Seth Call')
    cy.get('[data-testid=btn-choose-friends]').click();
    cy.get('[data-testid=modal-choose-friends]').should('not.contain', 'Seth Call')
  })

  it.only("prefill form using saved data in localStorage", () => {
    cy.visit('/sessions/new');
    cy.get('[data-testid=session-privacy]').select("2")
    cy.get('[data-testid=autocomplete-text]').type('Dav')
    cy.get('[data-testid=autocomplete-list] li:first').click()
    cy.get('[data-testid=session-description]').type("My test session")
    cy.get('[data-testid=btn-create-session]').click();
    cy.reload() //refresh browser
    cy.get('[data-testid=session-privacy]').should('have.value', "2")
    cy.get('[data-testid=selected-invitees]').children().first().contains('David Wilson')
    cy.get('[data-testid=session-description]').contains('My test session')
  })

  it("submits form", () => {
    const newUrl = `jamkazam://url=http://www.jamkazam.local:3000/client#/createSession/custom~yes%7Cprivacy~2%7Cdescription~test%7CinviteeIds~1`;
    cy.visit('/sessions/new').then((win) => {
      cy.stub(win, 'open').as('windowOpen');
    });
    cy.get('[data-testid=session-privacy]').select("2")
    cy.get('[data-testid=autocomplete-text]').type('Seth')
    cy.get('[data-testid=autocomplete-list] li:first').click()
    cy.get('[data-testid=session-description]').type("test")
    cy.get('[data-testid=btn-create-session]').click();
    cy.get('@windowOpen').should('have.been.calledWith', newUrl);
    cy.get('[data-testid=btn-create-session]').should('be.disabled')
  })



 })