import React, { ReactElement, useImperativeHandle, useState, useEffect } from 'react'
import { Button, Checkbox, Drawer, Form, List, message, Select, Upload } from 'antd'
import { RendererEnv } from '../../../../../env'
import { Api, SchemaNode } from '../../../../../types'
import { isMobile } from '../../../../../utils/helper'
import { UploadFile, UploadProps } from 'antd/lib/upload/interface'
import { Icon } from '../../../../../components/icons'
import ImageComponent, { ImageThumbProps } from '../../../../Image'
import { CheckOutlined } from '@ant-design/icons'
import { AttachmentApi, FlieText, FlowDetail } from '../../type'
import { byteSize } from '../../../utils/utils'
import TextArea from 'antd/lib/input/TextArea'
import SparkMD5 from 'spark-md5'
import './index.scss'

interface Flowmodalko {
  env: RendererEnv
  render: (region: string, node: SchemaNode, props?: any) => JSX.Element
  onRef: React.RefObject<any>
  flowDetail: FlowDetail
  taskId: string
  onImageEnlarge?: (
    info: Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'> & {
      index?: number;
      list?: Array<
        Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'>
      >;
    }
  ) => void;
  returnNodeApi?: Api
  handleOnClick: () => void
  attachmentApi: AttachmentApi
  name: string
}


const FlowModalReturn: React.FC<Flowmodalko> = (props) => {
  const {
    env,
    flowDetail,
    taskId,
    onImageEnlarge,
    returnNodeApi,
    handleOnClick,
    name,
    attachmentApi
  } = props
  const { attachmentUploadApi, attachmentDeleteApi } = attachmentApi
  const [textArea, setTextArea] = useState<string>('')
  const [showfilelist, setShowfilelist] = useState<FlieText[]>([])
  const [showfileimg, setShowfileimg] = useState<FlieText[]>([])
  const [showfile, setShowfile] = useState<FlieText[]>([])
  const [visible, setVisible] = useState(false)
  const [option, setOption] = useState<{ id: string, name: string }[]>([])
  const [receivers, setReceivers] = useState<{ id: string, name: string }>()
  const [temporary, setTemporary] = useState<{ id: string, name: string }>()
  const { Option } = Select;
  const [form] = Form.useForm();
  const Mobile: boolean = isMobile()
  const baseUrl = env?.axiosInstance?.defaults?.baseURL || env?.ajaxApi || ''
  const params = {
    processInstanceId: flowDetail.processInstanceId,
    taskId,
  }

  const tabsok = ['同意', '确认', 'OK', '情况属实', '已审核', '好的', '通过', '已核实']
  const tabsno = ['拒绝', '不同意', '取消', '作废', '重复提交', '未解决 ', '请核实', '请补充材料']

  useEffect(() => {
    handleInitiate()
    // handleCleanUp()
  }, [])

  useImperativeHandle(props.onRef, () => {
    return {
      handleOk: onChangeTextArea
    }
  })

  const handleInitiate = async () => {
    if (!returnNodeApi) return
    const response = await env.fetcher(returnNodeApi, { taskId })
    if (response.status == 0) {
      setOption(response.data)
      setReceivers(response.data[0])
      setTemporary(response.data[0])
    }
  }

  const filetext = (fileName: string) => {
    if (/(.pdf)/i.test(fileName)) {
      return <Icon icon={'file-pdf'} className="icon"></Icon>
    } else if (/(.ppd)/i.test(fileName)) {
      return <Icon icon={'file-ppd'} className="icon"></Icon>
    } else if (/(.jpe?)g|(.png)|(.svg)|(.gif)/i.test(fileName)) {
      return <Icon icon={'file-img'} className="icon"></Icon>
    } else if (/(.xlsx)|(.xls)/i.test(fileName)) {
      return <Icon icon={'file-xls'} className="icon"></Icon>
    } else if (/(.docx)|(.doc)/i.test(fileName)) {
      return <Icon icon={'file-doc'} className="icon"></Icon>
    } else {
      return <Icon icon={'file-file'} className="icon"></Icon>
    }
  }

  const onChangeTextArea = async () => {
    const values = await form.validateFields().catch(() => { })
    const attachmentIds = showfile.map(item => item.attachmentId).join(';');
    if (values.returnTargetKey) {
      return { ...values, attachmentIds, comments: textArea }
    } else if (Mobile && receivers) {
      return { ...values, returnTargetKey: receivers.id, attachmentIds, comments: textArea }
    } else if (name != null && name !== 'flow_return') {
      return { ...values, attachmentIds, comments: textArea }
    }

  }

  const getFileMD5 = (info: any) => {
    const fileMD5 = new SparkMD5.ArrayBuffer();
    fileMD5.append(info)
    return fileMD5.end()
  }

  const uploadFileWithParams = async (uploadUrl: Api, params: { [key: string]: string }, file: File): Promise<any> => {
    const fileMD5 = getFileMD5(file)
    const formData = new FormData();
    formData.append('file', file);
    formData.append('upload_cmd', 'check_exist')
    formData.append('upload_field', file.name)
    formData.append('file_name', file.name)
    formData.append('file_md5', fileMD5)

    Object.entries(params).forEach(([key, value]) => {
      formData.append(key, value);
    });
    const appId = sessionStorage.getItem('appId')
    const response = await env.fetcher(uploadUrl, formData, {
      headers: appId ? { app_id: appId } : {}
    });
    if (response.status == 0) {
      message.success('上传成功');
      const data = response.data
      if (file.type.includes('image/')) {
        setShowfileimg(show => [...show, { ...data, size: file.size }])
      } else {
        setShowfilelist(show => [...show, { ...data, size: file.size }])
      }
      setShowfile(show => [...show, { ...data, size: file.size }])
    } else {
      message.error({ content: '文件上传失败', position: 'bottom' })
    }

    return response;
  }

  const beforeUpload = (file: File): boolean => {
    if (file.size > (10 * 1024 * 1024)) {
      message.error({ content: '文件大小不能超过10M', position: 'bottom' })
      return false
    }
    if (showfile.some(showfile => showfile.name === file.name)) {
      message.error({ content: '已上传过相同的文件', position: 'bottom' })
      return false
    }
    uploadFileWithParams(attachmentUploadApi,
      { ...params }, file).catch((error) => { });
    return false; // 返回 false 可以阻止默认的上传行为
  }

  const upload: UploadProps = {
    multiple: true,
    iconRender: (file) => <Icon icon="docx" className="icon" />,
    beforeUpload,
    isImageUrl: (file) => {
      return true
    },
    itemRender: (originNode: ReactElement, file: UploadFile, fileList: object[], actions: { download: any, preview: any, remove: any }) => {
      return <></>
    }
  };

  const previewImage = (file: FlieText) => {
    if (onImageEnlarge) {
      onImageEnlarge({
        // 预览地址
        src: file.thumbnailAddr as string,
        originalSrc: file.thumbnailAddr as string,
        list: showfileimg.map(file => ({
          src: file.thumbnailAddr as string,
          originalSrc: file.thumbnailAddr as string,
          title: file.name
        }))
      });
    }
  }

  const removeFile = (file: any, type: string) => {
    if (type == "img")
      setShowfileimg(showfileimg.filter(item => item.name !== file.name))
    else
      setShowfilelist(showfilelist.filter(item => item.name !== file.name))
    removeAxios(file, file.attachmentId)
    setShowfile(showfile.filter(item => item.name !== file.name))
  }

  const removeAxios = async (data: any, attachmentId: string) => {
    const res = await env.fetcher(attachmentDeleteApi,
      { attachmentId })
    if (res.status == 0) {
      return true
    }
    return false
  }

  return (
    <>
      <div className={`fallback_constent ${Mobile ? 'fallback_constent_Mobile' : ''}`} >
        <Form form={form}>
          {name == 'flow_return' && (!Mobile ? <div className='fallback_select'>
            <h4>退回到 <span style={{ color: "red" }}> * </span></h4>
            <Form.Item
              name="returnTargetKey"
              rules={[{ required: true, message: '请选择' }]}
            >
              <Select placeholder="请选择" >
                {option.map((item) =>
                  <Option value={item.id}>{item.name}</Option>
                )}
              </Select>
            </Form.Item>
          </div>
            :
            <div className='fallback_select'>
              <label>退回到<span style={{ color: "red" }}> * </span></label>
              <Select
                placeholder="请选择"
                className='fallback_select_text'
                bordered={false}
                labelInValue={true}
                filterOption={false}
                notFoundContent={null}
                value={receivers?.name}
                onDropdownVisibleChange={() => { setVisible(true) }}
              >
              </Select>
            </div>)
          }
          <div className='endorsement-approval'>
            <div className='countersigner_form'>
              <TextArea
                style={{ height: 170, resize: 'none', backgroundColor: '#fff' }}
                placeholder="请输入"
                value={textArea}
                onChange={(e) => {
                  setTextArea(e.target.value)
                }}
                bordered={!Mobile}
              />
              {name !== 'flow_return' &&
                <div className='endorsement-approval_text'>
                  <div className='recommend'>
                    推荐回复
                  </div>
                  <div className='recommend_value'>
                    {
                      (name == 'flow_refuse' ? tabsno : tabsok).map((item) => {
                        return <span className='Tag_value' onClick={() => { setTextArea((textArea) => textArea + item) }
                        }>{item}</span>
                      })
                    }
                  </div>
                </div>
              }
            </div>
          </div>
          <div className='fallback_upload'>
            <Upload
              {...upload}
              name='image'
              className={'upload_content'}
              accept='image/*'
              // beforeUpload={beforeUpload}
              listType="picture"
            >
              <Button size='middle' className='upload_content_btn'
                style={{ marginRight: '5px' }} >
                <span style={{ marginRight: '5px' }} >
                  <Icon icon="export-picture-icon" className="icon"></Icon>
                </span>
                <span>图片</span>
              </Button>
            </Upload>

            <Upload
              {...upload}
              className={'upload_content text'}
              name='file'
              accept='file/*'
              listType="picture"
            >
              <Button size='middle' className='upload_content_btn'>
                <span style={{ marginRight: '5px' }}>
                  <Icon icon="file" className="icon"></Icon>
                </span>
                <span>文件</span>
              </Button>
            </Upload>

          </div>
          <div className='fallback_checkbox'>
            <Form.Item name="remember" valuePropName="checked" >
              <Checkbox>审批意见通过消息转发给</Checkbox>
            </Form.Item>
          </div>
          {showfileimg.length > 0 && <div className='uploadimg'>
            {showfileimg.map((item: any, index: number) => {
              return <div className='pieceimg'>
                {Mobile &&
                  <div className='remove' >
                    <a className='remove_blank'
                      data-tooltip={"删除"}
                      data-position="bottom"
                      target="_blank"
                      rel="noopener"
                      onClick={() => removeFile(item, 'img')}
                    > <Icon icon="fail" className="icon" />
                    </a>
                  </div>
                }
                <ImageComponent
                  className='pieceimg_img'
                  key={index}
                  src={baseUrl + item.thumbnailAddr}
                  originalSrc={item.addr}
                  alt={item.name || item.preview_name}
                  thumbRatio={'1:1'}
                  imageClassName={'icon-fill'}
                  overlays={
                    <>
                      <a
                        data-tooltip={"查看大图"}
                        data-position="bottom"
                        target="_blank"
                        rel="noopener"
                        onClick={() => previewImage(item)}
                      >
                        <Icon icon="view" className="icon" />
                      </a>
                      {!Mobile &&
                        <a
                          data-tooltip={"删除"}
                          data-position="bottom"
                          target="_blank"
                          rel="noopener"
                          onClick={() => removeFile(item, 'img')}
                        >
                          <Icon icon="close" className="icon" />
                        </a>}
                    </>
                  }
                />
              </div>
            }
            )}
          </div>}
          {showfilelist.length > 0 && <div className='uploadtext'>
            {/* 每个文件 */}
            {
              showfilelist.map(item => {
                return <div className='textfile_xls'>
                  {/* 左边icon和名字 */}
                  <div className='textfile_text'>
                    <span className='textfile_icon'>
                      {filetext(item.name)}
                    </span>
                    <span className='text'>
                      {item.name}
                    </span>
                  </div>
                  <div className='textfile_size'>
                    <span className='item-select-tag-size'>{byteSize(item.size)}</span>
                    {/* 删除按钮 */}
                    <span className='item-select-tag-btn' title='删除' onClick={() => removeFile(item, 'text')}>
                      <Icon icon="fail" className="icon" />
                    </span>
                  </div>
                </div>
              })
            }
          </div>}
        </Form>

        {
          Mobile && <div className='endorsement_button'>
            <Button type="primary" block onClick={handleOnClick} className="Button_Mobile">
              {/* 退回  确定  拒绝 */}
              {name == 'flow_return' ? '退回' : name == 'flow_agree' ? '确定' : '拒绝'}
            </Button>
          </div>
        }
      </div >

      {< Drawer
        className='process_drawer'
        closeIcon={
          < span className="left-text" >
            <Icon icon='left-arrow-light' className="icon" />
          </span >
        }
        title={< div style={{ paddingLeft: '26px' }}>
          退回到
        </div >}
        onClose={() => { setVisible(false), setTemporary(receivers) }}
        width={"100%"}
        visible={visible}
        getContainer={env.getModalContainer}
        mask={false}
        destroyOnClose={true}
        style={{ transform: 'translateX(0px)' }}
        extra={
          < span className="right-text" style={{ width: '50px' }}>
            <Button type="primary" size="small"
              block
              onClick={() => { setReceivers(temporary), setVisible(false) }}
            >
              确定
            </Button>
          </span >
        }
      >
        <List
          size="small"
          dataSource={option}
          bordered={false}
          renderItem={item =>
            <List.Item onClick={() => { setTemporary(item) }}>
              <div style={{ width: "95%", overflow: 'hidden' }}>
                {item.name}
              </div>
              <div style={{ width: "5%" }}>
                {temporary && (temporary.name == item.name && <CheckOutlined style={{ color: '#40a9ff' }} />)}
              </div>
            </List.Item>}
        />
      </Drawer >}
    </>
  )
}

export default FlowModalReturn