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

describe('The Room Page', () => {
  const MeQuery = getMinimalMe();
  const selectedClass = MeQuery.me.selectedClass;
  const entryText = 'something should be here';
  const entryTitle = 'some title';
  const slug = 'ein-historisches-festival';
  const id = btoa('RoomNode:1');
  const room = {
    id,
    slug,
    schoolClass: selectedClass,
    restricted: false,
    roomEntries: {
      edges: [],
    },
  };

  const RoomEntriesQuery = {
    room,
  };

  const operations = {
    MeQuery,
    RoomEntriesQuery,
    AddRoomEntry: {
      addRoomEntry: {
        roomEntry: {
          title: entryTitle,
          contents: [
            {
              type: 'text_block',
              value: {
                text: entryText,
              },
            },
          ],
          author: {
            firstName: 'Rachel',
            lastName: 'Green',
            id: btoa('PublicUserNode:rachels-id'),
          },
        },
        errors: [],
      },
    },
  };

  const checkRadioButton = () => {
    cy.get('.base-input-container__input:checked + .base-input-container__radiobutton svg').should('have.length', 1);
  };

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

  it('displays new room entry with author name', () => {
    cy.mockGraphqlOps({
      operations,
    });
    cy.visit(`/room/${slug}`);

    cy.get('[data-cy=add-room-entry-button]').click();
    cy.get('.add-content-element:first-of-type').click();
    cy.get('[data-cy=choose-text-widget]').click();
    cy.get('[data-cy=modal-title-input] > .modal-input__inputfield').type(entryTitle);

    cy.get('[data-cy=text-form-input]').type(entryText);
    cy.get('[data-cy=modal-save-button]').click();

    cy.get('.room-entry__content:first').should('contain', entryText).should('contain', 'Rachel Green');
  });

  it('room actions should not exist for student', () => {
    const operations = {
      MeQuery: getMinimalMe({isTeacher: false}),
      RoomEntriesQuery,
    };

    cy.mockGraphqlOps({
      operations,
    });
    cy.visit(`/room/${slug}`);

    cy.getByDataCy('room-title').should('exist');
    cy.getByDataCy('room-actions').should('not.exist');
  });

  // todo: re-enable once cypress can do it correctly
  it.skip('changes visibility of a room', () => {
    const MeQuery = getMinimalMe({
      isTeacher: true,
    });
    const operations = {
      MeQuery,
      RoomEntriesQuery,
      UpdateRoomVisibility: {
        updateRoomVisibility: {
          success: true,
          room: {
            ...room,
            restricted: true,
          },
        },
      },
    };

    cy.mockGraphqlOps({
      operations,
    });

    cy.visit(`/room/${slug}`);
    cy.getByDataCy('room-visibility-status').should('contain', 'alle Lernenden');
    cy.getByDataCy('toggle-more-actions-menu').click();
    cy.getByDataCy('change-visibility').click();
    cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen');
    cy.get('.change-visibility__radio').should('have.length', 2);
    cy.get('.change-visibility__radio--selected').should('have.length', 1);
    checkRadioButton();
    cy.get('.change-visibility__radio--selected').should('have.length', 1).should('contain', 'alle Lernenden');
    checkRadioButton();
    cy.getByDataCy('select-option').eq(0).click();
    cy.get('.change-visibility__radio--selected').should('have.length', 1);
    checkRadioButton();
    cy.getByDataCy('select-option').eq(1).click();
    cy.getByDataCy('select-option').eq(1).click();
    cy.get('.change-visibility__radio--selected').should('have.length', 1).should('contain', 'eigenen Beiträge');
    checkRadioButton();
    cy.getByDataCy('modal-save-button').click();
    cy.getByDataCy('room-visibility-status').should('contain', 'eigenen Beiträge');
    cy.getByDataCy('toggle-more-actions-menu').click();
    cy.getByDataCy('change-visibility').click();
    cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen');
    cy.get('.change-visibility__radio--selected').should('have.length', 1).should('contain', 'eigenen Beiträge');
    checkRadioButton();
  });

  it('deletes the room and goes back to the overview', () => {
    const MeQuery = getMinimalMe();
    const schoolClass = MeQuery.me.selectedClass;
    const roomToDelete = {
      id: btoa('RoomNode:room-to-delete'),
      schoolClass,
      slug: 'delete-me',
      roomEntries: {
        edges: [],
      },
    };
    const otherRoom = {
      id: btoa('RoomNode:otherRoom'),
      schoolClass,
    };
    let rooms = [roomToDelete, otherRoom];
    const operations = {
      MeQuery,
      RoomsQuery() {
        return {
          rooms
        };
      },
      RoomEntriesQuery: {
        room: roomToDelete,
      },
      DeleteRoom: {
        deleteRoom: {
          success: true,
        },
      },
    };
    cy.mockGraphqlOps({
      operations,
    });

    cy.visit(`/rooms`);
    cy.getByDataCy('room-widget').should('have.length', 2);
    cy.getByDataCy('room-widget').first().click();
    cy.getByDataCy('toggle-more-actions-menu').click();
    cy.getByDataCy('delete-room').click();
    cy.url().should('include', 'rooms');
    cy.getByDataCy('room-widget').should('have.length', 1);
  });

  it('edits own room entry', () => {
    const MeQuery = getMinimalMe({isTeacher: false});
    const {me} = MeQuery;
    const id = atob(me.id).split(':')[1];
    const authorId = btoa(`PublicUserNode:${id}`);
    const room = {
      id: 'some-room',
      roomEntries: {
        edges: [
          {
            node: {
              id: '',
              slug: '',
              contents: [],
              author: {
                ...me,
                id: authorId,
              },
            },
          },
        ],
      },
    };
    const operations = {
      MeQuery: MeQuery,
      RoomEntriesQuery: {
        room,
      },
      RoomEntryQuery: {},
    };
    cy.mockGraphqlOps({
      operations,
    });
    cy.visit(`/room/${slug}`);
    cy.getByDataCy('room-entry-actions').click();
    cy.getByDataCy('edit-room-entry').click();
  });

  it('creates a room entry', () => {
    const MeQuery = getMinimalMe({isTeacher: false});
    const room = {
      id: 'some-room',
      roomEntries: {
        edges: [],
      },
    };
    const operations = {
      MeQuery,
      RoomEntriesQuery: {
        room,
      },
    };

    cy.mockGraphqlOps({
      operations,
    });

    cy.visit(`/room/${slug}`);
    cy.getByDataCy('add-room-entry-button').click();
    cy.getByDataCy('add-room-entry-modal').should('exist');
  });

  it.only('changes class while on room page', () => {
    const {me} = MeQuery;
    const otherClass = {
      id: btoa('SchoolClassNode:34'),
      name: 'Other Class',
      readOnly: false
    };
    let selectedClass = me.selectedClass;
    const operations = {
      MeQuery: () => {
        return {
        me: {
          ...me,
          schoolClasses: [...me.schoolClasses, otherClass],
          selectedClass
        },
      };
      },
      RoomEntriesQuery,
      UpdateSettings() {
        selectedClass = otherClass;
        return {
          updateSettings: {
            success: true
          }
        };
      },
      ModuleDetailsQuery: {},
      MySchoolClassQuery: () => {
        return {
          me: {
            selectedClass
          }
        };
      },
      RoomsQuery: {
        rooms: []
      }
    };

    cy.mockGraphqlOps({
      operations,
    });
    cy.visit(`/room/${slug}`);
    cy.getByDataCy('room-title').should('contain', 'A Room');
    cy.selectClass('Other Class');
    cy.url().should('include', 'rooms');
    cy.getByDataCy('current-class-name').should('contain', 'Other Class');
  });
});