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

describe('Projects page', () => {
  const MeQuery = getMinimalMe({});
  beforeEach(() => {
    cy.setup();
    cy.intercept('GET', '/avatars/**', { fixture: 'maxim.png' });
  });

  it('displays portfolio onboarding', () => {
    const operations = {
      MeQuery,
      ProjectsQuery: {
        projects: [],
      },
    };
    cy.mockGraphqlOps({
      operations,
    });
    cy.visit('/portfolio');
    cy.getByDataCy('page-title').should('contain', 'Portfolio');
    cy.getByDataCy('portfolio-onboarding-illustration').should('exist');
    cy.getByDataCy('portfolio-onboarding-subtitle').should('contain', 'Woran denken Sie gerade');
    cy.getByDataCy('portfolio-onboarding-text').should('contain', 'Hier können Sie Projekte erstellen');
    cy.getByDataCy('page-footer').should('not.exist');
    cy.getByDataCy('create-project-button-onboarding').should('exist');
  });

  it('displays the project list', () => {
    const projectTitle = 'What is love?';

    const operations = {
      MeQuery,
      ProjectsQuery: {
        projects: [
          {
            title: projectTitle,
            student: {
              firstName: 'Bilbo',
              lastName: 'Baggins',
              avatarUrl: '/avatars/bilbo.png',
            },
            entriesCount: 0,
            entries: {
              nodes: [],
            },
          },
        ],
      },
    };

    cy.mockGraphqlOps({
      operations,
    });
    cy.visit('/portfolio');
    cy.getByDataCy('page-title').should('contain', 'Portfolio');
    cy.getByDataCy('create-project-button').should('exist');
    cy.getByDataCy('project-list').should('exist');
    cy.getByDataCy('project').should('have.length', 1);
    cy.getByDataCy('owner-name').should('contain', 'Bilbo Baggins');
    cy.getByDataCy('project-title').should('contain', projectTitle);
    cy.getByDataCy('entry-count').should('contain', 0);
  });

  it('creates a new project', () => {
    const operations = {
      MeQuery,
      ProjectsQuery: {
        projects: [
          {
            title: 'first project',
            student: {
              firstName: 'Bilbo',
              lastName: 'Baggins',
              avatarUrl: '/avatars/bilbo.png',
            },
            entriesCount: 0,
            entries: {
              nodes: [],
            },
          },
        ],
      },
      AddProject: (variables) => {
        const {
          input: { project },
        } = variables;
        return {
          addProject: {
            errors: null,
            project,
          },
        };
      },
    };

    cy.mockGraphqlOps({
      operations,
    });

    cy.visit('/portfolio');

    cy.getByDataCy('project').should('have.length', 1);

    cy.getByDataCy('create-project-button').click();

    cy.getByDataCy('page-form-input-titel').type('Titel');
    cy.getByDataCy('page-form-input-beschreibung').type('Beschreibung');
    cy.getByDataCy('save-project-button').click();

    cy.getByDataCy('project').should('have.length', 2);
  });

  it('does not display button on mobile', () => {
    const operations = {
      MeQuery,
      ProjectsQuery: {
        projects: [],
      },
    };
    cy.mockGraphqlOps({
      operations,
    });
    cy.viewport('iphone-8');
    cy.visit('/portfolio');

    cy.getByDataCy('page-title').should('exist');
    cy.getByDataCy('create-project-button').should('not.exist');
  });
});