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

// const operations = {
//   MeQuery: getMinimalMe({isTeacher: false}),
// };
const MeQuery = getMinimalMe({ isTeacher: false });

const DEBOUNCE_TIME = 500;

describe('Assignment in Module', () => {
  const slug = 'some-module';
  const assignment = {
    id: 'abc',
    title: 'Some assignment',
    assignment: 'Please write down your thoughts',
    submission: null,
  };
  const module = {
    title: 'Hello world',
    slug,
    solutionsEnabled: false,
    chapters: [
      {
        contentBlocks: [
          {
            title: 'A content block',
            contents: [
              {
                type: 'text_block',
                value: {
                  text: 'Ein Text',
                },
              },
              {
                type: 'assignment',
                value: assignment,
              },
            ],
          },
        ],
      },
    ],
  };
  const operations = {
    ModuleDetailsQuery: {
      module,
    },
    MeQuery,
    ModuleEditModeQuery: {
      module: {
        slug,
      },
    },
    UpdateLastModule: {
      module,
    },
    AssignmentQuery: {
      assignment,
    },
    UpdateAssignmentWithSuccess({ input: { assignment: updatedAssignment } }) {
      console.log(updatedAssignment);
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            updateAssignment: {
              successful: true,
              updatedAssignment: {
                ...updatedAssignment,
                submission: {
                  text: 'something else than was sent completely',
                },
              },
            },
          });
        }, 1000);
      });
    },
    UpdateAssignment({ input: { assignment: updatedAssignment } }) {
      return {
        updateAssignment: {
          updatedAssignment: {
            ...assignment,
            submission: {
              final: updatedAssignment.final,
              text: updatedAssignment.answer,
              document: '',
            },
          },
        },
      };
    },
  };
  beforeEach(() => {
    cy.setup();
    cy.mockGraphqlOps({ operations });
    cy.visit(`module/${slug}`);
  });

  it('types into the assignment input', () => {
    cy.getByDataCy('submission-textarea').should('exist').type('My Solution');
    cy.getByDataCy('submission-form-submit').click();
    cy.getByDataCy('submission-textarea').should('have.class', 'submission-form__textarea--readonly');
    cy.getByDataCy('final-submission-reopen').click();
    cy.getByDataCy('submission-textarea').should('not.have.class', 'submission-form__textarea--readonly');
  });

  it('does not see assignment input on mobile', () => {
    cy.viewport('iphone-8');
    cy.getByDataCy('submission-textarea').should('not.be.visible');
  });

  it('types into the submission input and does not react to server returning something in the submission response', () => {
    /*
     * this test checks if the solution textarea reacts to the server responding with some value for the submission
     * property of the assignment. we don't want the textarea to react, otherwise it can overwrite the input of the
     * user. this gets worse the slower the user's connection is.
     */
    const mySolution = 'My Solution';
    cy.getByDataCy('submission-textarea').should('exist').type(mySolution).should('have.value', mySolution);
    // we give the server time to return the response after updating
    cy.wait('@UpdateAssignmentWithSuccess');
    cy.wait(DEBOUNCE_TIME * 4);

    cy.getByDataCy('submission-textarea').should('have.value', mySolution);
  });
});