import * as React from "react"
import { useState, useEffect, useRef, useMemo, useCallback } from "react"
import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
import { observer } from "mobx-react-lite"
import { color, typography } from "../../theme"
import { Text } from "../"
import { flatten } from "ramda"

//import data from "../../data/miserables.json"
//import genRandomTree from "../../data/randomdata";
//import rando from "../../data/rando.json"
import rando from "../../data/randorev.json"

import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph"
import * as d3 from "d3-force"

const CONTAINER: ViewStyle = {
  justifyContent: "center",
}

const TEXT: TextStyle = {
  fontFamily: typography.primary,
  fontSize: 14,
  color: color.primary,
}

export interface GraphProps {
  /**
   * An optional style override useful for padding & margin.
   */
  style?: StyleProp<ViewStyle>
  physics
  gData
}

/**
 * Describe your component here
 */
export const Graph = observer(function Graph(props: GraphProps) {
  const { style, physics, gData } = props
  const styles = flatten([CONTAINER, style])

  const fgRef = useRef()

  const GROUPS: number = 12
  //const gData = genRandomTree(200);

  //const [charge, setCharge] = useState(-30);
  //const [link, setLink] = useState(-30);

  useEffect(() => {
    const fg = fgRef.current

    //fg.d3Force('center').strength(0.05);
    fg.d3Force("link").strength(physics.linkStrength)
    fg.d3Force("link").iterations(physics.linkIts)
    physics.collision
      ? fg.d3Force("collide", d3.forceCollide().radius(20))
      : fg.d3Force("collide", null)
    fg.d3Force("charge").strength(physics.charge)
  })

  const rootId = 0

  const nodesById = useMemo(() => {
    const nodesById = Object.fromEntries(rando.nodes.map((node) => [node.id, node]))

    // link parent/children
    rando.nodes.forEach((node) => {
      node.collapsed = node.id !== rootId
      node.childLinks = []
      node.parentLink = []
    })
    rando.links.forEach((link) => nodesById[link.source].childLinks.push(link))

    return nodesById
  }, [rando])

  const getPrunedTree = useCallback(() => {
    const visibleNodes = []
    const visibleLinks = []
    ;(function traverseTree(node = nodesById[rootId]) {
      visibleNodes.push(node)
      if (node.collapsed) return
      visibleLinks.push(...node.childLinks)
      node.childLinks
        .map((link) => (typeof link.target === "object" ? link.target : nodesById[link.target])) // get child node
        .forEach(traverseTree)
    })()

    return { nodes: visibleNodes, links: visibleLinks }
  }, [nodesById])

  const [prunedTree, setPrunedTree] = useState(getPrunedTree())

  const handleNodeClick = useCallback((node) => {
    node.collapsed = !node.collapsed // toggle collapse state
    setPrunedTree(getPrunedTree())
  }, [])

  return (
    <View>
      {!physics.threedim ? (
        <ForceGraph2D
          ref={fgRef}
          graphData={physics.collapse ? prunedTree : rando}
          // nodeAutoColorBy={d => d.id%GROUPS}
          linkAutoColorBy={(d) => rando.nodes[d.source].id % GROUPS}
          linkColor={"#ffffff"}
          linkWidth={2}
          linkDirectionalParticles={2}
          nodeColor={(node) =>
            !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
          }
          onNodeClick={handleNodeClick}
          nodeLabel={(node) => "label"}
            nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
          //d3VelocityDecay={visco}
        />
      ) : (
        <ForceGraph3D
          ref={fgRef}
          graphData={physics.collapse ? prunedTree : rando}
          // nodeAutoColorBy={d => d.id%GROUPS}
          linkAutoColorBy={(d) => rando.nodes[d.source].id % GROUPS}
          linkColor={"#ffffff"}
          linkWidth={2}
          linkDirectionalParticles={2}
          nodeColor={(node) =>
            !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
          }
          onNodeClick={handleNodeClick}
            nodeVal ={(node)=> node.childLinks.length + 1}
        linkOpacity={0.8}
          //d3VelocityDecay={visco}
        />
      )}
    </View>
  )
})