describe('Create plan modal on the home page', () => {
    beforeEach(() => {
        cy.exec('npm run db:seed')
        cy.intercept('GET', '/api/texts').as('getTexts')
        cy.visit('/home')
        cy.wait('@getTexts')
    })

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

    it('shows a "Create plan" button on each text', () => {
        cy.get('#texts-list li').each((textItem) => {
            cy.wrap(textItem).find('button.create-plan').should('exist')
        })
    })

    it('hides the create plan modal by default', () => {
        cy.get('#create-plan-modal').should('not.be.visible')
    })

    it('shows the modal when clicking "Create plan"', () => {
        cy.get('#texts-list li').first()
            .find('button.create-plan').click()
        cy.get('#create-plan-modal').should('be.visible')
    })

    it('modal contains name, date start, date end, save, cancel', () => {
        cy.get('#texts-list li').first()
            .find('button.create-plan').click()
        cy.get('#create-plan-modal input.plan-name').should('be.visible')
        cy.get('#create-plan-modal input.plan-date-start')
            .should('be.visible')
        cy.get('#create-plan-modal input.plan-date-end')
            .should('be.visible')
        cy.get('#create-plan-modal button.save-plan').should('be.visible')
        cy.get('#create-plan-modal button.cancel-plan').should('be.visible')
    })

    it('hides the modal when clicking "Cancel"', () => {
        cy.get('#texts-list li').first()
            .find('button.create-plan').click()
        cy.get('#create-plan-modal').should('be.visible')
        cy.get('#create-plan-modal button.cancel-plan').click()
        cy.get('#create-plan-modal').should('not.be.visible')
    })

    it('submits plan details to /api/plans', () => {
        cy.intercept('POST', '/api/plans').as('createPlan')
        cy.get('#texts-list li').first()
            .find('button.create-plan').click()
        cy.get('#create-plan-modal input.plan-name')
            .type('My reading plan')
        cy.get('#create-plan-modal input.plan-date-start')
            .type('2025-01-01')
        cy.get('#create-plan-modal input.plan-date-end')
            .type('2025-01-31')
        cy.get('#create-plan-modal button.save-plan').click()
        cy.wait('@createPlan').then((createPlanRequest) => {
            expect(createPlanRequest.response.statusCode).to.eq(201)
            expect(createPlanRequest.request.body).to.deep.equal({
                userId: 0,
                textId: 0,
                name: 'My reading plan',
                dateStart: '2025-01-01',
                dateEnd: '2025-01-31',
            })
        })
    })

    it('closes the modal after successful submit', () => {
        cy.intercept('POST', '/api/plans').as('createPlan')
        cy.get('#texts-list li').first()
            .find('button.create-plan').click()
        cy.get('#create-plan-modal input.plan-name')
            .type('Another plan')
        cy.get('#create-plan-modal input.plan-date-start')
            .type('2025-02-01')
        cy.get('#create-plan-modal input.plan-date-end')
            .type('2025-02-28')
        cy.get('#create-plan-modal button.save-plan').click()
        cy.wait('@createPlan')
        cy.get('#create-plan-modal').should('not.be.visible')
    })

    it('does not submit if name is empty', () => {
        cy.intercept('POST', '/api/plans').as('createPlan')
        cy.get('#texts-list li').first()
            .find('button.create-plan').click()
        cy.get('#create-plan-modal input.plan-date-start')
            .type('2025-01-01')
        cy.get('#create-plan-modal input.plan-date-end')
            .type('2025-01-31')
        cy.get('#create-plan-modal button.save-plan').click()
        cy.get('@createPlan.all').should('have.length', 0)
    })
})