import React, { useEffect, useImperativeHandle, useRef, useState, } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import { Button, Drawer, Form, Radio, RadioChangeEvent, Space, Tag } from 'antd'
import { Icon } from '../../../../../components/icons'
import { RendererEnv } from '../../../../../env'
import { SchemaNode } from '../../../../../types'
import { isMobile } from '../../../../../utils/helper'
import { tools } from '../../../../../utils/shell/tools'
import { AttachmentApi } from '../../type'
import MbContacts from '../../../../../components/Communication/MbContacts'
import TreeSelectModal from '../../../../../components/Communication/TreeSelectModal'
import TextArea from 'antd/lib/input/TextArea'
import './index.scss'

interface Flowcountersign {
  env: RendererEnv
  onRef: React.RefObject<any>
  handleOnClick: () => void
  render: (region: string, node: SchemaNode, props?: any) => JSX.Element
  attachmentApi: AttachmentApi
  name: string
}
interface ContactsData {
  id: string
  name: string
  parId: string
  nodeType: 0 | 1
}

interface ReceiverData {
  id: string
  name: string
  alias: string
}

const FlowCountersign: React.FC<Flowcountersign> = (props) => {
  const { env, handleOnClick, attachmentApi, name } = props
  const [visible, setVisible] = useState(false)
  const [contacts, setContacts] = useState<ContactsData[]>()
  const [receivers, setReceivers] = useState<ReceiverData[]>([])
  const [radioValue, setRadioValue] = useState(undefined);
  const [checkFlagValue, setCheckFlagValue] = useState(undefined);
  const [radioMultiple, setRadioMultiple] = useState(false);
  const [textArea, setTextArea] = useState('');
  const [form] = Form.useForm();
  const Mobile: boolean = isMobile()
  const value = sessionStorage.getItem('contacts');
  const nodeMap = useRef<Map<string, { id: string, isLeaf: boolean }[]>>(new Map(value ? JSON.parse(value) : null));
  const flow = (name == 'flow_assign' ? true : false)

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

  useEffect(() => {
    if (!visible) return
    if (sessionStorage.getItem('personnel')) {
      const personnel = JSON.parse(sessionStorage.getItem('personnel') as string)
      setContacts(personnel)
    } else {
      getContactsDatas()
    }
  }, [visible])

  const getContactsDatas = async () => {
    const res = await env.fetcher(attachmentApi.addrBookApi)
    if (res.status === 0) {
      const personnel: ContactsData[] = res.data
      sessionStorage.setItem('personnel', JSON.stringify(personnel))
      setContacts(personnel)
      if (sessionStorage.getItem('contacts')) {
        const map = new Map<string, { id: string, isLeaf: boolean }[]>()
        const keys = personnel.flatMap((data: ContactsData) => data.nodeType == 0 ? [data.id] : [])
        keys.forEach(key => map.set(key, personnel.flatMap(data => data.parId == key ? [{ id: data.id, isLeaf: data.nodeType == 1 }] : [])))
        const value = JSON.stringify(Array.from(map.entries()))
        sessionStorage.setItem('contacts', value)
      }
    }
  }

  const onChange = (e: RadioChangeEvent) => {
    setRadioValue(e.target.value);
  };

  const checkOnChange = (e: RadioChangeEvent) => {
    setCheckFlagValue(e.target.value);
  };

  const onChangeTextArea = async () => {
    const values = await form.validateFields().catch(() => { })
    setRadioMultiple(true)
    const afterUserIds = receivers.map(item => item.id).join()
    if (values?.assignFlag && receivers.length > 0) {
      return { ...values, afterUserIds: afterUserIds }
    } else if (!flow && receivers.length > 0) {
      return { ...values, afterUserIds: afterUserIds }
    }
  }

  return (
    <>
      <div className={`endorsement-review ${Mobile ? 'endorsement-review_Mobile' : ''}`} >
        <Form form={form}>
          <div className='signed-by'>
            <span className='item-title'>{flow ? '加签审批人' : '转申'}<span style={{ color: "red" }}> *</span></span>
            <div className='item-select'>
              {receivers.length > 0 &&
                <div className='item-select-list-item-content'>
                  {
                    <Space wrap>
                      {receivers?.map(receiver => (
                        <Tag key={receiver.id} className='item-select-tag'>
                          <span className='item-select-tag-img'>
                            <Icon icon='camera' className="icon"></Icon>
                          </span>
                          <span style={{ maxWidth: '60px' }} className='ellipsis item-select-tag-text'>{receiver.name}</span>
                          <span className='item-select-tag-btn' style={{ transform: 'rotate(45deg)', display: 'inline-block', fontSize: '22px' }} onClick={() => setReceivers(datas => datas.filter(data => data.id !== receiver.id))}>+</span>
                        </Tag>
                      ))}
                    </Space>}
                </div>
              }
              {
                !(!flow && (receivers.length == 1)) &&
                < div className='item-bat' onClick={() => {
                  setVisible(true)
                }}>
                  <PlusOutlined />
                </div>
              }
            </div>
            {radioMultiple && receivers.length == 0 && <div style={{ color: "red" }}>最少添加1人</div>}
          </div>

          {
            flow && <div className='before-and-after-selection' >
              <div className='signing_method'>
                <h4>加签方式 <span style={{ color: "red" }}> *</span></h4>
                <Form.Item name='assignFlag' className='countersigner_form' rules={[{ required: true, message: '请选择' }]}>
                  <Radio.Group onChange={onChange} value={radioValue} className={`${Mobile ? 'countersigner_form_btn' : ''}`}>
                    {Mobile ? <>
                      <Radio.Button className='form_btn' value={"1"}>在我之前</Radio.Button>
                      <Radio.Button className='form_btn' value={"0"}>在我之后</Radio.Button>
                    </> :
                      <>
                        <Radio value={"1"}>在我之前</Radio>
                        <Radio value={"0"}>在我之后</Radio>
                      </>
                    }
                  </Radio.Group>
                </Form.Item>
              </div>
              {radioValue !== undefined && <p className='signing-prompt'>{radioValue == "1" ? '加签后，流程先经过加签审批人，再由我审批' : '加签后，我的审批结果为同意'}</p>}
            </div>
          }

          {receivers.length >= 2 && <div className='sign-off-method'>
            <h4>多人签核方式 <span style={{ color: "red" }}> *</span></h4>
            < Form.Item name='checkFlag' className='countersigner_form' rules={[{ required: true, message: '请选择签核方式' }]}>
              <Radio.Group onChange={checkOnChange} value={checkFlagValue} className={`${Mobile ? 'countersigner_form_btn' : ''}`}>
                {Mobile ? <>
                  <Radio.Button className='form_btn' value={"0"}>或签</Radio.Button>
                  <Radio.Button className='form_btn' value={"1"}>会签</Radio.Button>
                  <Radio.Button className='form_btn' value={"2"}>依次审批</Radio.Button>
                </> :
                  <>
                    <Radio value={"0"}>或签</Radio>
                    <Radio value={"1"}>会签</Radio>
                    <Radio value={"2"}>依次审批</Radio>
                  </>
                }

              </Radio.Group>
            </Form.Item>
          </div>}
          <div className='endorsement-approval' >
            {Mobile && <p>加签意见</p>}
            <Form.Item name='comments' className='countersigner_form'>
              <TextArea
                bordered={!Mobile}
                style={{ height: 120, resize: 'none' }}
                placeholder={flow ? "请输入加签备注" : "请输入转申理由 "}
                value={textArea}
                onChange={(e) => {
                  setTextArea(e.target.value)
                }}
              />
            </Form.Item>
          </div>
        </Form>
        {
          Mobile && <div className='endorsement_button'>
            <Button type="primary" block onClick={handleOnClick} className="Button_Mobile">
              {radioValue == undefined ? '确认' : radioValue == '1' ? '确认加签' : '同意并加签'}
            </Button>
            {/* {radioValue == 0 && <p>点击按钮，即同意该审核并添加审核人员</p>} */}
          </div>
        }

      </div >

      {
        (Mobile ?
          <Drawer
            className='process_drawer process_drawer_amis'
            closeIcon={
              <span className="left-text" >
                <Icon icon='left-arrow-light' className="icon" />
              </span>
            }
            title={tools.isComWx ? '' : '选择联系人'}
            onClose={() => { setVisible(false) }}
            width={"100%"}
            visible={visible}
            getContainer={env.getModalContainer}
            mask={false}
            destroyOnClose={true}
            style={{ transform: 'translateX(0px)' }}
            extra={
              <span className="right-text" >
              </span>
            }
          >
            {contacts &&
              <MbContacts
                defaultReceiverDatas={receivers}
                contacts={contacts}
                isPick={true}
                onConfirm={datas => {
                  setReceivers(datas.map(data => ({ id: data.id, name: data.name, alias: data.id })))
                  setVisible(false)
                }}
                onClose={() => setVisible(false)}
                visible={visible}
                titleShow={false}
                quantity={flow ? 200 : 1}
              />}
          </Drawer>
          :
          (visible && contacts) &&
          <TreeSelectModal
            visible={visible}
            nodeMap={nodeMap.current}
            contacts={contacts}
            excludeKeys={contacts.flatMap(data => data.nodeType == 0 ? [data.id] : [])}
            defaultCheckedKeys={receivers.map(receiver => receiver.id)}
            env={env}
            onConfirm={datas => {
              setReceivers(receivers => [...receivers, ...(datas.map(data => ({ id: data.id, name: data.name, alias: data.id })))])
              setVisible(false)
            }}
            onCancel={() => setVisible(false)}
            quantity={flow ? 200 : 1}
          />
        )
      }
    </>
  )
}

export default FlowCountersign