/* eslint-disable react/display-name */
import React, { PropsWithChildren } from 'react'
import { Button, Upload, DragUpload, UploadData } from 'react-icecream'
import { AddThinIcon, UploadIcon } from 'react-icecream/icons'
import cns from 'classnames'

import './demo.less'

export default () => {
  const onChange = (data: UploadData[]) => {
    console.log('files', data)
  }

  return (
    <div className="upload-wrapper">
      <div className="upload-comp">
        <Line>
          <Upload value={[]} onUpload={() => () => undefined} multiple accept="image/png" onChange={onChange} disabled>
            <Button icon={<UploadIcon />} disabled>被禁用</Button>
          </Upload>
        </Line>
        <Line>
          <DragUpload value={[]} onUpload={() => () => undefined} onChange={onChange} multiple disabled>
            <DragContent title="被禁用，点击上传" disabled />
          </DragUpload>
        </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>
}