import React, { useEffect, useMemo, useRef, useState } from 'react'
import { FlowDetail } from '../type';
import './index.scss'
import { handleHeader, handleTltle } from '../utils';
import FlowInformation from '../FlowInformation';
import { SchemaNode } from '../../../types';
import { RendererEnv } from '../../../env';
import { ImageThumbProps } from '../../../renderers/Image';
import { isMobile } from '../../../utils/helper';
import { tools } from '../../../utils/shell/tools';
import { Drawer } from '../../antdCompoentsProxy';
import ScrollMb from '../../ScrollMB';


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;
  language: (data: string) => string
  visibleOpen: boolean
  handleVisible: (body: boolean) => void
  getFilterForm: (form: any) => void
}

const FlowProcess: React.FC<Flowprocess> = (props) => {
  const { render, flowDetail, language, env, onImageEnlarge, visibleOpen, handleVisible, getFilterForm } = props
  const Mobile: boolean = isMobile();
  const form = useRef<any>();
  const [formState, setFormState] = useState<any>()
  const replacedString = flowDetail?.flowDesc?.replace(/\r\n/g, '<br>');

  useEffect(() => {
    getFilterForm(form.current)
  }, [form.current])

  const warpNode = useMemo(() => {
    if (flowDetail) {
      return <>
        {/*头部 */}
        {Mobile && <>
          {env && handleTltle(flowDetail, env, () => { handleVisible(true) })}
        </>
        }
        {tools.isPc && <div className='flow-title'>申请详情</div>}
        {
          flowDetail.formUI &&
          <div id={"body" + flowDetail.flowProcess.approvalNo + flowDetail.flowProcess.processInstanceId} className={`renderform ${!Mobile ? "detailed_border" : ""}`}>
            {render(`${flowDetail.processInstanceId}`, flowDetail.formUI, {
              className: 'renderform_form',
              flowProcess: true,
              notPrintFieldList: flowDetail.notPrintFieldList,
              getFilterForm: async (data: any) => {
                const body = await data
                if ((flowDetail.formUI as any)?.name == body._formName) {
                  form.current = body
                  setFormState(body)
                }
              }
            })}
          </div>
        }
        {tools.isPc && <div className='flow-title'>审批详情</div>}
        <FlowInformation
          flowDetail={flowDetail}
          processNode={flowDetail.processNodeList}
          env={env}
          render={render}
          onImageEnlarge={onImageEnlarge}
          language={language}
        />
      </>
    }
    return null
  }, [flowDetail])

  return (
    <>
      <div className={'detailed_information'} >
        {
          isMobile() && formState?.props?.initApi && formState?.props?.isDetail ?
            <ScrollMb
              scrollConfig={{ pullDownRefresh: true, }}
              onPullingDown={async () => {
                form.current?.pullDown?.();
              }}
            >
              {warpNode}
            </ScrollMb>
            :
            warpNode
        }

        {< Drawer
          className='process_drawer'
          width={"100%"}
          visible={visibleOpen}
          getContainer={env?.getModalContainer}
          mask={false}
          zIndex={1010}
          destroyOnClose={false}
          style={{ transform: 'translateX(0px)' }}
          closable={false}
          bodyStyle={{ backgroundColor: '#fff', lineHeight: '28px' }}
        >
          {handleHeader(() => handleVisible(false), tools.isComWx ? '' : language('Flow.formdata'))}
          <div style={{ overflow: 'auto', flex: '1', padding: '10px' }}>
            <div dangerouslySetInnerHTML={{
              __html: replacedString || ''
            }}>
            </div>
          </div>
        </Drawer >}
      </div>
    </>
  )
}

export default FlowProcess