import React, { useRef } from 'react'
import { SchemaNode } from '../../../../../types';
import { Icon } from '../../../../../components/icons';
import { isMobile } from '../../../../../utils/helper';
import { FlowDetail } from '../../type';
import { RendererEnv } from '../../../../../env';
import FlowInformation from '../FlowInformation';
import './index.scss'
import { ImageThumbProps } from '../../../../Image';
import { currentaudit } from '../utils/utils';

interface Flowprocess {
  render: (region: string, node: SchemaNode, props?: any) => JSX.Element
  flowDetail: FlowDetail
  handleHeight?: (e: number) => void
  opens?: boolean
  env?: RendererEnv
  onImageEnlarge?: (
    info: Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'> & {
      index?: number;
      list?: Array<
        Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'>
      >;
    }
  ) => void;
}

const FlowProcess: React.FC<Flowprocess> = (props) => {
  const { render, flowDetail, env, onImageEnlarge } = props
  const Mobile: boolean = isMobile()
  const processdom = useRef<HTMLDivElement>(null)
  return (
    <>
      <div className={'detailed_information'} ref={processdom}>
        {/*头部 */}
        {Mobile && <>
          <div className='detailed_title'>
            {/* 左 */}
            <div className='detailed_title_left'>
              {/* 头像 */}
              <div className='detailed_title_img_text'>
                <span className='detailed_title_img'>
                  <Icon icon='camera' className="icon"></Icon>
                </span>
                {/* 标题 */}
                <span className='detailed_title_text'>
                  {flowDetail.flowProcess.processDefinitionName}
                </span>
              </div>
              {/* icon */}
              {currentaudit(flowDetail.flowProcess.processStatus, '', true)}
            </div>
            {/* 右 */}
            <div className='detailed_title_right'>
              <span className='right-icon'>
                <Icon icon={"query"} className="icon" />
              </span>
            </div>
          </div>
          <div className='characteristic'>
            审批编号:{flowDetail?.processInstanceId}
          </div>
        </>
        }
        {
          flowDetail.formUI &&
          <div className={`renderform ${!Mobile ? "detailed_border" : ""}`}>
            {currentaudit(flowDetail.flowProcess.processStatus, 'doneItem', false)}
            {render('body', flowDetail.formUI, { className: 'renderform_form' })}
          </div>
        }
        <FlowInformation
          key={flowDetail.processInstanceId}
          flowDetail={flowDetail}
          processNode={flowDetail.processNodeList}
          env={env}
          onImageEnlarge={onImageEnlarge}
        />
      </div>
    </>
  )
}

export default FlowProcess