import { getMinimalMe } from '../../../support/helpers';
import { SELECTED_CLASS_ID_ENCODED } from '../../../fixtures/mocks';

describe('The Rooms Page', () => {
  const getOperations = (isTeacher) => ({
    MeQuery: getMinimalMe({ isTeacher }),
    RoomsQuery: {
      rooms: [
        {
          schoolClass: {
            id: SELECTED_CLASS_ID_ENCODED,
          },
        },
      ],
    },
  });

  const getOnboardingOperations = (isTeacher) => {
    const operations = getOperations(isTeacher);
    return {
      ...operations,
      RoomsQuery: {
        rooms: [],
      },
    };
  };

  beforeEach(() => {
    cy.setup();
  });

  it('shows the onboarding page', () => {
    cy.mockGraphqlOps({
      operations: getOnboardingOperations(true),
    });

    cy.visit('/rooms');
    cy.getByDataCy('page-title').should('contain', 'Räume');
    cy.getByDataCy('rooms-onboarding-text').should('contain', 'Hier können Sie Räume erstellen');
    cy.getByDataCy('page-footer').should('not.exist');
    cy.getByDataCy('create-room-button').should('contain', 'Raum erstellen').click();
    cy.url().should('include', 'new-room');
  });

  it('shows the onboarding page without button for student', () => {
    cy.mockGraphqlOps({
      operations: getOnboardingOperations(false),
    });

    cy.visit('/rooms');
    cy.getByDataCy('page-title').should('contain', 'Räume');
    cy.getByDataCy('rooms-onboarding-text').should('contain', 'Hier können Sie Räume erstellen');
    cy.getByDataCy('page-footer').should('not.exist');
    cy.getByDataCy('create-room-button').should('not.exist');
  });

  it('goes to the rooms page', () => {
    const operations = getOperations(true);
    cy.mockGraphqlOps({
      operations,
    });

    cy.visit('/rooms');

    cy.getByDataCy('room-widget').should('have.length', 1);
    cy.get('[data-cy=add-room]').should('exist');
  });

  it('actions should not exist for student', () => {
    const operations = getOperations(false);
    cy.mockGraphqlOps({
      operations,
    });

    cy.visit('/rooms');

    cy.getByDataCy('room-widget').should('have.length', 1);
    cy.getByDataCy('toggle-more-actions-menu').should('not.exist');
  });

  it('adds a room as teacher', () => {
    const MeQuery = getMinimalMe({ isTeacher: true });
    const getRoom = (title, appearance, description) => {
      let id = title.toLowerCase().replace(' ', '-');
      return {
        id,
        slug: id,
        title: title,
        entryCount: 3,
        appearance: appearance,
        description: description,
        schoolClass: MeQuery.me.selectedClass,
      };
    };
    let rooms = [getRoom('First Room', 'blue', 'Some description')];

    const operations = {
      MeQuery,
      RoomsQuery() {
        return {
          rooms,
        };
      },
      AddRoom({
        input: {
          room: { title, appearance, description },
        },
      }) {
        const room = getRoom(title, appearance, description);
        rooms.push(room);
        return {
          addRoom: {
            room,
          },
        };
      },
    };
    cy.mockGraphqlOps({
      operations,
    });
    cy.visit('/rooms');
    cy.getByDataCy('room-widget').should('have.length', 1);
    cy.getByDataCy('add-room').click();
    cy.getByDataCy('form-title').should('contain', 'Neuer Raum');
    cy.getByDataCy('page-form-input-titel').type('Strg F');
    cy.getByDataCy('school-class-select').should('not.exist');
    cy.getByDataCy('color-select').eq(2).click();
    cy.getByDataCy('room-form-save').click();
    cy.getByDataCy('room-widget').should('have.length', 2);
  });
});