import React from "react";
import { injectIntl } from 'react-intl';
import '@testing-library/jest-dom';
import FormBuilder from '../index';
import { Provider } from 'react-redux';
import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
import history from "../../../utils/history";
import { initialReducer } from "../../../initialReducer";
import {
    render,
    screen,
    fireEvent,
    waitFor,
    act
  } from '../../../utils/test-utils';
import { mockData } from './mockData';


const ComponentToRender = injectIntl(FormBuilder);
const renderComponent = props => {
  const store = configureStore({}, initialReducer, history);
  return render(
    <Provider store={store}>
      <ComponentToRender {...props} />
    </Provider>,
  );
};

describe("test for checkbox form builder",() => {
  const onFormValidityChange=jest.fn();
    const props={
      ...mockData,
      onFormValidityChange
    }
    renderComponent(props);
    it("add action button to notification disabled in ios", async () => {
      const addNotifBtn=screen.getByLabelText("Add action buttons to notification")
      expect(addNotifBtn).toBeDisabled();
      // Use mouseEnter instead of mouseOver for tooltip, and wait longer for tooltip to appear
      // Tooltips typically have a delay and are rendered in a portal, so we need to wait for them to appear
      await act(async () => {
        fireEvent.mouseEnter(addNotifBtn);
        // Also trigger mouseOver as some tooltip implementations use both
        fireEvent.mouseOver(addNotifBtn);
      });
      // Wait for tooltip to appear - it might be in a portal, so query document body
      await waitFor(() => {
        const tooltip = screen.getByText("This section is being revamped. Till then it will remain disabled.");
        expect(tooltip).toBeInTheDocument();
      }, { timeout: 3000 });
    })
})