import { Button } from 'antd'
import React, { useState } from 'react'
import { processNodeList } from '../type'
import './index.scss'

interface FlowResultBodyProps {
  node: processNodeList[]
  handledBy: (val: processNodeList) => React.JSX.Element
}

const FlowResultBody: React.FC<FlowResultBodyProps> = ({ node, handledBy }) => {
  const [open, setOpen] = useState(node.length > 10)
  const [length, setLength] = useState(10)

  return <>
    {
      node.map((item, key) => {
        if (key >= length && open && key + 1 == node.length) {
          return <div style={{ paddingLeft: '10px', display: 'flex', justifyContent: 'space-between' }}>
            <Button type="link" onClick={() => { setOpen(false) }}>
              展示剩余{node.length - length}人
            </Button>
            {(key - length > 10) && <Button type="link" onClick={() => { setLength(length + 10) }}>
              展示下十条
            </Button>
            }
          </div>
        }
        if (key >= length && open) {
          return
        }

        return <div className={`${key + 1 == length ? 'process-last-child' : ''} process`} key={key}>
          {handledBy(item)}
          <div className={`titlecontent_line ${item.nodeStatus === 'doing' || item.nodeStatus === 'waiting' ? 'before_doing' : ''}`}></div>
        </div>
      })
    }
  </>

}

export default FlowResultBody