import { PROJECT_ENTRY_TEMPLATE } from '../../../../src/consts/strings.consts';

const created = '2021-06-01T11:49:00+00:00';
const createdLater = '2021-06-01T12:49:00+00:00';
const defaultEntries = [
  {
    id: 'UHJvamVjdEVudHJ5Tm9kZTo2NQ==',
    description: 'Aktivität:\nKill Thanos\n\n\nReflexion:\nHe sucks\n\n\nNächste Schritte:\nGo for the head',
    documentUrl: '',
    created,
  },
];

let entries = [...defaultEntries];

describe('Project Page', () => {
  let final = false;

  const project = {
    id: 'UHJvamVjdE5vZGU6MzY=',
    title: 'Groot',
    appearance: 'yellow',
    description: 'I am Groot',
    slug: 'groot',
    objectives: 'Be Groot\nBe awesome',
    final: false,
    student: {
      firstName: 'Rachel',
      lastName: 'Green',
      id: 'VXNlck5vZGU6NQ==',
      avatarUrl: '',
    },
    entries,
    entriesCount: entries.length,
  };

  const operations = {
    MeQuery: {
      me: {
        id: 'VXNlck5vZGU6NQ==',
        permissions: [],
      },
    },
    ProjectsQuery: {
      projects: [
        {
          id: 'UHJvamVjdE5vZGU6MzM=',
          title: 'Groot',
          appearance: 'red',
          description: 'I am Groot',
          slug: 'groot',
          objectives: 'Be Groot\nBe awesome',
          final: false,
          student: {
            firstName: 'Rachel',
            lastName: 'Green',
            id: 'VXNlck5vZGU6NQ==',
            avatarUrl: '',
          },
          entriesCount: 2,
        },
      ],
    },
    ProjectQuery: () => ({
      project,
    }),
    DeleteProject: {
      deleteProject: {
        success: true,
      },
    },
    AddProjectEntry: (variables) => {
      const projectEntry = Object.assign({}, variables.input.projectEntry, {
        created: createdLater,
      });
      entries.push(projectEntry);
      return {
        addProjectEntry: {
          projectEntry,
          errors: null,
        },
      };
    },
    UpdateProjectEntry: (variables) => ({
      updateProjectEntry: {
        projectEntry: variables.input.projectEntry,
        errors: null,
        __typename: 'UpdateProjectEntryPayload',
      },
    }),
    DeleteProjectEntry: {
      deleteProjectEntry: {
        success: true,
      },
    },
    UpdateProjectShareState: () => {
      final = !final;
      return {
        updateProjectSharedState: {
          errors: null,
          success: true,
          shared: final,
        },
      };
    },
  };

  beforeEach(() => {
    cy.setup();
    entries = [...defaultEntries];

    cy.mockGraphqlOps({
      operations,
    });
  });

  it('has the correct layout', () => {
    cy.visit('/portfolio/groot');
    cy.getByDataCy('project-entry')
      .eq(0)
      .within(() => {
        cy.getByDataCy('project-entry-date').should('contain', '1. Juni 2021');
      });
  });

  it('uses the menu', () => {
    cy.visit('/portfolio/groot');
    cy.getByDataCy('project-actions').click();
    cy.getByDataCy('delete-project').should('exist');
    cy.getByDataCy('edit-project').should('exist');
  });

  it('deletes the project', () => {
    cy.visit('/portfolio');
    cy.getByDataCy('project-link').should('have.length', 1);
    cy.getByDataCy('project-link').click();
    cy.get('h1').should('contain', 'Groot');
    cy.getByDataCy('project-actions').click();
    cy.get('.widget-popover').should('be.visible');
    cy.getByDataCy('delete-project').click();
    cy.getByDataCy('page-title').should('contain', 'Portfolio');
    cy.getByDataCy('project-link').should('have.length', 0);
  });

  it('shares and unshares the project', () => {
    const getOperationsForSharing = () => {
      let projectForSharing = {
        ...project,
        final,
      };
      return {
        ...operations,
        ProjectQuery: {
          project: projectForSharing,
        },
      };
    };

    cy.mockGraphqlOps({
      operations: getOperationsForSharing,
    });
    const unsharedText = 'Mit Lehrperson teilen';
    const sharedText = 'Nicht mehr teilen';

    cy.visit('/portfolio/groot');
    cy.getByDataCy('project-title').contains('Groot'); // sanity check, make sure the page is fully loaded
    cy.getByDataCy('project-share-link').should('contain', unsharedText);
    cy.getByDataCy('project-share-link').click();
    cy.getByDataCy('project-title').contains('Groot'); // sanity check, make sure the page is fully loaded
    cy.getByDataCy('project-share-link').should('contain', sharedText);
    cy.getByDataCy('project-share-link').click();
    cy.getByDataCy('project-title').contains('Groot'); // sanity check, make sure the page is fully loaded
    cy.getByDataCy('project-share-link').should('contain', unsharedText);
  });

  it('cannot edit or delete the project as a teacher', () => {
    cy.mockGraphqlOps({
      operations: {
        ...operations,
        MeQuery: {
          me: {
            id: 'not-the-same',
            isTeacher: true,
          },
        },
      },
    });
    cy.visit('/portfolio/groot');
    cy.getByDataCy('project-actions').should('not.exist');
    cy.getByDataCy('project-entry').should('have.length', 1);
    cy.getByDataCy('project-entry-more').should('not.exist');
  });

  it('does not show button on mobile', () => {
    cy.viewport('iphone-8');
    cy.visit('/portfolio/groot');
    cy.getByDataCy('project-title').should('exist');
    cy.getByDataCy('add-project-entry').should('not.exist');
  });

  describe('Project Entry', () => {
    it('should create a new project entry', () => {
      cy.visit('/portfolio');
      cy.get('[data-cy=project-link]:first-of-type').click();
      cy.get('[data-cy=add-project-entry]:first-of-type').click();
      cy.getByDataCy('activity-input').should('not.exist');
      cy.getByDataCy('reflection-input').should('not.exist');
      cy.getByDataCy('next-steps-input').should('not.exist');
      cy.getByDataCy('modal-title').should('contain', 'Beitrag erfassen');
      cy.getByDataCy('project-entry-textarea').should('exist');
      cy.getByDataCy('use-template-button').should('exist').click();
      cy.getByDataCy('upload-document-button').should('exist');
      cy.getByDataCy('modal-save-button').click();
      cy.get('.modal').should('not.exist'); // make sure the modal is closed

      cy.get('.project-entry:last-of-type').within(() => {
        cy.get('.project-entry__paragraph:first-of-type').contains('Schwierigkeiten');
      });
    });

    it('should edit first entry', () => {
      cy.visit('/portfolio/groot');
      cy.get('.project-entry__paragraph:first-of-type').contains('Kill Thanos');
      cy.get('.project-entry:first-of-type').within(() => {
        cy.get('[data-cy=project-entry-more]').click();
        cy.get('[data-cy=edit-project-entry]').click();
      });
      cy.getByDataCy('activity-input').should('not.exist');

      cy.getByDataCy('project-entry-textarea').clear().type('Defeat Thanos');
      cy.get('[data-cy=modal-save-button]').click();
      cy.get('.project-entry__paragraph:first-of-type').contains('Defeat Thanos');
    });

    it('should delete the last entry', () => {
      cy.visit('/portfolio/groot');

      cy.get('.project-entry').should('have.length', 1);

      cy.get('.project-entry:last-of-type').within(() => {
        cy.get('[data-cy=project-entry-more]').click();
        cy.get('[data-cy=delete-project-entry]').click();
      });

      cy.get('.project-entry').should('have.length', 0);
    });

    it('should use the template', () => {
      cy.visit('/portfolio/groot');
      cy.get('[data-cy=add-project-entry]:first-of-type').click();
      cy.getByDataCy('use-template-button').click();
      cy.getByDataCy('project-entry-textarea').should('have.value', PROJECT_ENTRY_TEMPLATE);
    });

    it('should not display the entry actions on mobile', () => {
      cy.viewport('iphone-8');
      cy.visit('/portfolio/groot');
      cy.getByDataCy('project-entry').should('exist');
      cy.getByDataCy('project-entry-more').should('not.be.visible');
      cy.getByDataCy('project-actions').should('not.be.visible');
    });
  });
});