/* eslint-disable react/display-name */
import React, { PropsWithChildren, useState } from 'react'
import { Button, UploadCallbacks, Upload, UploadData, getUploadValue, isUploadRealFile } from 'react-icecream'
import { UploadIcon } from 'react-icecream/icons'
import diff from 'lodash/difference'

import './demo.less'

export default () => {
  const [files, setFiles] = useState<UploadData[]>(getUploadValue(['2', '3']))

  const doUpload = (
    _: File,
    callbacks: UploadCallbacks
  ) => {
    const mock = { percent: 0 }
    const interval = setInterval(() => {
      mock.percent += 1
      if (mock.percent === 100) {
        callbacks.onComplete()
        clearInterval(interval)
      } else {
        callbacks.onProgress({ percent: mock.percent })
      }
    }, 100)
    return () => {
      if (interval) {
        clearInterval(interval)
        mock.percent = 0
      }
    }
  }

  const onChange = (data: UploadData[]) => {
    console.log('files', data)
    if (beforeUpload(files, data)) {
      setFiles(data)
    }
  }

  const onValidate = () => {
    let message = ''
    if (files.length === 0) {
      message = '上传文件不能为空'
    } else {
      for (const file of files) {
        if (file.status === 'error') {
          message = '请先删除上传失败的文件'
        } else if (file.status === 'uploading' || file.status === 'ready') {
          message = '请等待文件上传结束'
        } else if (file.status === 'stopped') {
          message = '请删除未完整上传的文件'
        }

        if (message) break
      }
    }
    console.log('on validate, error info:', message)
  }

  const onClear = () => {
    setFiles([])
  }

  return (
    <div className="upload-wrapper">
      <div className="upload-comp">
        <Line>
          <Upload
            onUpload={doUpload}
            multiple
            value={files}
            onChange={onChange}
          >
            <Button icon={<UploadIcon />}>上传多选</Button>
          </Upload>
        </Line>
        <Line>
          <Button onClick={onValidate}>校验</Button>
          <Button style={{ marginLeft: 24 }} onClick={onClear}>清空数据</Button>
        </Line>
      </div>
    </div>
  )
}

function Line({ children }: PropsWithChildren<{}>) {
  return <div style={{ marginBottom: '24px' }}>{children}</div>
}

function beforeUpload(before: UploadData[], after: UploadData[]): boolean {
  const exisedIdList = before.map(item => item.id)
  const newIdList = after.map(item => item.id)
  const addedIdList = diff(newIdList, exisedIdList)
  const addedList = after.filter(item => addedIdList.includes(item.id))
  return addedList.filter(isUploadRealFile).every(data => data.file.size <= 100 * 1024 * 1024)
}