<script setup lang="ts">
import {
  notesRelations,
  getNoteById,
  activeNote,
  setActiveNote,
  rootNote
} from '@/composables/useNotes'
import cytoscape from 'cytoscape'
import shortid from 'shortid'

const renderMindmap = () => {
  const mindmapCanvas = mindmapElement.value
  if (!mindmapCanvas) return
  const style = {
    contextedBlue: '#1e4bc4',
    nodeBackground: '#6c757d',
    edge: '#ced4da'
  }

  const boundingBox = {
    x1: 0,
    y1: 0,
    w: mindmapCanvas.clientWidth,
    h: mindmapCanvas.clientHeight
  }
  const elements = {
    nodes: nodes.value,
    edges: [
      ...links.value.map((link) => ({ data: { id: `${link.source}-${link.target}`, ...link } }))
    ]
  }
  const cy = cytoscape({
    container: mindmapCanvas,
    elements,
    layout: {
      name: 'cose',

      // Called on `layoutready`
      ready: function () {},

      // Called on `layoutstop`
      stop: function () {},

      // Whether to animate while running the layout
      // true : Animate continuously as the layout is running
      // false : Just show the end result
      // 'end' : Animate with the end result, from the initial positions to the end positions
      animate: false,

      // Easing of the animation for animate:'end'
      animationEasing: undefined,

      // The duration of the animation for animate:'end'
      animationDuration: undefined,

      // A function that determines whether the node should be animated
      // All nodes animated by default on animate enabled
      // Non-animated nodes are positioned immediately when the layout starts
      // animateFilter: function (node, i) {
      animateFilter: function () {
        return true
      },

      // The layout animates only after this many milliseconds for animate:true
      // (prevents flashing on fast runs)
      animationThreshold: 250,

      // Number of iterations between consecutive screen positions update
      refresh: 20,

      // Whether to fit the network view after when done
      fit: true,

      // Padding on fit
      padding: 30,

      // Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
      // boundingBox: undefined,
      boundingBox,

      // Excludes the label when calculating node bounding boxes for the layout algorithm
      nodeDimensionsIncludeLabels: false,

      // Randomize the initial positions of the nodes (true) or use existing positions (false)
      randomize: false,

      // Extra spacing between components in non-compound graphs
      componentSpacing: 40,

      // Node repulsion (non overlapping) multiplier
      // nodeRepulsion: function (node) {
      nodeRepulsion: function () {
        return 2048
      },

      // Node repulsion (overlapping) multiplier
      nodeOverlap: 4,

      // Ideal edge (non nested) length
      // idealEdgeLength: function (edge) {
      idealEdgeLength: function () {
        return 32
      },

      // Divisor to compute edge forces
      // edgeElasticity: function (edge) {
      edgeElasticity: function () {
        return 32
      },

      // Nesting factor (multiplier) to compute ideal edge length for nested edges
      nestingFactor: 1.2,

      // Gravity force (constant)
      gravity: 1,

      // Maximum number of iterations to perform
      numIter: 1000,

      // Initial temperature (maximum node displacement)
      initialTemp: 1000,

      // Cooling factor (how the temperature is reduced between consecutive iterations
      coolingFactor: 0.99,

      // Lower temperature threshold (below this point the layout will end)
      minTemp: 1.0
    },
    // userZoomingEnabled: false,
    userPanningEnabled: false,
    pixelRatio: window.devicePixelRatio ? window.devicePixelRatio * 1.5 : 'auto',
    style: [
      // the stylesheet for the graph
      {
        selector: 'node',
        style: {
          'background-color': style.nodeBackground,
          label: 'data(title)',
          'font-family': 'Source Sans Pro, sans-serif',
          'font-weight': 400,
          'font-size': '1.5em',
          'text-events': 'yes'
        }
      },
      {
        selector: '.current',
        style: {
          'background-color': style.contextedBlue
        }
      },
      {
        selector: '.mouseover',
        style: {
          'background-color': style.contextedBlue,
          color: style.contextedBlue
        }
      },
      {
        selector: 'edge',
        style: {
          width: 3,
          'line-color': style.edge,
          'target-arrow-color': style.edge,
          'target-arrow-shape': 'triangle',
          'curve-style': 'bezier'
        }
      }
    ]
  })
  cy.nodes().forEach((node) => {
    if (node.data('id') === activeNote.value?.id) node.addClass('current')
  })
  cy.nodes().on('tap', (event) => {
    setActiveNote(event.target.data('id'))
  })
  cy.on('mouseover', 'node', (event) => {
    event.target.addClass('mouseover')
    mindmapCanvas.classList.add('mouseover')
  })
  cy.on('mouseout', 'node', (event) => {
    event.target.removeClass('mouseover')
    mindmapCanvas.classList.remove('mouseover')
  })
}

const mindmapElement = ref<HTMLInputElement | null>(null)

interface Mindmap {
  id: string
  notes: string[]
  isRoot: boolean
}
const selectedMindmap = ref<Mindmap>()
const mindmaps = computed<Mindmap[]>(() => {
  const mindmaps = Object.entries(notesRelations.value).reduce((mindmaps, [noteId, relations]) => {
    const atomicMindmap = [noteId, ...relations.to, ...relations.from]
    const indices = mindmaps
      .filter(
        (mindmap) => [...mindmap].filter((noteId) => atomicMindmap.includes(noteId)).length > 0
      )
      .map((mindmap) => mindmaps.indexOf(mindmap))
    if (indices.length > 0) {
      const index = indices[0]
      const currentMindmap = indices.reduce(
        (mindmap, index) => mindmap.concat(mindmaps[index]),
        [] as string[]
      )
      indices.forEach((index, i) => {
        if (i !== 0) mindmaps.splice(index, 1)
      })
      mindmaps[index] = [...currentMindmap, ...atomicMindmap].filter(
        (item, index, arr) => arr.indexOf(item) === index
      )
    } else {
      mindmaps.push(atomicMindmap)
    }
    return mindmaps
  }, [] as string[][])
  return mindmaps
    .filter((mindmap) => mindmap.length > 1)
    .sort((a, b) => {
      return a.includes(rootNote.value?.id || '') ? b.length - a.length : 1
    })
    .slice(0, 5)
    .map((mindmap): Mindmap => {
      const isRoot = mindmap.includes(rootNote.value?.id || '')
      return { id: shortid.generate(), notes: mindmap, isRoot }
    })
})
watch(
  mindmaps,
  () => {
    if (!selectedMindmap.value) selectedMindmap.value = mindmaps.value[0]
  },
  { immediate: true }
)
watch(selectedMindmap, () => setTimeout(() => renderMindmap(), 0), { immediate: true })

const nodes = computed(() => {
  return (
    Object.entries(notesRelations.value)
      // .filter(([, relations]) => relations.to.length > 0)
      .filter(([noteId]) => selectedMindmap.value?.notes.includes(noteId))
      .map(([noteId]) => {
        return {
          data: {
            id: noteId,
            title: getNoteById(noteId)?.title
          }
        }
      })
  )
})

const links = computed(() => {
  return Object.entries(notesRelations.value)
    .filter(([noteId]) => selectedMindmap.value?.notes.includes(noteId))
    .filter(([, relations]) => relations.to.length > 0)
    .map(([noteId, relations]) => {
      return relations.to.map((to) => ({
        source: noteId,
        target: to
      }))
    })
    .reduce((arr, elem) => arr.concat(elem), [])
})
</script>
<template>
  <div class="flex h-full flex-grow flex-col">
    <div class="tabs">
      <a
        class="tab-bordered tab-lifted tab tab-md"
        :class="mindmap.id === selectedMindmap?.id && 'tab-active !border-primary text-primary'"
        v-for="mindmap in mindmaps"
        :key="mindmap.id"
        @click="selectedMindmap = mindmap"
      >
        <i class="fas fa-fw fa-home root mr-1" v-if="mindmap.isRoot" />
        {{ mindmap.notes.length }} notes
      </a>
    </div>
    <div id="mindmap" ref="mindmapElement" class="h-full"></div>
  </div>
</template>
<style scoped>
.mouseover {
  @apply hover:cursor-pointer;
}
</style>
