import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { RawJSONVis } from './rawjsonvis';

import {
  assignNewGraphQueryResult,
  colorPaletteConfigSlice,
  graphQueryResultSlice,
  resetGraphQueryResults,
  store,
} from '@graphpolaris/shared/data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import { GraphPolarisThemeProvider } from '@graphpolaris/shared/data-access/theme';

export default {
  /* 👇 The title prop is optional.
   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'Components/Visualizations/RawJSONVIS',
  component: RawJSONVis,
  decorators: [
    (story) => (
      <Provider store={Mockstore}>
        <GraphPolarisThemeProvider>{story()}</GraphPolarisThemeProvider>
      </Provider>
    ),
  ],
} as ComponentMeta<typeof RawJSONVis>;

const Mockstore = configureStore({
  reducer: {
    colorPaletteConfig: colorPaletteConfigSlice.reducer,
    graphQueryResult: graphQueryResultSlice.reducer,
  },
});

const Template: ComponentStory<typeof RawJSONVis> = (args) => (
  <RawJSONVis {...args} />
);

export const TestWithData = Template.bind({});
TestWithData.args = {
  loading: false,
};
TestWithData.play = async () => {
  const dispatch = store.dispatch;
  dispatch(
    assignNewGraphQueryResult({
      nodes: [
        { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
        { id: 'villain', attributes: { name: 'Le Chiffre' } },
      ],
      links: [],
    })
  );
};

export const Loading = Template.bind({});
Loading.args = {
  loading: true,
};

export const Empty = Template.bind({});
Empty.args = {
  // Shaping the stories through args composition.
  // Inherited data coming from the Loading story.
  ...Loading.args,
  loading: false,
};
Empty.play = async () => {
  const dispatch = store.dispatch;
  dispatch(resetGraphQueryResults());
};