class GeneralQueryBuilderFunctions {
  name = 'General Query Builder Functions';

  constructor(app, elements) {
    this.app = app;
    this.elements = elements;
    
    this.incidenceModifierEventListeners();
    this.nAndMInputSubmitEventListeners();

    let queryBuilderDisplay = document.querySelector("#corpus-analysis-concordance-query-builder-display");
    let expertModeDisplay = document.querySelector("#corpus-analysis-concordance-expert-mode-display");
    let expertModeSwitch = document.querySelector("#corpus-analysis-concordance-expert-mode-switch");
    
    expertModeSwitch.addEventListener("change", () => {
      const isChecked = expertModeSwitch.checked;
      if (isChecked) {
        queryBuilderDisplay.classList.add("hide");
        expertModeDisplay.classList.remove("hide");
        this.switchToExpertModeParser();
      } else {
        queryBuilderDisplay.classList.remove("hide");
        expertModeDisplay.classList.add("hide");
        this.switchToQueryBuilderParser();
      }
    });
  }

  toggleClass(elements, className, action){
    elements.forEach(element => {
      document.querySelector(`[data-toggle-area="${element}"]`).classList[action](className);
    });
  }

  resetQueryInputField() {
    this.elements.queryInputField.innerHTML = '';
    this.addPlaceholder();
    this.updateChipList();
    this.queryPreviewBuilder();
  }

  updateChipList() {
    this.elements.queryChipElements = this.elements.queryInputField.querySelectorAll('.query-component');
  }

  removePlaceholder() {
    let placeholder = this.elements.queryInputField.querySelector('#corpus-analysis-concordance-query-builder-input-field-placeholder');  
    if (placeholder && this.elements.queryInputField !== undefined) {
      this.elements.queryInputField.innerHTML = '';
    }
  }

  addPlaceholder() {
    let placeholder = nopaque.Utils.HTMLToElement('<span id="corpus-analysis-concordance-query-builder-input-field-placeholder">Click on a button to add a query component</span>');
    this.elements.queryInputField.appendChild(placeholder);
  }
  
  resetMaterializeSelection(selectionElements, value = "default") {
    selectionElements.forEach(selectionElement => {
      if (selectionElement.querySelector(`option[value=${value}]`) !== null) {
        selectionElement.querySelector(`option[value=${value}]`).selected = true;
      }
      let instance = M.FormSelect.getInstance(selectionElement);
      instance.destroy();
      M.FormSelect.init(selectionElement);
    })
  }

  submitQueryChipElement(dataType = undefined, prettyQueryText = undefined, queryText = undefined, index = null, isClosingTag = false, isEditable = false) {
    if (this.elements.editingModusOn) {
      let editedQueryChipElement = this.elements.queryChipElements[this.elements.editedQueryChipElementIndex];
      editedQueryChipElement.dataset.type = dataType;
      editedQueryChipElement.dataset.query = queryText;
      editedQueryChipElement.firstChild.textContent = prettyQueryText;
      this.updateChipList();
      this.queryPreviewBuilder();
    } else {
      this.queryChipFactory(dataType, prettyQueryText, queryText, index, isClosingTag, isEditable);
    }
  }

  queryChipFactory(dataType, prettyQueryText, queryText, index = null, isClosingTag = false, isEditable = false) {
    // Creates a new query chip element, adds Eventlisteners for selection, deletion and drag and drop and appends it to the query input field.
    queryText = nopaque.Utils.escape(queryText);
    prettyQueryText = nopaque.Utils.escape(prettyQueryText);
    let queryChipElement = nopaque.Utils.HTMLToElement(
      `
        <span class="chip query-component" data-type="${dataType}" data-query="${queryText}" draggable="true" data-closing-tag="${isClosingTag}">
          ${prettyQueryText}${isEditable ? '<i class="material-icons chip-action-button" data-chip-action="edit" style="padding-left:5px; font-size:18px; cursor:pointer;">edit</i>': ''}
          ${isClosingTag ? '<i class="material-icons chip-action-button" data-chip-action="lock" style="padding-top:5px; font-size:20px; cursor:pointer;">lock_open</i>' : '<i class="material-icons close chip-action-button" data-chip-action="delete">close</i>'}
        </span>
      `
    );
    this.actionListeners(queryChipElement);
    queryChipElement.addEventListener('dragstart', this.handleDragStart.bind(this, queryChipElement));
    queryChipElement.addEventListener('dragend', this.handleDragEnd);

    // Ensures that metadata is always at the end of the query and if an index is given, inserts the query chip at the given index and if there is a closing tag, inserts the query chip before the closing tag.
    this.removePlaceholder();
    let lastChild = this.elements.queryInputField.lastChild;
    let isLastChildTextAnnotation = lastChild && lastChild.dataset.type === 'text-annotation';
    if (!index) {
      let closingTagElement = this.elements.queryInputField.querySelector('[data-closing-tag="true"]');
      if (closingTagElement) {
        index = Array.from(this.elements.queryInputField.children).indexOf(closingTagElement);
      }
    }
    if (dataType !== 'text-annotation' && index) {
      this.elements.queryInputField.insertBefore(queryChipElement, this.elements.queryChipElements[index]);
    } else if (dataType !== 'text-annotation' && isLastChildTextAnnotation) {
      this.elements.queryInputField.insertBefore(queryChipElement, lastChild);
    } else {
      this.elements.queryInputField.appendChild(queryChipElement);
    }

    this.updateChipList();
    this.queryPreviewBuilder();
  }

  actionListeners(queryChipElement) {
    let notQuantifiableDataTypes = ['start-sentence', 'end-sentence', 'start-entity', 'start-empty-entity', 'end-entity', 'token-incidence-modifier'];
    queryChipElement.addEventListener('click', (event) => {
      if (event.target.classList.contains('chip')) {
        if (!notQuantifiableDataTypes.includes(queryChipElement.dataset.type)) {
          this.selectChipElement(queryChipElement);
        }
      }
    });
    let chipActionButtons = queryChipElement.querySelectorAll('.chip-action-button');
    // chipActionButtons.forEach(button => {
    for (let button of chipActionButtons) {
      button.addEventListener('click', (event) => {
      if (event.target.dataset.chipAction === 'delete') {
        this.deleteChipElement(queryChipElement);
      } else if (event.target.dataset.chipAction === 'edit') {
        this.editChipElement(queryChipElement);
      } else if (event.target.dataset.chipAction === 'lock') {
        this.lockClosingChipElement(queryChipElement);
      }
      });
    // });
    }
  }

  editChipElement(queryChipElement) {
    this.elements.editingModusOn = true;
    this.elements.editedQueryChipElementIndex = Array.from(this.elements.queryInputField.children).indexOf(queryChipElement);
    switch (queryChipElement.dataset.type) {
      case 'start-entity':
        this.app.extensions.structuralAttributeBuilderFunctions.editStartEntityChipElement(queryChipElement);
        break;
      case 'text-annotation':
        this.app.extensions.structuralAttributeBuilderFunctions.editTextAnnotationChipElement(queryChipElement);
        break;
      case 'token':
        let queryElementsContent = this.app.extensions.tokenAttributeBuilderFunctions.prepareTokenQueryElementsContent(queryChipElement);
        this.app.extensions.tokenAttributeBuilderFunctions.editTokenChipElement(queryElementsContent);
        break;
      default:
        break;
    }
  }

  lockClosingChipElement(queryChipElement) {
    queryChipElement.dataset.closingTag = 'false';
    let lockIcon = queryChipElement.querySelector('[data-chip-action="lock"]');
    lockIcon.textContent = 'lock';
    //TODO: Write unlock-Function?
    lockIcon.dataset.chipAction = 'unlock';
  }
  
  deleteChipElement(attr) {
    let elementIndex = Array.from(this.elements.queryInputField.children).indexOf(attr);
    switch (attr.dataset.type) {
      case 'start-sentence':
        this.deletingClosingTagHandler(elementIndex, 'end-sentence');
        break;
      case 'start-entity':
        this.deletingClosingTagHandler(elementIndex, 'end-entity');
        break;
      case 'token':
        let nextElement = Array.from(this.elements.queryInputField.children)[elementIndex+1];
        if (nextElement !== undefined && nextElement.dataset.type === 'token-incidence-modifier') {
          this.deleteChipElement(nextElement);
        }
      default:
        break;
    }
    this.elements.queryInputField.removeChild(attr);
    if (this.elements.queryInputField.children.length === 0) {
      this.addPlaceholder();
    }
    this.updateChipList();
    this.queryPreviewBuilder();
  }

  deletingClosingTagHandler(elementIndex, closingTagType) {
    let closingTags = this.elements.queryInputField.querySelectorAll(`[data-type="${closingTagType}"]`);
    for (let i = 0; i < closingTags.length; i++) {
      let closingTag = closingTags[i];
    
      if (Array.from(this.elements.queryInputField.children).indexOf(closingTag) > elementIndex) {
        this.deleteChipElement(closingTag);
        break;
      }
    }
  }

  handleDragStart(queryChipElement, event) {
    // is called when a query chip is dragged. It creates a dropzone (in form of a chip) for the dragged chip and adds it to the query input field.
    let queryChips = this.elements.queryInputField.querySelectorAll('.query-component');
    if (queryChipElement.dataset.type === 'token-incidence-modifier') {
      queryChips = this.elements.queryInputField.querySelectorAll('.query-component[data-type="token"]');
    }
    setTimeout(() => {
      let targetChipElement = nopaque.Utils.HTMLToElement('<span class="chip drop-target">Drop here</span>');
      for (let element of queryChips) {
        if (element === this.elements.queryInputField.querySelectorAll('.query-component')[0]) {
          let secondTargetChipClone = targetChipElement.cloneNode(true);
          element.insertAdjacentElement('beforebegin', secondTargetChipClone);
          this.addDragDropListeners(secondTargetChipClone, queryChipElement);
        }
        if (element === queryChipElement || element.nextSibling === queryChipElement) {continue;}

        let targetChipClone = targetChipElement.cloneNode(true);
        element.insertAdjacentElement('afterend', targetChipClone);

        this.addDragDropListeners(targetChipClone, queryChipElement);
      }
    }, 0);
  }

  handleDragEnd(event) {
    document.querySelectorAll('.drop-target').forEach(target => target.remove());
  }

  addDragDropListeners(targetChipClone, queryChipElement) {
    targetChipClone.addEventListener('dragover', (event) => {
      event.preventDefault();
    });
    targetChipClone.addEventListener('dragenter', (event) => {
      event.preventDefault();
      event.target.style.borderStyle = 'solid dotted';
    });
    targetChipClone.addEventListener('dragleave', (event) => {
      event.preventDefault();
      event.target.style.borderStyle = 'hidden';
    });
    targetChipClone.addEventListener('drop', (event) => {
      let dropzone = event.target;
      dropzone.parentElement.replaceChild(queryChipElement, dropzone);
      this.updateChipList();
      this.queryPreviewBuilder();
    });
  }

  queryPreviewBuilder() {
    // Builds the query preview in the form of pure CQL and displays it in the query preview field.
    let queryPreview = document.querySelector('#corpus-analysis-concordance-query-preview');
    let queryInputFieldContent = [];
    this.elements.queryChipElements.forEach(element => {
      let queryElement = element.dataset.query;
      if (queryElement !== undefined) {
        queryElement = nopaque.Utils.escape(queryElement);
      }
      queryInputFieldContent.push(queryElement);
    });
  
    let queryString = queryInputFieldContent.join(' ');
    let replacements = {
      ' +': '+',
      ' *': '*',
      ' ?': '?',
      ' {': '{'
    };

    for (let key in replacements) {
      queryString = queryString.replace(key, replacements[key]);
    }
    queryString += ';';
  
    queryPreview.innerHTML = queryString;
    queryPreview.parentNode.classList.toggle('hide', queryString === ';');
  }

  selectChipElement(attr) {
    document.querySelectorAll('.chip.teal').forEach(element => {
        if (element !== attr) {
          element.classList.remove('teal', 'lighten-2');
          this.toggleClass(['token-incidence-modifiers'], 'disabled', 'add');
        }
    });

    this.toggleClass(['token-incidence-modifiers'], 'disabled', 'toggle');
    attr.classList.toggle('teal');
    attr.classList.toggle('lighten-5');
  }

  tokenIncidenceModifierHandler(incidenceModifier, incidenceModifierPretty) {
    // Adds a token incidence modifier to the query input field.
    let selectedChip = this.elements.queryInputField.querySelector('.chip.teal');
    let selectedChipIndex = Array.from(this.elements.queryInputField.children).indexOf(selectedChip);
    this.submitQueryChipElement('token-incidence-modifier', incidenceModifierPretty, incidenceModifier, selectedChipIndex+1);
    this.selectChipElement(selectedChip);
  }

  tokenNMSubmitHandler(modalId) {
    // Adds a token incidence modifier (exactly n or between n and m) to the query input field.
    let modal = document.querySelector(`#${modalId}`);
    let input_n = modal.querySelector('.n-m-input[data-value-type="n"]').value;
    let input_m = modal.querySelector('.n-m-input[data-value-type="m"]') || undefined;
    input_m = input_m !== undefined ? input_m.value : '';
    let input = `{${input_n}${input_m !== '' ? ',' : ''}${input_m}}`;
    let pretty_input = `between ${input_n} and ${input_m} (${input})`;
    if (input_m === '') {
     pretty_input = `exactly ${input_n} (${input})`;
    }

    let instance = M.Modal.getInstance(modal);
    instance.close();

    this.tokenIncidenceModifierHandler(input, pretty_input);
  }

  incidenceModifierEventListeners() {
    // Eventlisteners for the incidence modifiers. There are two different types of incidence modifiers: token and character incidence modifiers.
    document.querySelectorAll('.incidence-modifier-selection').forEach(button => {
      let dropdownId = button.parentNode.parentNode.id;
      if (dropdownId === 'corpus-analysis-concordance-token-incidence-modifiers-dropdown') {
        button.addEventListener('click', () => this.tokenIncidenceModifierHandler(button.dataset.token, button.innerHTML));
      } else if (dropdownId === 'corpus-analysis-concordance-character-incidence-modifiers-dropdown') {
        button.addEventListener('click', () => this.characterIncidenceModifierHandler(button));
      }
    });
  }

  nAndMInputSubmitEventListeners() {
    // Eventlisteners for the submit of n- and m-values of the incidence modifier modal for "exactly n" or "between n and m".
    document.querySelectorAll('.n-m-submit-button').forEach(button => {
      let modalId = button.dataset.modalId;
      if (modalId === 'corpus-analysis-concordance-exactly-n-token-modal' || modalId === 'corpus-analysis-concordance-between-nm-token-modal') {
        button.addEventListener('click', () => this.tokenNMSubmitHandler(modalId));
      } else if (modalId === 'corpus-analysis-concordance-exactly-n-character-modal' || modalId === 'corpus-analysis-concordance-between-nm-character-modal') {
        button.addEventListener('click', () => this.app.extensions.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId));
      }
    });
  }

  switchToExpertModeParser() {
    let expertModeInputField = document.querySelector('#corpus-analysis-concordance-form-query');
    expertModeInputField.value = '';
    let queryBuilderInputFieldValue = nopaque.Utils.unescape(document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim());
    if (queryBuilderInputFieldValue !== "" && queryBuilderInputFieldValue !== ";") {
      expertModeInputField.value = queryBuilderInputFieldValue;
    }
  }

  switchToQueryBuilderParser() {
    this.resetQueryInputField();
    let expertModeInputFieldValue = document.querySelector('#corpus-analysis-concordance-form-query').value;
    let chipElements = this.parseTextToChip(expertModeInputFieldValue);
    let closingTagElements = ['end-sentence', 'end-entity'];
    let editableElements = ['start-entity', 'text-annotation', 'token'];
    for (let chipElement of chipElements) {
      let isClosingTag = closingTagElements.includes(chipElement['type']);
      let isEditable = editableElements.includes(chipElement['type']);
      if (chipElement['query'] === '[]'){
        isEditable = false;
      }
      this.submitQueryChipElement(chipElement['type'], chipElement['pretty'], chipElement['query'], null, isClosingTag, isEditable);
    }
  }

  parseTextToChip(query) {
    const parsingElementDict = {
      '<s>': {
        pretty: 'Sentence Start',
        type: 'start-sentence'
      },
      '<\/s>': {
        pretty: 'Sentence End',
        type: 'end-sentence'
      },
      '<ent>': {
        pretty: 'Entity Start',
        type: 'start-empty-entity'
      },
      '<ent_type="([A-Z]+)">': {
        pretty: '',
        type: 'start-entity'
      },
      '<\\\/ent(_type)?>': {
        pretty: 'Entity End',
        type: 'end-entity'
      },
      ':: ?match\\.text_[A-Za-z]+="[^"]+"': {
        pretty: '',
        type: 'text-annotation'
      },
      '\\[(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?((\\&|\\|) ?(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?)*\\]': {
        pretty: '',
        type: 'token'
      },
      '\\[\\]': {
        pretty: 'Empty Token',
        type: 'token'
      },
      '(?<!\\[) ?\\+ ?(?![^\\]]\\])': {
        pretty: ' one or more (+)',
        type: 'token-incidence-modifier'
      },
      '(?<!\\[) ?\\* ?(?![^\\]]\\])': {
        pretty: 'zero or more (*)',
        type: 'token-incidence-modifier'
      },
      '(?<!\\[) ?\\? ?(?![^\\]]\\])': {
        pretty: 'zero or one (?)',
        type: 'token-incidence-modifier'
      },
      '(?<!\\[) ?\\{[0-9]+} ?(?![^\\]]\\])': {
        pretty: '',
        type: 'token-incidence-modifier'
      },
      '(?<!\\[) ?\\{[0-9]+(,[0-9]+)?} ?(?![^\\]]\\])': {
        pretty: '',
        type: 'token-incidence-modifier'
      }
    }
  
    let chipElements = [];
    let regexPattern = Object.keys(parsingElementDict).map(pattern => `(${pattern})`).join('|');
    const regex = new RegExp(regexPattern, 'gi');
    let match;
  
    while ((match = regex.exec(query)) !== null) {
      // this is necessary to avoid infinite loops with zero-width matches
      if (match.index === regex.lastIndex) {
        regex.lastIndex++;
      }
      let stringElement = match[0];
      for (let [pattern, chipElement] of Object.entries(parsingElementDict)) {
        const parsingRegex = new RegExp(pattern, 'gi');
        if (parsingRegex.exec(stringElement)) {
          // Creating the pretty text for the chip element
          let prettyText;
          switch (pattern) {
            case '<ent_type="([A-Z]+)">':
              prettyText = `Entity Type=${stringElement.replace(/<ent_type="|">/g, '')}`;
              break;
            case ':: ?match\\.text_[A-Za-z]+="[^"]+"':
              prettyText = stringElement.replace(/:: ?match\.text_|"|"/g, '');
              break;
            case '\\[(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?((\\&|\\|) ?(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?)*\\]':
              let doubleQuotes = /(word|lemma|pos|simple_pos)="[^"]+"/gi;
              let singleQuotes = /(word|lemma|pos|simple_pos)='[^']+'/gi;
              if (doubleQuotes.exec(stringElement)) {
                prettyText = stringElement.replace(/^\[|\]$|"/g, '');
              } else if (singleQuotes.exec(stringElement)) {
                prettyText = stringElement.replace(/^\[|\]$|'/g, '');
              }
              prettyText = prettyText.replace(/\&/g, ' and ').replace(/\|/g, ' or ');
              break;
            case '(?<!\\[) ?\\{[0-9]+} ?(?![^\\]]\\])':
              prettyText = `exactly ${stringElement.replace(/{|}/g, '')} (${stringElement})`;
              break;
            case '(?<!\\[) ?\\{[0-9]+(,[0-9]+)?} ?(?![^\\]]\\])':
              prettyText = `between${stringElement.replace(/{|}/g, ' ').replace(',', ' and ')}(${stringElement})`;
              break;
            default:
              prettyText = chipElement.pretty;
              break;
          }
          chipElements.push({
            type: chipElement.type,
            pretty: prettyText,
            query: stringElement
          });
          break;
        }
      }
    }
  
    return chipElements;
  }
}