import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
import { baseUniDriverFactory } from '../../unidriver';
import {
  EmptyStateUniDriver,
  InfoIconUniDriver,
  SectionHeaderUniDriver,
  SkeletonLineUniDriver,
  TextButtonUniDriver,
} from '@wix/design-system/dist/testkit/unidriver';
import { CustomFieldPanelUniDriver } from '../CustomFieldsPanel/CustomFieldPanel.uni.driver';
import { CustomFieldModalUniDriver } from '../CustomFieldModal/CustomFieldModal.uni.driver';
import CustomFieldsFormUniDriver from '../CustomFieldsForm/CustomFieldsForm.uni.driver';
import { ArchiveFieldModalUniDriver } from '../CustomFieldsPanel/ArchiveFieldModal.uni.driver';
import { DisabledTooltipButtonUniDriver } from '../DisabledTooltip/DisabledTooltipButton.uni.driver';
import CardContainerUniDriver from '../CardContainer/CardContainer.uni.driver';
import { CustomFieldsWidgetTheme } from './types';

export default (base: UniDriver, body: UniDriver) => {
  const addCustomFieldButton = () =>
    DisabledTooltipButtonUniDriver(base, body, {
      dataHook: 'add-custom-field-btn',
    });

  const manageFieldsButton = () =>
    DisabledTooltipButtonUniDriver(base, body, {
      dataHook: 'manage-fields-button',
    });

  const emptyState = () =>
    EmptyStateUniDriver(base.$(`[data-hook="empty-state"]`), body);

  const cardContainer = () => CardContainerUniDriver(base, body);

  const getFormByNamespace = (namespace = '_user_fields') =>
    CustomFieldsFormUniDriver(
      base.$(`[data-hook="custom-fields-form-${namespace}"]`),
      body,
    );

  return {
    /** Returns title text */
    getTitle: () => base.$(`[data-hook="title"]`).text(),
    /** Returns subtitle text */
    getSubtitle: async () => {
      const infoIcon = InfoIconUniDriver(
        base.$('[data-hook="subtitle-info-icon"]'),
        body,
      );

      if (await infoIcon.exists()) {
        return infoIcon.getContent();
      }

      return base.$(`[data-hook="subtitle"]`).text();
    },
    getFormSection: (namespace: string) => {
      const sectionBase = base.$(
        `[data-hook="custom-fields-namespace-form-${namespace}"]`,
      );

      const infoIcon = InfoIconUniDriver(
        sectionBase.$('[data-hook="info-icon"]'),
        body,
      );

      const sectionHeader = SectionHeaderUniDriver(
        sectionBase.$('[data-hook="section-header"]'),
        body,
      );

      return {
        ...sectionBase,
        ...sectionHeader,
        infoExists: () => infoIcon.exists(),
        getInfoContent: () => infoIcon.getContent(),
        _hasDivider: async () =>
          Array.from<string>((await sectionHeader.element()).classList).some(
            (className) =>
              className.includes('divider') && className.includes('top'),
          ),
      };
    },
    /** Checks whether the form component rendered */
    isFormExists: (namespace?: string) =>
      getFormByNamespace(namespace).exists(),
    onlyUserFieldsFormExists: (namespace?: string) =>
      getFormByNamespace(namespace).exists(),
    /** Waits for form rendering */
    waitForForm: (timeout: number = 5000, namespace?: string) =>
      waitFor(() => getFormByNamespace(namespace).exists(), timeout),
    addCustomFieldButton,
    manageFieldsButton,
    /** Gets add field button text */
    getAddFieldContent: () => addCustomFieldButton().getButtonTextContent(),
    /** Gets manage fields button text */
    getManageFieldsContent: () => manageFieldsButton().getButtonTextContent(),
    /** Indicates whether the widget loading state shows */
    isLoading: (theme: CustomFieldsWidgetTheme = 'card') =>
      theme === 'card'
        ? cardContainer().showsSkeletonHeader()
        : SkeletonLineUniDriver(
            body.$('[data-hook="widget-inline-loading"]'),
            body,
          ).exists(),

    /** Clicks on add field button */
    clickAddField: () => addCustomFieldButton().click(),
    /** Checks whether the add field button rendered */
    addCustomFieldButtonExists: () => addCustomFieldButton().exists(),
    /** Clicks on manage fields button */
    clickManageFieldsContent: () => manageFieldsButton().click(),
    /** Checks whether the manage fields button rendered */
    manageCustomFieldsButtonExists: () => manageFieldsButton().exists(),
    /** Returns the error state title */
    getErrorTitle: (theme: CustomFieldsWidgetTheme = 'card') =>
      theme === 'card'
        ? cardContainer().getErrorState().getTitleText()
        : EmptyStateUniDriver(
            body.$('[data-hook="custom-fields-widget-inline-error"]'),
            body,
          ).getTitleText(),
    /** Returns the error state subtitle */
    getErrorSubtitle: (theme: CustomFieldsWidgetTheme = 'card') =>
      theme === 'card'
        ? cardContainer().getErrorState().getSubtitleText()
        : EmptyStateUniDriver(
            body.$('[data-hook="custom-fields-widget-inline-error"]'),
            body,
          ).getSubtitleText(),
    /** Returns the empty state title */
    getEmptyTitle: () => emptyState().getTitleText(),
    /** Returns the empty state subtitle */
    getEmptySubtitle: () => emptyState().getSubtitleText(),
    /** Clicks on try again button when error state visible */
    clickTryAgain: (theme: CustomFieldsWidgetTheme = 'card') =>
      theme === 'card'
        ? cardContainer().getErrorState().getRetryButton().click()
        : TextButtonUniDriver(
            body.$('[data-hook="retry-button"]'),
            body,
          ).click(),
    /** Gets try again button text */
    getTryAgainContent: (theme: CustomFieldsWidgetTheme = 'card') =>
      theme === 'card'
        ? cardContainer()
            .getErrorState()
            .getRetryButton()
            .getButtonTextContent()
        : TextButtonUniDriver(
            body.$('[data-hook="retry-button"]'),
            body,
          ).getButtonTextContent(),
    /** Returns custom fields side panel driver */
    sidePanel: () => CustomFieldPanelUniDriver(body, body),
    /** Returns custom field modal driver */
    customFieldModal: () => CustomFieldModalUniDriver(base, body),
    /** Returns archive field modal driver */
    archiveFieldModal: () => ArchiveFieldModalUniDriver(base, body),
    /** Returns field driver by given ID */
    fieldById: (id: string, namespace?: string) =>
      getFormByNamespace(namespace).field(id),
    ...baseUniDriverFactory(base),
  };
};