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

import './demo.less'

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

  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(dragFiles, data)) {
      setDragFiles(data)
    }
  }

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

  return (
    <div className="upload-wrapper">
      <div className="upload-comp">
        <Line>
          <Upload
            onUpload={doUpload}
            value={files}
            onChange={onSingleChange}
          >
            <Button icon={<UploadIcon />}>{files.length === 0 ? '上传单选' : '重新上传'}</Button>
          </Upload>
        </Line>
        <Line>
          <DragUpload
            onUpload={doUpload}
            value={dragFiles}
            onChange={onChange}
            renderContent={dragStatus => <DragContent title={dragFiles.length === 0 ? '单选，点击上传' : '单选，点击重新上传'} dragStatus={dragStatus} />}
          />
        </Line>
      </div>
    </div>
  )
}

const DragContent = ({ title, dragStatus = '', disabled = false }: { title: string, dragStatus?: string, disabled?: boolean}) => (
  <div className={cns('upload-drag-wrapper', 'upload-drag-' + dragStatus, disabled && 'upload-drag-disabled')}>
    <AddThinIcon />
    {dragStatus !== 'dragover' || disabled
      ? <div className="upload-drag-text"><span className="upload-drag-click">{title}</span>，或拖拽文件到此处上传</div>
      : <div className="upload-drag-text">释放文件并开始上传</div>}
    <div className="upload-drag-tip">视频大小控制在100Mb以内</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)
}