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'
import { GraphIcon } from '../../icons/GraphIcon'
import { I18n } from '../../shared/I18n/I18n'

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

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

export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
  const { query } = useRouter()
  return (
    <div {...props} className={cx(className, styles.root)}>
      <h3>
        <span className={styles.linkOut}>
          <Link
            href={{
              pathname: `/visualize/${fixedEncodeURIComponent(node.name)}`,
              query
            }}
          >
            <GraphIcon />
          </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>
        <I18n id={'page.visualize.overview.imports'} />
      </h4>
      <div className={styles.small}>
        {node.inputs.map(input => (
          <EntityIcon key={input} value={input} />
        ))}
      </div>
      {node.outputs.length ? (
        <>
          <h4>
            <I18n id={'page.visualize.overview.exports'} />
          </h4>
          <div className={styles.small}>
            {node.outputs.map(input => (
              <EntityIcon key={input} value={input} />
            ))}
          </div>
        </>
      ) : null}
    </div>
  )
}