import React, { useEffect, useMemo, useRef, useState } from 'react';
import { SmartBezierEdge, SmartStepEdge, SmartStraightEdge } from '@tisoap/react-flow-smart-edge';
import ReactFlow, { Edge, Node, ReactFlowInstance, ReactFlowProvider, useEdgesState, useNodesState } from 'reactflow';
import 'reactflow/dist/style.css';
import { Button } from '../../components/buttons';
import { useSchemaGraph, useSchemaSettings, useSearchResultSchema } from '../../data-access';
import { toSchemaGraphology } from '../../data-access/store/schemaSlice';
import { NodeEdge } from '../pills/edges/node-edge';
import { SelfEdge } from '../pills/edges/self-edge';
import { SchemaEntityPill } from '../pills/nodes/entity/SchemaEntityPill';
import { SchemaRelationPill } from '../pills/nodes/relation/SchemaRelationPill';
import { SchemaDialog } from './SchemaSettings';
import { ContentCopy, FitScreen, Fullscreen, KeyboardArrowDown, KeyboardArrowRight, Remove } from '@mui/icons-material';
import { AlgorithmToLayoutProvider, AllLayoutAlgorithms, LayoutFactory } from '../../graph-layout';
import { ConnectionLine, ConnectionDragLine } from '../../querybuilder';
import { schemaExpandRelation, schemaGraphology2Reactflow } from '../schema-utils';
import { Panel, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components';
import { resultSetFocus } from '../../data-access/store/interactionSlice';
import { useDispatch } from 'react-redux';

interface Props {
  content?: string;
  auth?: boolean;
  onRemove?: () => void;
}

const onInit = (reactFlowInstance: ReactFlowInstance) => {
  setTimeout(() => reactFlowInstance.fitView(), 100);
};

const nodeTypes = {
  entity: SchemaEntityPill,
  relation: SchemaRelationPill,
};
const edgeTypes = {
  nodeEdge: NodeEdge,
  selfEdge: SelfEdge,
  bezier: SmartBezierEdge,
  connection: ConnectionLine,
  straight: SmartStraightEdge,
  step: SmartStepEdge,
};

export const Schema = (props: Props) => {
  const settings = useSchemaSettings();
  const searchResults = useSearchResultSchema();
  const dispatch = useDispatch();
  const [toggleSchemaSettings, setToggleSchemaSettings] = useState(false);
  const [nodes, setNodes, onNodesChange] = useNodesState([] as Node[]);
  const [edges, setEdges, onEdgesChange] = useEdgesState([] as Edge[]);
  const [firstUserConnection, setFirstUserConnection] = useState<boolean>(true);
  const [auth, setAuth] = useState(props.auth);
  const [expanded, setExpanded] = useState<boolean>(false);

  const reactFlowInstanceRef = useRef<ReactFlowInstance | null>(null);
  const reactFlowRef = useRef<HTMLDivElement>(null);

  // In case the schema is updated
  const schemaGraph = useSchemaGraph();
  const schemaGraphology = useMemo(() => toSchemaGraphology(schemaGraph), [schemaGraph]);
  const layout = useRef<AlgorithmToLayoutProvider<AllLayoutAlgorithms>>();

  function updateLayout() {
    const layoutFactory = new LayoutFactory();
    layout.current = layoutFactory.createLayout(settings.layoutName);
  }

  const fitView = () => {
    if (reactFlowInstanceRef.current) {
      reactFlowInstanceRef.current.fitView();
    }
  };

  useEffect(() => {
    updateLayout();
    sessionStorage.setItem('firstUserConnection', firstUserConnection.toString());
  }, []);

  useEffect(() => {
    setAuth(props.auth);
  }, [props.auth]);

  async function layoutGraph() {
    if (schemaGraphology === undefined || schemaGraphology.order == 0) {
      setNodes([]);
      setEdges([]);
      return;
    }

    updateLayout();
    const expandedSchema = schemaExpandRelation(schemaGraphology);
    const bounds = reactFlowRef.current?.getBoundingClientRect();

    const xy = bounds ? { x1: 50, x2: bounds.width - 50, y1: 50, y2: bounds.height - 200 } : { x1: 0, x2: 500, y1: 0, y2: 1000 };
    await layout.current?.layout(expandedSchema, xy);
    const schemaFlow = schemaGraphology2Reactflow(expandedSchema, settings.connectionType, settings.animatedEdges);
    setNodes(schemaFlow.nodes);
    setEdges(schemaFlow.edges);
    setTimeout(() => fitView(), 100);
  }

  useEffect(() => {
    layoutGraph();
  }, [schemaGraph, settings]);

  useEffect(() => {
    setNodes((nds) =>
      nds.map((node) => ({
        ...node,
        selected: searchResults.includes(node.id) || searchResults.includes(node.data.label),
      })),
    );
  }, [searchResults]);

  return (
    <Panel
      title="Schema"
      tooltips={
        <TooltipProvider delayDuration={10}>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type="secondary"
                variant="ghost"
                size="xs"
                iconComponent={<Remove />}
                onClick={() => {
                  if (props.onRemove) props.onRemove();
                }}
              />
            </TooltipTrigger>
            <TooltipContent side={'top'}>
              <p>Hide</p>
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type="secondary"
                variant="ghost"
                size="xs"
                iconComponent={<ContentCopy />}
                onClick={() => {
                  // Copy the schema to the clipboard
                  navigator.clipboard.writeText(JSON.stringify(schemaGraph, null, 2));
                }}
              />
            </TooltipTrigger>
            <TooltipContent side={'top'}>
              <p>Copy Schema to Clipboard</p>
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button type="secondary" variant="ghost" size="xs" iconComponent={<FitScreen />} onClick={() => {}} />
            </TooltipTrigger>
            <TooltipContent side={'top'}>
              <p>Fit to screen</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      }
    >
      <div className="schema-panel w-full h-full flex flex-col justify-between" ref={reactFlowRef}>
        {nodes.length === 0 ? (
          <p className="m-3 text-xl font-bold">No Elements</p>
        ) : (
          <ReactFlowProvider>
            <ReactFlow
              snapGrid={[10, 10]}
              snapToGrid
              onlyRenderVisibleElements={false}
              nodesDraggable={true}
              nodeTypes={nodeTypes}
              edgeTypes={edgeTypes}
              connectionLineComponent={ConnectionDragLine}
              onNodesChange={onNodesChange}
              onEdgesChange={onEdgesChange}
              onMouseDownCapture={() => dispatch(resultSetFocus({ focusType: 'schema' }))}
              nodes={nodes}
              edges={edges}
              onInit={(reactFlowInstance) => {
                reactFlowInstanceRef.current = reactFlowInstance;
                onInit(reactFlowInstance);
              }}
              proOptions={{ hideAttribution: true }}
            ></ReactFlow>
          </ReactFlowProvider>
        )}
        {/* <div>
          <div
            className="w-full py-0 px-2 bg-secondary-50 cursor-pointer border-y flex items-center gap-1"
            onClick={() => setExpanded(!expanded)}
          >
            <Button
              size="xs"
              variant="ghost"
              iconComponent={expanded ? <KeyboardArrowDown /> : <KeyboardArrowRight />}
              onClick={() => setExpanded(!expanded)}
            />
            <span className="text-xs font-semibold text-secondary-600 truncate">Schema settings</span>
          </div>
          {expanded && (
            <div className="h-full w-full overflow-y-auto">
              <SchemaDialog open={toggleSchemaSettings} onClose={() => setToggleSchemaSettings(false)} />
            </div>
          )}
        </div> */}
      </div>
    </Panel>
  );
};