import type { FC } from 'react'
import {
  memo,
  useMemo,
  useRef,
} from 'react'
import type { NodeProps } from 'reactflow'
import { useTranslation } from 'react-i18next'
import NodeGroupItem from './components/node-group-item'
import type { VariableAssignerNodeType } from './types'

const i18nPrefix = 'workflow.nodes.variableAssigner'

const Node: FC<NodeProps<VariableAssignerNodeType>> = (props) => {
  const { t } = useTranslation()
  const ref = useRef<HTMLDivElement>(null)
  const { id, data } = props
  const { advanced_settings } = data

  const groups = useMemo(() => {
    if (!advanced_settings?.group_enabled) {
      return [{
        groupEnabled: false,
        targetHandleId: 'target',
        title: t(`${i18nPrefix}.title`),
        type: data.output_type,
        variables: data.variables,
        variableAssignerNodeId: id,
        variableAssignerNodeData: data,
      }]
    }
    return advanced_settings.groups.map((group) => {
      return {
        groupEnabled: true,
        targetHandleId: group.groupId,
        title: group.group_name,
        type: group.output_type,
        variables: group.variables,
        variableAssignerNodeId: id,
        variableAssignerNodeData: data,
      }
    })
  }, [t, advanced_settings, data, id])

  return (
    <div className='relative mb-1 px-1 space-y-0.5' ref={ref}>
      {
        groups.map((item) => {
          return (
            <NodeGroupItem
              key={item.title}
              item={item}
            />
          )
        })
      }
    </div >
  )
}

export default memo(Node)