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

const contentBlockId = window.btoa('ContentBlockNode:1');
const operations = {
  ...defaultModuleQueriesandMutations,
  ModuleDetailsQuery: {
    module: {
      chapters: [
        {
          title: 'A Chapter',
          contentBlocks: [
            {
              title: 'A Content Block',
              highlights: [],
              id: contentBlockId,
              contents: [
                {
                  type: 'text_block',
                  id: 'some-content-component-id',
                  value: {
                    text: '<p>Dies ist ein Text mit ein paar Wörtern.</p>',
                  },
                },
              ],
            },
          ],
        },
      ],
    },
  },
  AddHighlight: ({ input: { highlight } }) => {
    return {
      addHighlight: {
        highlight: {
          ...highlight,
          id: 'new-highlight-id',
          contentBlock: {
            id: contentBlockId,
          },
        },
      },
    };
  },
  DeleteHighlight: {
    deleteHighlight: {
      success: true,
    },
  },
};

const selectText = (elm: Node, start: number, end: number) => {
  const range = document.createRange();
  range.setStart(elm, start);
  range.setEnd(elm, end);
  cy.window().then((win) => win.getSelection().addRange(range));
};

describe('Highlights', () => {
  beforeEach(() => {
    cy.setup();
    cy.mockGraphqlOps({
      operations,
    });
  });

  it('visits a module and highlights a paragraph', () => {
    cy.visit('/module/my-module');

    /*
     * Mark the text (programmatically, as Cypress has no API for this)
     */
    cy.getByDataCy('text-block').then(($elm) => {
      const textBlock = $elm[0];
      const paragraph = textBlock.querySelector('p');
      selectText(paragraph.childNodes[0], 2, 12);
    });
    /*
     * Also trigger the events manually
     */
    cy.document().trigger('selectionchange');
    cy.getByDataCy('content-block-div').trigger('mouseup');

    cy.getByDataCy('highlight-popover').should('be.visible');
    cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover

    /*
     * manually remove the selection, because cypress does not do that on a click, unlike a real browser
     */
    cy.window().then((win) => {
      const selection = win.getSelection();
      selection.removeAllRanges();
    });

    // mark the text with yellow and check the text
    cy.getByDataCy('highlight-alpha').click();
    cy.getByDataCy('highlight-mark').should('contain', 'es ist ein');

    // we only want to have one of each element and not accidentally create multiple
    cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
    cy.getByDataCy('highlight-mark').should('have.length', 1);

    // display the sidebar and popover and check them
    cy.getByDataCy('highlight-note').click();
    cy.getByDataCy('highlight-popover').should('be.visible');
    cy.getByDataCy('highlight-sidebar').should('be.visible');
    cy.getByDataCy('highlight-in-sidebar').should('contain', 'es ist ein');

    cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
    cy.getByDataCy('highlight-mark').should('have.length', 1);

    // click outside the created components to make them disappear
    cy.getByDataCy('module-title').click();
    cy.getByDataCy('highlight-popover').should('not.exist');
    cy.getByDataCy('highlight-sidebar').should('not.exist');

    cy.getByDataCy('highlight-mark').should('have.length', 1);

    // click on the highlighted text to make the menus appear again
    cy.getByDataCy('highlight-mark').click();
    cy.getByDataCy('highlight-popover').should('be.visible');
    cy.getByDataCy('highlight-sidebar').should('be.visible');

    // todo: change the color
    // todo: write a note
    // todo: click the note icon without first setting a color

    // delete the highlight
    cy.getByDataCy('highlight-delete').click();
    cy.getByDataCy('confirm-dialog').should('be.visible');
    cy.getByDataCy('modal-save-button').click();

    cy.getByDataCy('highlight-popover').should('not.exist');
    cy.getByDataCy('highlight-sidebar').should('not.exist');
    cy.getByDataCy('highlight-mark').should('not.exist');
  });
});