import { FC, HTMLProps } from 'react'
import { EnrichedEntity } from '../../../src/types'
import cx from 'classnames'
import styles from './NodeOverview.module.css'
import Link from 'next/link'
import { EntityIcon } from '../../home/EntityIcon/EntityIcon'
import { GraphNode } from '../../../src/graph-untangle/types'
import { fixedEncodeURIComponent } from '../../../src/utils'
import { useRouter } from 'next/router'

export type OverviewGraphNode = GraphNode<{
  icons: (EnrichedEntity | string)[]
}>

interface Props extends HTMLProps<HTMLDivElement> {
  node: OverviewGraphNode
}

export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
  const router = useRouter()
  return (
    <div {...props} className={cx(className, styles.root)}>
      <h3>
        <span className={styles.linkOut}>
          <Link
            href={{
              pathname: `/visualize/${fixedEncodeURIComponent(node.name)}`,
              query: router.query
            }}
          >
            👁
          </Link>
        </span>
        {node.name}
      </h3>
      {node.icons?.length ? (
        <div className={styles.tiny}>
          {node.icons.map(input => (
            <EntityIcon key={typeof input === 'string' ? input : input.href} value={input} />
          ))}
        </div>
      ) : null}
      <h4>Inputs</h4>
      <div className={styles.small}>
        {node.inputs.map(input => (
          <EntityIcon key={input} value={input} />
        ))}
      </div>
      {node.outputs.length ? (
        <>
          <h4>Outputs</h4>
          <div className={styles.small}>
            {node.outputs.map(input => (
              <EntityIcon key={input} value={input} />
            ))}
          </div>
        </>
      ) : null}
    </div>
  )
}