const { I } = inject();
import { Helper } from 'codeceptjs';
import { logger } from "../Logger/logger";
import { CommonKeyword } from './commonKeyword';
import { DewLoader } from "./dewLoader";
import { DewElement } from "./element";
import { z } from './z';


/** Workflow class
 */
export class DragAndDrop extends Helper {
  /**
   * This function perform drag and drop operation on an element.
   *
   * ```js
   * DragAndDrop.performDragAndDrop("Charged Amount","//dew-container");
   * ```
   *
   * @param {String} srcField Name of Label need to be drag
   * @param {String} destinationContainer destination location | located by xapth|CSS
   */
  static async performDragAndDrop(srcField: string, destinationContainer: string) {
    try {
      const srcElement = `//span[text()[normalize-space()='${srcField}']]/preceding-sibling::span[contains(@class,'drag-handle')] | //label[text()[normalize-space()='${srcField}']]/preceding-sibling::span[contains(@class,'drag-handle')] | //div[contains(@class,'handle') and @title='${srcField}'] | //div[contains(@class,'draggable-item')]/div[@class='pointer' and text()[normalize-space()='${srcField}']]| //div[div[div[text()[normalize-space()='${srcField}']]] and contains(@class,'draggable')] | //div[contains(@class,'draggable-item')]/div[text()[normalize-space()='${srcField}']]`;
      logger.info(srcElement);

      const browserName = await z.executeScript(`return navigator.userAgent`);
      if (await browserName.includes(`Chrome`) || browserName.includes(`Edge`)) {
        await CommonKeyword.scrollIntoView(srcElement);
        await CommonKeyword.scrollIntoView(destinationContainer);

        await z.executeScript(`
      var elFrom = document.evaluate("${srcElement}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
      var elTo = document.evaluate("${destinationContainer}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
      var rectFrom = elFrom.getBoundingClientRect()
      var rectTo = elTo.getBoundingClientRect()

      var mouseEvents = document.createEvent("MouseEvents")
      mouseEvents.initMouseEvent('mousemove', true, false, window, 1, rectFrom.right, rectFrom.top, rectFrom.right, rectFrom.top,false,false,false,false,0,null)
      elFrom.dispatchEvent(mouseEvents)
      mouseEvents.initMouseEvent('mousedown', true, false, window, 1, rectFrom.right, rectFrom.top, rectFrom.right, rectFrom.top,false,false,false,false,0,null)
      elFrom.dispatchEvent(mouseEvents)
      mouseEvents.initMouseEvent('mousemove', true, false, window, 1, rectTo.right, rectTo.top, rectTo.right, rectTo.top,false,false,false,false,0,null)
      elFrom.dispatchEvent(mouseEvents)
      mouseEvents.initMouseEvent('mouseup', true, false, window, 1, rectTo.right, rectTo.top, rectTo.right, rectTo.top,false,false,false,false,0,null)
      elFrom.dispatchEvent(mouseEvents)
    `, srcElement, destinationContainer);
      } else {
        await CommonKeyword.scrollIntoView(srcElement);
        await z.dragAndDrop(srcElement, destinationContainer);
      }
      await DewLoader.waitForSpinner();
      logger.info(`Drag and Drop Done`);
    } catch (error) {
      console.log(`Issue Occured while drag and drop`);
      throw error;
    }
  }

  /**
  * This function perform drag and drop operation on html5 element.
  *
  * ```js
  * DragAndDrop.html5DragAndDrop("Charged Amount","//dew-container");
  * ```
  *
  * @param {String} srcField Name of Label need to be drag
  * @param {String} destinationContainer destination location | located by xapth|CSS
  */
  static async html5DragAndDrop(srcField: string, destinationContainer: string) {
    try {
      const srcElement = await DewElement.getDynamicLocator(`.//div[div[div[text()[normalize-space()='${srcField}']]] and contains(@class,'draggable')]`, `<<fieldName>>`, srcField);
      logger.info(srcElement);

      const browser = await this.prototype.helpers.WebDriver.browser;

      const srcXoffset = await z.grabElementBoundingRect(srcElement, `x`);
      const srcYoffset = await z.grabElementBoundingRect(srcElement, `y`);

      const destXoffset = await z.grabElementBoundingRect(destinationContainer, `x`);
      const destYoffset = await z.grabElementBoundingRect(destinationContainer, `y`);

      console.log(destXoffset);
      console.log(destYoffset);

      if (browser.isW3C) {
        await browser.performActions([{
          type: `pointer`,
          id: `pointer1`,
          parameters: { pointerType: `mouse` },
          actions: [{
            type: `pointerMove`,
            origin: this,
            x: Math.floor(srcXoffset),
            y: Math.floor(srcYoffset),
          },
          {
            type: `pointerDown`,
            button: 0,
          }],
        }]);
      }
      await z.saveScreenshot(`test.png`);
      await logger.info(`Drag and Drop Done`);
    } catch (error) {
      console.log(`Issue Occured while drag and drop`);
      throw error;
    }
  }

  /**
   *
   * Perform Drag Operation and verify if element is present in UI
   *
   * ```js
   *  await DragAndDrop.dragAndVerifyElement(`//span[contains(text(),'Supplier Awarded Cost')]`, `//dew-report-to-chart-view//pa-chart//div[contains(@class,"measure-wrapper")]//div[contains(@class,'valid-drop-area')]`);
   * ```
   * @param {string}elementToDrag
   * @param {string}elementToVerify
   */
  static async dragAndVerifyElement(elementToDrag: string, elementToVerify: string) {
    const browser = await this.prototype.helpers.WebDriver.browser;

    const xoffset = await z.grabElementBoundingRect(elementToDrag, `x`);
    const yoffset = await z.grabElementBoundingRect(elementToDrag, `y`);

    if (browser.isW3C) {
      await browser.performActions([{
        type: `pointer`,
        id: `pointer1`,
        parameters: { pointerType: `mouse` },
        actions: [{
          type: `pointerMove`,
          origin: this,
          x: Math.floor(xoffset),
          y: Math.floor(yoffset),
        },
        {
          type: `pointerDown`,
          button: 0,
        },
        {
          type: `pointerMove`,
          origin: this,
          x: Math.floor(xoffset + 500),
          y: Math.floor(yoffset + 200),
        }],
      }]);
    } else {
      await CommonKeyword.moveCursorTo(elementToDrag);
      await browser.buttonDown(0);
      await browser.moveToElement(null, 200, 0);
    }

    if (!await DewElement.checkIfElementVisible(elementToVerify)) {
      throw new Error(`Element is not present`);
    }
  }
}