import React from 'react';
import { querybuilderSlice, setQuerybuilderNodes, setSchema, store } from '@graphpolaris/shared/lib/data-access/store';

import { configureStore } from '@reduxjs/toolkit';
import { Meta, StoryObj } from '@storybook/react';
import { Provider } from 'react-redux';
import QueryBuilderInner from '../querybuilder';
import { Handles, NodeAttribute, QueryElementTypes, QueryMultiGraphology, toHandleId } from '../../model';
import { SchemaUtils } from '../../../schema/schema-utils';
import { ReactFlowProvider } from 'reactflow';

const Component: Meta<typeof QueryBuilderInner> = {
  component: QueryBuilderInner,
  title: 'QueryBuilder/Panel/SimpleDisconnected',
  decorators: [(story) => <div>{story()}</div>],
};

export const SimpleDisconnected: StoryObj = {
  args: {
    nodes: [
      {
        name: 'entity',
        attributes: [
          { name: 'city', type: 'string' },
          { name: 'vip', type: 'bool' },
          { name: 'state', type: 'string' },
        ],
      },
    ],
    edges: [
      {
        name: 'entity:entity',
        from: 'entity',
        to: 'entity',
        collection: 'entity2entity',
        attributes: [
          { name: 'arrivalTime', type: 'int' },
          { name: 'departureTime', type: 'int' },
        ],
      },
    ],
  },
  decorators: [
    (story: any, { args }: any) => {
      console.log(args);

      const graph = new QueryMultiGraphology();
      const schema = SchemaUtils.schemaBackend2Graphology({
        nodes: args.nodes,
        edges: args.edges,
      });

      store.dispatch(setSchema(schema.export()));

      const entity1 = graph.addPill2Graphology(
        {
          id: '0',
          type: QueryElementTypes.Entity,
          x: 100,
          y: 100,
          name: 'Airport 1',
        },
        schema.getNodeAttribute('entity', 'attributes')
      );
      const entity2 = graph.addPill2Graphology(
        {
          id: '10',
          type: QueryElementTypes.Entity,
          x: 200,
          y: 200,
          name: 'Airport 2',
        },
        schema.getNodeAttribute('entity', 'attributes')
      );

      // graph.addNode('0', { type: QueryElementTypes.Entity, x: 100, y: 100, name: 'Entity Pill' });
      const relation1 = graph.addPill2Graphology({
        id: '1',
        type: QueryElementTypes.Relation,
        x: 140,
        y: 140,
        name: 'Flight between airports',
        collection: 'Relation Pill',
        depth: { min: 0, max: 1 },
        attributes: schema.getEdgeAttribute('entity:entity_entityentity', 'attributes'),
      });
      store.dispatch(setQuerybuilderNodes(graph.export()));

      return (
        <Provider store={store}>
          <div
            style={{
              width: '100%',
              height: '95vh',
            }}
          >
            <ReactFlowProvider>{story()}</ReactFlowProvider>
          </div>
        </Provider>
      );
    },
  ],
};

export default Component;