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

describe('The Room Page (Teacher)', () => {
  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: {
          slug: 'entry-slug',
          title: entryTitle,
          contents: [
            {
              type: 'text_block',
              value: {
                text: entryText,
              },
            },
          ],
          author: {
            firstName: 'Rachel',
            lastName: 'Green',
            id: window.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.getByDataCy('add-room-entry-button').click()
    cy.getByDataCy('add-content-link').first().click()
    cy.getByDataCy('choose-text-widget').click()
    cy.getByDataCy('input-with-label-input').type(entryTitle)

    cy.get('.tip-tap__editor').type(entryText)
    cy.getByDataCy('save-button').click()

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

  // 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: window.btoa('RoomNode:room-to-delete'),
      title: 'Delete Me',
      schoolClass,
      slug: 'delete-me',
      roomEntries: {
        edges: [],
      },
    }
    const otherRoom = {
      id: window.btoa('RoomNode:otherRoom'),
      slug: 'other-slug',
      title: 'Other Room',
      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('room-title').should('contain', 'Delete Me')
    cy.getByDataCy('toggle-more-actions-menu').click()
    cy.getByDataCy('delete-room').within(() => {
      cy.get('a').click()
    })
    cy.getByDataCy('modal-save-button').click()
    cy.url().should('include', 'rooms')
    cy.getByDataCy('room-widget').should('have.length', 1)
  })

  it('changes class while on room page', () => {
    const { me } = MeQuery
    const otherClass = {
      id: window.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')
  })
})

describe('The Room Page (student)', () => {
  const slug = 'ein-historisches-festival'
  const MeQuery = getMinimalMe({ isTeacher: false })
  const { me } = MeQuery
  const id = atob(me.id).split(':')[1]
  const authorId = btoa(`PublicUserNode:${id}`)
  const entrySlug = 'entry-slug'
  const { selectedClass } = me
  const roomEntry = {
    id: 'entry-id',
    slug: entrySlug,
    title: 'My Entry',
    contents: [
      {
        type: 'text_block',
        value: {
          text: 'some text',
        },
      },
    ],
    comments: [{}, {}],
    author: {
      ...me,
      id: authorId,
      firstName: 'Hans',
      lastName: 'Was Heiri',
      avatarUrl: '',
    },
  }
  const room = {
    id,
    slug,
    schoolClass: selectedClass,
    restricted: false,
    roomEntries: {
      edges: [
        {
          node: roomEntry,
        },
      ],
    },
  }

  const RoomEntriesQuery = {
    room,
  }

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

  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')
  })

  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('content-form-section-title').should(
      'have.text',
      'Titel (Pflichtfeld)'
    )
  })

  it('edits own room entry', () => {
    const room = {
      id: 'some-room',
      slug,
      // schoolClass: me.selectedClass,
      roomEntries: {
        edges: [
          {
            node: roomEntry,
          },
        ],
      },
    }
    const operations = {
      MeQuery: MeQuery,
      RoomEntriesQuery: {
        room,
      },
      RoomEntryQuery: {
        roomEntry,
      },
    }
    cy.mockGraphqlOps({
      operations,
    })
    cy.visit(`/room/${slug}`)
    cy.getByDataCy('room-entry-actions').click()
    cy.getByDataCy('edit-room-entry').click()
    cy.location('pathname').should('include', entrySlug)
  })

  it('deletes room entry', () => {
    const DeleteRoomEntry = {
      deleteRoomEntry: {
        success: true,
        errors: null,
        roomSlug: slug,
      },
    }

    const operations = {
      MeQuery,
      RoomEntriesQuery,
      DeleteRoomEntry,
    }

    cy.mockGraphqlOps({
      operations,
    })

    cy.visit(`/room/${slug}`)
    cy.getByDataCy('room-entry').should('have.length', 1)
    cy.getByDataCy('room-entry-actions').click()
    cy.getByDataCy('delete-room-entry').click()
    cy.getByDataCy('delete-room-entry').should('not.exist')
    cy.getByDataCy('modal-save-button').click()
    cy.getByDataCy('room-entry').should('have.length', 0)
  })

  it('shows room entries with comment count', () => {
    const operations = {
      MeQuery,
      RoomEntriesQuery,
    }
    cy.mockGraphqlOps({
      operations,
    })

    cy.visit(`/room/${slug}`)
    cy.getByDataCy('room-entry')
      .should('have.length', 1)
      .within(() => {
        cy.getByDataCy('entry-count').should('contain.text', '2')
      })
  })

  it('does not show actions on mobile', () => {
    const operations = {
      MeQuery,
      RoomEntriesQuery,
    }
    cy.mockGraphqlOps({
      operations,
    })
    cy.viewport('iphone-8')

    cy.visit(`/room/${slug}`)
    cy.getByDataCy('room-actions').should('not.exist')
    cy.getByDataCy('room-entry').should('have.length', 1)
    cy.getByDataCy('room-entry-actions').should('not.be.visible')
  })
})