import { render } from '@testing-library/react';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-intl-redux';
import { MemoryRouter, Route } from 'react-router-dom';
import { CookiesProvider } from 'react-cookie';
import Controlpanel from './Controlpanel';

const mockStore = configureStore();

vi.mock('../Form/Form', () => ({
  default: vi.fn(({ requestError }) => (
    <div id="form">
      {requestError ? `requestError: ${requestError}` : 'Form rendered'}
    </div>
  )),
}));

vi.mock('../../Toolbar/Toolbar', () => ({
  default: vi.fn(() => <div id="Portal">Toolbar Component</div>),
}));

const store = mockStore({
  controlpanels: {
    controlpanel: {
      '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
      title: 'Date and Time',
      schema: {
        fieldsets: [],
        properties: [],
      },
      data: {},
    },
    update: {
      loading: false,
      loaded: true,
      error: { response: { body: { message: null } } },
    },
  },
  intl: {
    locale: 'en',
    messages: {},
  },
  actions: {
    actions: {},
  },
  userSession: {
    token: null,
  },
  content: {
    data: {},
    unlock: {
      loading: false,
      loaded: true,
    },
    get: {
      loading: false,
      loaded: true,
    },
  },
  types: {
    types: [],
    get: {
      loading: false,
      loaded: true,
    },
  },
});

describe('Controlpanel', () => {
  it('renders a controlpanel component', () => {
    store.dispatch = vi.fn(() => Promise.resolve());
    const { container } = render(
      <Provider store={store}>
        <CookiesProvider>
          <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
            <Route path={'/controlpanel/:id'} component={Controlpanel} />
            <div id="toolbar"></div>
          </MemoryRouter>
        </CookiesProvider>
      </Provider>,
    );

    expect(container).toMatchSnapshot();
  });
});