import { Group } from '@visx/group';
import type { HierarchyPointNode } from '@visx/hierarchy/lib/types';
import { gt, isNil, pluck } from 'ramda';
import type { MouseEvent as ReactMouseEvent } from 'react';
import { useState } from 'react';

import type { BaseProp, Node, TreeProps } from './models';

interface Props<TData> extends Pick<TreeProps<TData>, 'children'> {
  descendants: Array<HierarchyPointNode<Node<TData>>>;
  expandCollapseNode: (targetNode: Node<TData>) => void;
  getExpanded: (d: Node<TData>) => Array<Node<TData>> | undefined;
  nodeSize: {
    height: number;
    width: number;
  };
}

const DescendantNodes = <TData extends BaseProp>({
  descendants,
  children,
  expandCollapseNode,
  getExpanded,
  nodeSize
}: Props<TData>): Array<JSX.Element> => {
  const [pressEventTimeStamp, setPressEventTimeStamp] = useState<number | null>(
    null
  );

  const mouseDown = (e: ReactMouseEvent): void => {
    setPressEventTimeStamp(e.timeStamp);
  };

  const mouseUp =
    (callback: () => void) =>
    (e: ReactMouseEvent): void => {
      if (isNil(pressEventTimeStamp)) {
        callback();

        return;
      }

      const diffTimeStamp = e.timeStamp - pressEventTimeStamp;

      if (gt(diffTimeStamp, 120)) {
        return;
      }

      callback();
    };

  return descendants.map((node) => {
    const top = node.x;
    const left = node.y;
    const ancestorIds = node
      .ancestors()
      .map((ancestor) => ancestor.data.data.id);
    const descendantIds = node
      .descendants()
      .map((ancestor) => ancestor.data.data.id);

    const key = `${node.data.data.id}-${node.data.data.name}-${ancestorIds.toString()}-${descendantIds.toString()}`;

    return (
      <Group key={key} left={left} top={top}>
        <foreignObject
          height={nodeSize.height}
          overflow="visible"
          style={{ userSelect: 'none' }}
          width={nodeSize.width}
          x={-nodeSize.width / 2}
          y={-nodeSize.height / 2}
        >
          {children({
            ancestors: pluck('data', node.ancestors()),
            depth: node.depth,
            expandCollapseNode,
            isExpanded: !!getExpanded(node.data),
            node: node.data,
            nodeSize,
            onMouseDown: mouseDown,
            onMouseUp: mouseUp
          })}
        </foreignObject>
      </Group>
    );
  });
};

export default DescendantNodes;