import { RenderResult, act, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { mockIpmaClient } from 'api/Client/ClientMock';
import { MarketCardVoidByTimeRange } from 'components/manualActions';
import { manualActionsEndpoints } from 'constants/manualActions';
import { roles } from 'constants/Roles';
import { mockVoidByTimeRangePayload } from 'models/ManualActions';
import { mockMarkets } from 'models/Market';
import { mockStates } from 'models/State';
import { StatusCode } from 'models/StatusCode';
import { ManualActionsWrapper, renderForTest } from 'testUtils';
import en from 'translations/en.json';

const testStrings = {
  fromDate: '15/02/2022 14:30:00',
  toDate: '15/02/2022 15:30:00',
};

describe('MarketCardVoidByTimeRange.tsx', () => {
  let fromDate: HTMLElement, toDate: HTMLElement;
  let wrapper: RenderResult;

  describe('default', () => {
    beforeEach(async () => {
      await act(async () => {
        wrapper = renderForTest(
          <MarketCardVoidByTimeRange
            markets={mockMarkets}
            states={mockStates}
          />,
        );
      });
    });
    it('should render with the default snapshot', () => {
      expect(wrapper.container).toMatchSnapshot();
    });

    it('should select a From date', async () => {
      await act(async () => {
        userEvent.type(
          screen.getByRole(roles.textbox, { name: en.form.from }),
          testStrings.fromDate,
        );
      });

      expect(
        screen.getByRole(roles.textbox, { name: en.form.from }),
      ).toHaveValue(testStrings.fromDate);
    });

    // it('should select a To date', async () => {
    //   const input = screen.getByRole(roles.textbox, { name: en.form.to });
    //   await act(async () => {
    //     userEvent.type(input, testStrings.toDate);
    //   });
    //   expect(input).toHaveValue(testStrings.toDate);
    // });

    it('should select equal From/To dates and show validation', () => {
      fromDate = screen.getByRole(roles.textbox, { name: en.form.from });

      toDate = screen.getByRole(roles.textbox, { name: en.form.to });

      userEvent.type(fromDate, testStrings.fromDate);
      userEvent.type(toDate, testStrings.fromDate);

      expect(screen.getByText(en.validations.toMinMessage)).toBeInTheDocument();
    });
  });

  // describe('void markets', () => {
  //   beforeAll(() => {
  //     mockIpmaClient
  //       .onPost(manualActionsEndpoints.postVoidByTimeRangeAPI)
  //       .reply(StatusCode.OK, mockVoidByTimeRangePayload);
  //   });

  //   beforeEach(async () => {
  //     wrapper = renderForTest(
  //       <ManualActionsWrapper>
  //         <MarketCardVoidByTimeRange
  //           markets={mockMarkets}
  //           states={mockStates}
  //         />
  //       </ManualActionsWrapper>,
  //     );

  //     fromDate = screen.getByRole(roles.textbox, { name: en.form.from });

  //     toDate = screen.getByRole(roles.textbox, { name: en.form.to });

  //     userEvent.type(fromDate, testStrings.fromDate);
  //     userEvent.type(toDate, testStrings.toDate);

  //     await act(async () => {
  //       userEvent.click(
  //         screen.getByRole(roles.button, { name: en.common.cta.void }),
  //       );
  //     });
  //   });

  //   it('should open confirmation modal', () => {
  //     expect(
  //       screen.getByRole(roles.dialog, { name: en.modal.vtr.title }),
  //     ).toBeInTheDocument();
  //   });

  //   it('should close confirmation modal when cancel button is clicked', async () => {
  //     userEvent.click(
  //       screen.getByRole(roles.button, { name: en.accessibility.close }),
  //     );

  //     await waitFor(() =>
  //       expect(
  //         screen.queryByRole(roles.dialog, { name: en.modal.vtr.title }),
  //       ).not.toBeInTheDocument(),
  //     );
  //   });

  //   it('should show a success toast after a successful void', async () => {
  //     userEvent.click(
  //       screen.getByRole(roles.button, { name: en.common.cta.void }),
  //     );

  //     expect(
  //       await screen.findByRole(roles.alert, {
  //         name: en.accessibility.success,
  //       }),
  //     ).toBeInTheDocument();
  //   });
  // });

  // describe('void error', () => {
  //   beforeAll(() => {
  //     mockIpmaClient
  //       .onPost(manualActionsEndpoints.postVoidByTimeRangeAPI)
  //       .reply(StatusCode.BAD_REQUEST, mockVoidByTimeRangePayload);
  //   });

  //   it('should show error toast and keep modal open', async () => {
  //     wrapper = renderForTest(
  //       <ManualActionsWrapper>
  //         <MarketCardVoidByTimeRange
  //           markets={mockMarkets}
  //           states={mockStates}
  //         />
  //       </ManualActionsWrapper>,
  //     );

  //     fromDate = screen.getByRole(roles.textbox, { name: en.form.from });

  //     toDate = screen.getByRole(roles.textbox, { name: en.form.to });

  //     userEvent.type(fromDate, testStrings.fromDate);
  //     userEvent.type(toDate, testStrings.toDate);

  //     await act(async () => {
  //       userEvent.click(
  //         screen.getByRole(roles.button, { name: en.common.cta.void }),
  //       );
  //     });

  //     userEvent.click(
  //       screen.getByRole(roles.button, { name: en.common.cta.void }),
  //     );

  //     expect(
  //       await screen.findByText(en.toast.errorVTRAllStates),
  //     ).toBeInTheDocument();

  //     expect(
  //       screen.getByRole(roles.dialog, { name: en.modal.vtr.title }),
  //     ).toBeInTheDocument();
  //   });
  // });
});
  console.error
    Warning: An update to MarketCardVoidByTimeRange inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at MarketCardVoidByTimeRange (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/components/manualActions/voidByTimeRange/MarketCardVoidByTimeRange/MarketCardVoidByTimeRange.tsx:37:3)
        at QueryClientProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.js:65:3)
        at QueryClientProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/providers/QueryClientProvider/QueryClientProvider.tsx:16:3)
        at FeedbackProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/FeedbackContext/FeedbackContext.tsx:46:3)
        at FeedbackWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/FeedbackUtils.tsx:4:3)
        at ToastProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/ToastContext/ToastContext.tsx:44:3)
        at ToastWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/ToastUtils.tsx:6:3)
        at I18nextProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
        at I18NWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/I18NUtils.tsx:8:3)
        at FlagsProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/FlagsContext/FlagsContext.tsx:36:3)
        at FeatureFlagsWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/FeatureFlagsUtils.tsx:11:3)
        at ThemeContextMock (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/ThemeContext/ThemeContextMock.tsx:10:3)
        at PermissionsContextMock (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/PermissionsContext/PermissionsContextMock.tsx:11:8)
        at TestWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/TestUtils.tsx:32:3)
        at Router (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/react-router/lib/components.tsx:290:13)
        at RouterWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/RouterUtils.tsx:10:3)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5)
      at dispatchSetState (node_modules/react-dom/cjs/react-dom.development.js:17527:7)
      at node_modules/react-hook-form/src/useForm.ts:168:9
      at node_modules/react-hook-form/src/useForm.ts:224:9
      at node_modules/react-hook-form/src/useForm.ts:395:9

  console.error
    Warning: An update to MarketCardVoidByTimeRange inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at MarketCardVoidByTimeRange (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/components/manualActions/voidByTimeRange/MarketCardVoidByTimeRange/MarketCardVoidByTimeRange.tsx:37:3)
        at QueryClientProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.js:65:3)
        at QueryClientProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/providers/QueryClientProvider/QueryClientProvider.tsx:16:3)
        at FeedbackProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/FeedbackContext/FeedbackContext.tsx:46:3)
        at FeedbackWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/FeedbackUtils.tsx:4:3)
        at ToastProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/ToastContext/ToastContext.tsx:44:3)
        at ToastWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/ToastUtils.tsx:6:3)
        at I18nextProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
        at I18NWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/I18NUtils.tsx:8:3)
        at FlagsProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/FlagsContext/FlagsContext.tsx:36:3)
        at FeatureFlagsWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/FeatureFlagsUtils.tsx:11:3)
        at ThemeContextMock (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/ThemeContext/ThemeContextMock.tsx:10:3)
        at PermissionsContextMock (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/PermissionsContext/PermissionsContextMock.tsx:11:8)
        at TestWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/TestUtils.tsx:32:3)
        at Router (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/react-router/lib/components.tsx:290:13)
        at RouterWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/RouterUtils.tsx:10:3)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5)
      at dispatchSetState (node_modules/react-dom/cjs/react-dom.development.js:17527:7)
      at node_modules/react-hook-form/src/useForm.ts:168:9
      at node_modules/react-hook-form/src/useForm.ts:224:9
      at node_modules/react-hook-form/src/useForm.ts:395:9

  console.error
    Warning: An update to MarketCardVoidByTimeRange inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at MarketCardVoidByTimeRange (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/components/manualActions/voidByTimeRange/MarketCardVoidByTimeRange/MarketCardVoidByTimeRange.tsx:37:3)
        at QueryClientProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.js:65:3)
        at QueryClientProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/providers/QueryClientProvider/QueryClientProvider.tsx:16:3)
        at FeedbackProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/FeedbackContext/FeedbackContext.tsx:46:3)
        at FeedbackWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/FeedbackUtils.tsx:4:3)
        at ToastProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/ToastContext/ToastContext.tsx:44:3)
        at ToastWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/ToastUtils.tsx:6:3)
        at I18nextProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
        at I18NWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/I18NUtils.tsx:8:3)
        at FlagsProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/FlagsContext/FlagsContext.tsx:36:3)
        at FeatureFlagsWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/FeatureFlagsUtils.tsx:11:3)
        at ThemeContextMock (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/ThemeContext/ThemeContextMock.tsx:10:3)
        at PermissionsContextMock (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/PermissionsContext/PermissionsContextMock.tsx:11:8)
        at TestWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/TestUtils.tsx:32:3)
        at Router (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/react-router/lib/components.tsx:290:13)
        at RouterWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/RouterUtils.tsx:10:3)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5)
      at dispatchSetState (node_modules/react-dom/cjs/react-dom.development.js:17527:7)
      at node_modules/react-hook-form/src/useForm.ts:168:9
      at node_modules/react-hook-form/src/useForm.ts:224:9
      at node_modules/react-hook-form/src/useForm.ts:395:9

  console.error
    Warning: An update to MarketCardVoidByTimeRange inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at MarketCardVoidByTimeRange (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/components/manualActions/voidByTimeRange/MarketCardVoidByTimeRange/MarketCardVoidByTimeRange.tsx:37:3)
        at QueryClientProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.js:65:3)
        at QueryClientProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/providers/QueryClientProvider/QueryClientProvider.tsx:16:3)
        at FeedbackProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/FeedbackContext/FeedbackContext.tsx:46:3)
        at FeedbackWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/FeedbackUtils.tsx:4:3)
        at ToastProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/ToastContext/ToastContext.tsx:44:3)
        at ToastWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/ToastUtils.tsx:6:3)
        at I18nextProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
        at I18NWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/I18NUtils.tsx:8:3)
        at FlagsProvider (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/FlagsContext/FlagsContext.tsx:36:3)
        at FeatureFlagsWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/FeatureFlagsUtils.tsx:11:3)
        at ThemeContextMock (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/ThemeContext/ThemeContextMock.tsx:10:3)
        at PermissionsContextMock (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/contexts/PermissionsContext/PermissionsContextMock.tsx:11:8)
        at TestWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/TestUtils.tsx:32:3)
        at Router (/Users/ricardobarata/dev/repos/multi-state-management-ui/node_modules/react-router/lib/components.tsx:290:13)
        at RouterWrapper (/Users/ricardobarata/dev/repos/multi-state-management-ui/src/testUtils/RouterUtils.tsx:10:3)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5)
      at dispatchSetState (node_modules/react-dom/cjs/react-dom.development.js:17527:7)
      at node_modules/react-hook-form/src/useForm.ts:168:9
      at node_modules/react-hook-form/src/useForm.ts:224:9
      at node_modules/react-hook-form/src/useForm.ts:395:9 why?