import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
import {
  DropdownLayoutUniDriver,
  PopoverMenuUniDriver,
} from '@wix/design-system/dist/testkit/unidriver';
import { baseUniDriverFactory } from '../../unidriver';

export const ManageViewPopoverUniDriver = (
  base: UniDriver,
  body: UniDriver,
) => {
  const manageViewPopoverDriverBase = () =>
    base.$('[data-hook="manage-view-popover"]');

  const manageViewPopoverDriver = () =>
    PopoverMenuUniDriver(manageViewPopoverDriverBase(), body);

  const getContentElement = async () => {
    const popoverDriverBase = manageViewPopoverDriverBase();

    const contentDataHook = await popoverDriverBase.attr('data-content-hook');

    if (contentDataHook) {
      return body.$(`[data-content-element="${contentDataHook}"]`);
    }

    const baseDataHook = await popoverDriverBase.attr('data-hook');

    return body.$(`[data-hook="${baseDataHook}-content"]`);
  };

  const getDropdownLayoutDriver = async () => {
    const contentElement = await getContentElement();
    return DropdownLayoutUniDriver(
      contentElement.$(`[data-hook="dropdown-base-dropdownlayout"]`),
      body,
    );
  };

  /**
   * In redesign mode the "Save to New View" item is removed from the popover
   * (moved to a dropdown footer), so all option indices shift by -1.
   * This helper detects which mode we're in by checking for the save-new-view item.
   */
  const getSaveNewViewOffset = async () => {
    const contentElement = await getContentElement();
    const hasSaveNew = await contentElement
      .$('[data-hook="save-new-view"]')
      .exists();
    return hasSaveNew ? 1 : 0;
  };

  return {
    ...baseUniDriverFactory(base),
    exists: () => manageViewPopoverDriver().exists(),

    /** Opens the manage view popover */
    open: () =>
      manageViewPopoverDriver()
        .getTriggerElement('manage-view-popover-button')
        .click(),
    /** Indicates whether the manage view popover is open */
    isOpen: () => manageViewPopoverDriver().isMenuOpen(),
    /** Trigger save changes action */
    clickSaveChanges: () =>
      manageViewPopoverDriver().clickAtChildByDataHook('save-changes-to-view'),
    /** Trigger save new view action (legacy mode only) */
    clickSaveNewView: () =>
      manageViewPopoverDriver().clickAtChildByDataHook('save-new-view'),
    /** Trigger rename view action */
    clickRenameView: () =>
      manageViewPopoverDriver().clickAtChildByDataHook('rename-view'),
    /** Trigger set as default view action */
    clickSetAsDefaultView: () =>
      manageViewPopoverDriver().clickAtChildByDataHook('set-as-default-view'),
    /** Trigger delete view action */
    clickDeleteView: () =>
      manageViewPopoverDriver().clickAtChildByDataHook('delete-view'),
    /** Get save changes btn (always at index 0) */
    getSaveChangesBtn: async () => {
      const dropdownLayoutDriver = await getDropdownLayoutDriver();
      return dropdownLayoutDriver.optionById(0);
    },
    /** Get save new view btn (legacy mode only, index 1) */
    getSaveNewViewBtn: async () => {
      const dropdownLayoutDriver = await getDropdownLayoutDriver();
      return dropdownLayoutDriver.optionById(1);
    },
    /** Get rename view btn (auto-detects redesign vs legacy offset) */
    getRenameViewBtn: async () => {
      const dropdownLayoutDriver = await getDropdownLayoutDriver();
      const offset = await getSaveNewViewOffset();
      return dropdownLayoutDriver.optionById(1 + offset);
    },
    /** Get set as default view btn (auto-detects redesign vs legacy offset) */
    getSetAsDefaultViewBtn: async () => {
      const dropdownLayoutDriver = await getDropdownLayoutDriver();
      const offset = await getSaveNewViewOffset();
      return dropdownLayoutDriver.optionById(2 + offset);
    },
    /** Get delete view btn (auto-detects redesign vs legacy offset) */
    getDeleteViewBtn: async () => {
      const dropdownLayoutDriver = await getDropdownLayoutDriver();
      const offset = await getSaveNewViewOffset();
      return dropdownLayoutDriver.optionById(3 + offset);
    },
  };
};