import React from 'react';
import { act } from 'react-dom/test-utils';
import { Provider } from 'react-redux';
import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
import history from '../../../../../utils/history';
import { initialReducer } from '../../../../../initialReducer';
import { mountWithIntl } from '../../../../../../app/helpers/intl-enzym-test-helpers';
import { LineImageCarouselContent } from '../Content';
import { mockData } from './mockData';

let store;
beforeAll(() => {
  store = configureStore({}, initialReducer, history);
});

describe('Creatives line image carousel test/>', () => {
  let renderedComponent;
  const clearAsset = jest.fn();
  const uploadAsset = jest.fn();
  const formatMessage = jest.fn();
  const updateCarouselMessageState = jest.fn();
  const updateUploadedAssetList = jest.fn();

  const renderHelper = (args) => {
    renderedComponent = mountWithIntl(
      <Provider store={store}>
        <LineImageCarouselContent
          id={'template__0'}
          intl={{ formatMessage }}
          isFullMode={true}
          actions={{
            clearAsset,
            uploadAsset,
          }}
          Line={args?.lineData}
          content={args?.content}
          index={0}
          activeIndex={0}
          updateCarouselMessageState={updateCarouselMessageState}
          uploadedAssetList={args?.uploadedAssetList}
          updateUploadedAssetList={updateUploadedAssetList}
        />
      </Provider>,
    );
  };

  it('should render', () => {
    const { lineData1, content1, uploadedAssetList } = mockData;
    renderHelper({
      lineData: lineData1,
      content: content1,
      uploadedAssetList,
    });
    expect(renderedComponent).toMatchSnapshot();
    act(() => {
      renderedComponent.find('CapButton.dragger-button').simulate('click');
    });
    expect(renderedComponent).toMatchSnapshot();
  });
  it('should render', () => {
    const { lineData2, content2, uploadedAssetList } = mockData;
    renderHelper({
      lineData: lineData2,
      content: content2,
      uploadedAssetList,
    });
    act(() => {
      renderedComponent.find('CapButton.dragger-button').simulate('click');
    });
    expect(renderedComponent).toMatchSnapshot();
  });
});
