import '@flowgram.ai/fixed-layout-editor/index.css';

import { defaultFixedSemiMaterials } from '@flowgram.ai/fixed-semi-materials';
import {
  FixedLayoutEditorProvider,
  EditorRenderer,
  FlowNodeEntity,
  useNodeRender,
} from '@flowgram.ai/fixed-layout-editor';

export const NodeRender = ({ node }: { node: FlowNodeEntity }) => {
  const {
    onMouseEnter,
    onMouseLeave,
    startDrag,
    form,
    dragging,
    isBlockOrderIcon,
    isBlockIcon,
    activated,
  } = useNodeRender();

  return (
    <div
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onMouseDown={(e) => {
        startDrag(e);
        e.stopPropagation();
      }}
      style={{
        width: 280,
        minHeight: 88,
        height: 'auto',
        background: '#fff',
        border: '1px solid rgba(6, 7, 9, 0.15)',
        borderColor: activated ? '#82a7fc' : 'rgba(6, 7, 9, 0.15)',
        borderRadius: 8,
        boxShadow: '0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.02)',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        position: 'relative',
        padding: 12,
        cursor: 'move',
        opacity: dragging ? 0.3 : 1,
        ...(isBlockOrderIcon || isBlockIcon ? { width: 260 } : {}),
      }}
    >
      {form?.render()}
    </div>
  );
};

const FlowGramApp = () => (
  <FixedLayoutEditorProvider
    nodeRegistries={[
      {
        type: 'custom',
      },
    ]}
    initialData={{
      nodes: [
        {
          id: 'custom_0',
          type: 'custom',
        },
      ],
    }}
    materials={{
      renderDefaultNode: NodeRender,
      components: defaultFixedSemiMaterials,
    }}
  >
    <EditorRenderer />
  </FixedLayoutEditorProvider>
);

export default FlowGramApp;