import React, { memo, useState, forwardRef, useImperativeHandle } from 'react'
import type { FC, ReactNode, Ref } from 'react'
import { Input, Modal, Upload } from 'antd'
import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import type { RcFile, UploadProps } from 'antd/es/upload'
import type { UploadFile } from 'antd/es/upload/interface'
import { SendPrescriptionWrapper } from '../style'
import { BASE_URL } from '@/service/config'
import type { Send_prescription_formType } from '@/types'
// /sys/common/appUpload
const { TextArea } = Input

interface IProps {
  children?: ReactNode
  ref?: any
}

const getBase64 = (file: RcFile): Promise<string> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result as string)
    reader.onerror = (error) => reject(error)
  })

const SendPrescription: FC<IProps> = memo(
  forwardRef<HTMLDivElement, IProps>((props, ref: Ref<any>) => {
    const [previewOpen, setPreviewOpen] = useState(false)
    const [previewImage, setPreviewImage] = useState('')
    const [previewTitle, setPreviewTitle] = useState('')
    const [fileList, setFileList] = useState<UploadFile[]>([])

    const [Send_prescription_formData, setSend_prescription_formTypeData] = useState<Send_prescription_formType>({
      drugList: [{ amount: '', des: '', name: '', num: '' }],
      prescriptionForm: '',
      prescriptionAmount: 0
    })

    const addFormItemHandler = () => {
      const setdata = { ...Send_prescription_formData, drugList: [...Send_prescription_formData.drugList, { amount: '', des: '', name: '', num: '' }] }

      setSend_prescription_formTypeData(setdata)
    }

    const removeFormItemHandler = (index: number) => {
      if (Send_prescription_formData.drugList.length <= 1) return

      const setdata = { ...Send_prescription_formData, drugList: [...Send_prescription_formData.drugList].filter((_, idx) => idx !== index) }

      setSend_prescription_formTypeData(setdata)
    }

    const changeFormItemValueHandler = (index: number, value: string | number, key: string) => {
      const setdata = {
        ...Send_prescription_formData,
        drugList: Send_prescription_formData.drugList.map((_, idx) => (idx === index ? { ..._, [key]: value } : _))
      }

      setSend_prescription_formTypeData(setdata)
    }

    const handleCancel = () => setPreviewOpen(false)

    const handlePreview = async (file: UploadFile) => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj as RcFile)
      }

      setPreviewImage(file.url || (file.preview as string))
      setPreviewOpen(true)
      setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1))
    }

    const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => setFileList(newFileList)

    useImperativeHandle(ref, () => ({
      Send_prescription_formData,
      fileList,
      setSend_prescription_formTypeData,
      setFileList
    }))

    const uploadButton = (
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>上传证明</div>
      </div>
    )

    return (
      <SendPrescriptionWrapper ref={ref}>
        <div className="title">问诊病情</div>
        <TextArea
          value={Send_prescription_formData.prescriptionForm}
          onChange={(e) => setSend_prescription_formTypeData({ ...Send_prescription_formData, prescriptionForm: e.target.value })}
          placeholder="请输入问诊病情"
          autoSize={{ minRows: 3, maxRows: 6 }}
          className="title"
        />
        <div className="title">处方药</div>
        {Send_prescription_formData.drugList.map((_, index) => (
          <div className="flexX" key={index}>
            <div className="lefticon" onClick={() => removeFormItemHandler(index)}>
              <MinusCircleOutlined className="grayIcon" />
            </div>
            <div>
              <Input
                value={Send_prescription_formData.drugList[index].name}
                onChange={(e) => changeFormItemValueHandler(index, e.target.value, 'name')}
                className="title"
                placeholder="请输入药品名称"
              />
              <div className="flexA">
                <Input
                  value={Send_prescription_formData.drugList[index].amount}
                  onChange={(e) => changeFormItemValueHandler(index, e.target.value, 'amount')}
                  className="title"
                  placeholder="请输入药品价格"
                />
                <Input
                  value={Send_prescription_formData.drugList[index].num}
                  onChange={(e) => changeFormItemValueHandler(index, e.target.value, 'num')}
                  className="title"
                  placeholder="请输入药品数量"
                />
              </div>
              <TextArea
                value={Send_prescription_formData.drugList[index].des}
                onChange={(e) => changeFormItemValueHandler(index, e.target.value, 'des')}
                className="title"
                placeholder="请输入说明"
                autoSize={{ minRows: 3, maxRows: 6 }}
              />
            </div>
          </div>
        ))}
        <div className="add flexC" onClick={addFormItemHandler}>
          <PlusCircleOutlined className="blueIcon" />
          <span>添加处方药</span>
        </div>
        <div className="title">处方单证明：</div>
        <Upload action={BASE_URL + '/sys/common/appUpload'} listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
          {fileList.length >= 3 ? null : uploadButton}
        </Upload>
        <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
        <div className="title">总金额：¥{Send_prescription_formData.prescriptionAmount}</div>
      </SendPrescriptionWrapper>
    )
  })
)

export default SendPrescription