import { Button, message } from "antd"
import React from "react"
import { RendererEnv } from "../../env"
import { makeTranslator } from "../../locale"
import { copy } from "../../renderers/Lion/utils/utils"
import { isMobile } from "../../utils/helper"
import { Icon } from "../icons"
import { FlowDetail } from "./type"


const Mobile: boolean = isMobile()
const __ = makeTranslator()
const currentaudit = (value: string, title = '', titletype = false) => {
  if (title !== 'doneItem' || titletype) {
    switch (value) {
      case "doing":
        // 待审批
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          {'签核中'}
        </span>
      case "refuse":
        // 已拒绝
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          {'已拒绝'}
        </span>
      case "pass":
        // 已通过
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          {'已通过'}
        </span>
      case "revert":
        // 已撤回
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          {'已撤回'}
        </span>
      case "return":
        // 已退回
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          {'已退回'}
        </span>
      default:
        // 未定义
        return <span >
          {value}
        </span>
    }
  } else {
    switch (value) {
      case "refuse":
        // 已拒绝
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          <Icon icon={"rejected-icon"} className="icon" />
        </span>
      case "pass":
        // 已通过
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          <Icon icon={"passed-icon"} className="icon" />
        </span>
      case "revert":
        // 已撤回
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          <Icon icon={"refuse-icon"} className="icon" />
        </span>
      case "return":
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          <Icon icon={"return-icon"} className="icon" />
        </span>
      default:
        // 未定义
        return <span >
          {value}
        </span>
    }
  }
}
// 抽屉头部
const handleTltle = (flowDetail: FlowDetail, env: RendererEnv, Visible?: () => void) => {
  return <>
    <div className={`detailed_title ${!Mobile ? "detailed_border detailed_Mobile" : ""}`}>
      {/* 左 */}
      <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 && flowDetail.flowProcess.processDefinitionName}
          </span>
        </div>
        {/* icon */}
        {flowDetail && currentaudit(flowDetail.flowProcess.processStatus)}
      </div>
      {/* 右 */}
      <div className='detailed_title_right'>
        {Mobile && <span className='right-icon' onClick={() => { Visible?.() }}>
          <Icon icon={"query"} className="icon" />
        </span>}
      </div>
    </div>
    <div className='characteristic'>
      {__('Flow.approval.id') + ":" + flowDetail?.flowProcess.approvalNo}
      <Button type="text"
        icon={<Icon icon={"copy"} className="icon" />}
        size='small'
        className="characteristic_but"
        onClick={() => {
          copy(flowDetail?.flowProcess.approvalNo).then(() => {
            message.success(__('System.copy'))
          })
        }}
      />
    </div>

  </>
}
const handleHeader = (Opened: () => void, body: JSX.Element | string | undefined, RightElement?: JSX.Element) => {
  return (
    <div className={`flow-drawer-header ${!Mobile ? 'flow-drawer-header-mobile' : ''}`}>
      {Mobile && <div className='left-text' onClick={Opened}>
        <Icon icon="title-left" style={{ width: '16px', height: '16px' }} />
      </div>
      }
      <div className="flow-drawer-header-title">
        <div className="flow-drawer-title">{body}</div>
      </div>
      <div className="flow-drawer-extra">
        {RightElement ?
          RightElement :
          <span className="right-text">
          </span>
        }
      </div>
    </div>
  )
}

export { currentaudit, handleTltle, handleHeader }