import {getMinimalMe} from '../../../support/helpers';

describe('The Rooms Page', () => {
  const getOperations = (isTeacher) => ({
    MeQuery: getMinimalMe({isTeacher}),
    RoomsQuery: {
      rooms: {
        edges: [
          {
            node: {
              schoolClass: {
                id: 'selectedClassId',
              },

            },
          },
        ],
      },
    },
  });

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

  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-room-actions-menu').should('not.exist');
  });

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

    const operations = {
      MeQuery: getMinimalMe({isTeacher: true}),
      RoomsQuery() {
        return {
          rooms: {
            edges: rooms.map(room => ({node: room})),
          },
        };
      },
      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('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);
  });
});