import React from 'react';
import ReactTestRenderer from 'react-test-renderer';
import Adapter from 'enzyme-adapter-react-16/build/index';
import Enzyme from 'enzyme/build/index';
import { ConsoleMock } from 'app/testUtils/consoleMock';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import { PaymentDetailsOnAccountModal } from 'app/modules/vesselDetails/paymentDetails/components/paymentDetailsOnAccountModal';

jest.mock('app/shared/store/ui/uiSelectors', () => ({
  getScreenWidth: jest.fn(() => 1300),
}));

jest.mock('../store/paymentDetails.selectors', () => ({
  createPaymentDetailsLoadingSelector: jest.fn(() => () => false),
  selectPaymentDetailsDate: jest.fn(() => '2013-11-13'),
  selectPaymentDetailsOnAccountModalState: jest.fn(() => true),
}));

jest.mock('../store/paymentTables.selectors', () => ({
  selectOnAccountModalBreakdownData: jest.fn(() => [
    {
      label: 'On-Account distribution',
      total: 13,
      perDay: 8,
    },
    {
      label: 'Impact from Bunker Adjustment',
      total: 11,
      perDay: 7,
    },
    {
      label: 'Total distribution',
      total: 3,
      perDay: 2,
    },
    {
      label: 'Owner expenses',
      total: 1,
    },
    {
      label: 'Working Capital',
      total: 6,
    },
    {
      label: 'Actual/impaired earnings impact',
      total: 9,
    },
  ]),
  selectOnAccountModalAdditionalData: jest.fn(() => [
    {
      label: 'Average Pool Points',
      total: 13,
    },
    {
      label: 'Vessel Pool Points',
      total: 7,
    },
    {
      label: 'Average TCE pool (USD)*',
      total: 8,
    },
    {
      label: 'On-hire days',
      total: 3,
    },
  ]),
  selectOnAccountModalBreakdownSummary: jest.fn(() => ({
    label: 'Total Payment current period',
    total: 19,
  })),
}));

jest.mock('app/modules/vesselDetails/root/store/vesselDetails.selectors', () => ({
  selectVesselName: jest.fn(() => 'Vessel Name'),
}));

describe('Payment details on account modal tests', () => {
  Enzyme.configure({ adapter: new Adapter() });

  const mockStore = configureStore();
  let store;

  let consoleMock;

  beforeEach(() => {
    consoleMock = new ConsoleMock();
    store = mockStore({});
  });

  afterEach(() => {
    consoleMock.destroy();
  });


  it('renders correctly', () => {
    const tree = ReactTestRenderer
      .create(
        <Provider store={store}>
          <PaymentDetailsOnAccountModal />
        </Provider>
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
    expect(console.error).not.toBeCalled();
  });
});