import React from 'react';
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 '../../../../../helpers/intl-enzym-test-helpers';
import { LineImageCarousel } from '../index';
import { mockData } from './mockData';

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

jest.mock('../Content', () => ({
  __esModule: true,
  default: (props) => (
    <div className="LineImageCarouselContent-mock" {...props}>
      LineImageCarouselContent
    </div>
  ),
}));

describe('line wrapper test/>', () => {
  let renderedComponent;
  const formatMessage = jest.fn();
  const updateMessageState = jest.fn();
  const getAllTemplates = jest.fn();
  const renderHelper = (Line, Templates, content, activeKey) => {
    renderedComponent = mountWithIntl(
      <Provider store={store}>
        <LineImageCarousel
          id="flex__0"
          intl={{ formatMessage }}
          isFullMode={true}
          index={0}
          activeKey={activeKey}
          Line={Line}
          Templates={Templates}
          content={content}
          updateMessageState={updateMessageState}
          getAllTemplates={getAllTemplates}
        />
      </Provider>,
    );
  };

  it('should render line component new', () => {
    const { lineData1, Templates1, content3 } = mockData;
    renderHelper(lineData1, Templates1, content3, 'flex');
    expect(renderedComponent).toMatchSnapshot();
  });

  it('should render line component old', () => {
    const { lineData2, Templates2, content4 } = mockData;
    renderHelper(lineData2, Templates2, content4, 0);
    expect(renderedComponent).toMatchSnapshot();
  });
});
