import type {NodeProps} from '@xyflow/react'
import {Tag} from 'antd'
import React, {useCallback, useMemo} from 'react'
import {useDataStore} from '../store/DataStore.ts'
import {useFlowStore} from '../store/FlowStore.ts'
import AmisNode, {inputsFormColumns, nodeClassName, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
import type {FormSchema} from '../types.ts'

const languageMap: Record<string, string> = {
  'javascript': 'Javascript',
  'python': 'Python',
  'Lua': 'lua',
}

const CodeNode = (props: NodeProps) => {
  const {getNodes, getEdges} = useFlowStore()
  const {getData, getDataById} = useDataStore()

  const nodeData = getDataById(props.id)

  const formSchema: () => FormSchema = useCallback(() => ({
    columns: [
      ...inputsFormColumns(props.id, getNodes(), getEdges(), getData()),
      {
        type: 'divider',
      },
      {
        type: 'select',
        name: 'type',
        label: '代码类型',
        required: true,
        selectFirst: true,
        options: Object.keys(languageMap).map(key => ({label: languageMap[key], value: key})),
      },
      {
        type: 'editor',
        required: true,
        label: '代码内容',
        name: 'content',
        language: '${type}',
        options: {
          wordWrap: 'bounded',
        },
      },
      {
        type: 'divider',
      },
      ...outputsFormColumns(true, false),
    ]
  }), [props.id])

  const extraNodeDescription = useMemo(() => {
    return nodeData?.type
      ? <div className="mt-2 flex justify-between">
        <span>代码类型</span>
        <Tag className="m-0" color="blue">{languageMap[nodeData.type]}</Tag>
      </div>
      : <></>
  }, [nodeData])

  return (
    <AmisNode
      className={nodeClassName('code')}
      nodeProps={props}
      extraNodeDescription={extraNodeDescription}
      formSchema={formSchema}
      handler={<NormalNodeHandler/>}
    />
  )
}

export default React.memo(CodeNode)