/* eslint-disable react/display-name */
import React, { PropsWithChildren, useRef, useState } from 'react'
import { Button, UploadCallbacks, Upload, DragUpload, UploadData, TextInput, isUploadRealFile } from 'react-icecream'
import * as qiniu from 'qiniu-js'
import { Base64 } from 'js-base64'
import createHmac from 'create-hmac'
import { AddThinIcon, UploadIcon } from 'react-icecream/icons'
import cns from 'classnames'
import diff from 'lodash/difference'

import './demo.less'

export default () => {
  const [list1, setList1] = useState<UploadData[]>([])
  const [list2, setList2] = useState<UploadData[]>([])
  const [ak, setAk] = useState('')
  const [sk, setSk] = useState('')
  const [bucket, setBucket] = useState('')
  const [upHost, setUpHost] = useState('')
  const uploadStatus = useRef(0)

  const doUpload = (
    file: File,
    callbacks: UploadCallbacks
  ) => {
    uploadStatus.current = 1
    let stopUpload = () => {
      uploadStatus.current = 0
    }
    getToken(ak, sk, bucket).then(token => {
      if (uploadStatus.current === 0) return

      const observable = qiniu.upload(
        file,
        file.name,
        token,
        undefined,
        { checkByMD5: true, debugLogLevel: 'INFO', uphost: upHost && upHost.split(',') }
      )
      const subscribe = observable.subscribe(
        {
          next: progress => callbacks.onProgress(progress.total),
          error: callbacks.onError,
          complete: callbacks.onComplete
        }
      )

      stopUpload = () => subscribe.unsubscribe()
    })
    return () => stopUpload?.()
  }

  const onChange1 = (data: UploadData[]) => {
    console.log('js-sdk files 1', data)
    if (beforeUpload(list1, data)) {
      setList1(data)
    }
  }

  const onChange2 = (data: UploadData[]) => {
    console.log('js-sdk files 2', data)
    if (beforeUpload(list2, data)) {
      setList2(data)
    }
  }

  return (
    <div className="upload-wrapper">
      <div className="upload-comp">
        <Line>
          <Upload
            onUpload={doUpload}
            multiple
            value={list1}
            onChange={onChange1}
          >
            <Button icon={<UploadIcon />}>使用js-sdk上传</Button>
          </Upload>
        </Line>
        <Line>
          <DragUpload
            onUpload={doUpload}
            value={list2}
            onChange={onChange2}
            multiple
            renderContent={dragStatus => <DragContent title="js-sdk，点击上传" dragStatus={dragStatus} />}
          />
        </Line>
      </div>
      <div className="upload-input">
        <div className="upload-input-tip">上传文件之前请填写配置参数，参数同 js sdk</div>
        <Line><TextInput value={ak} onChange={setAk} placeholder="access key，必填" /></Line>
        <Line><TextInput value={sk} onChange={setSk} placeholder="secret key，必填" /></Line>
        <Line><TextInput value={bucket} onChange={setBucket} placeholder="bucket name，必填" /></Line>
        <Line><TextInput value={upHost} onChange={setUpHost} placeholder="uphost" /></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>
)

export interface TokenOptions {
  assessKey?: string
  secretKey?: string
  bucketName?: string
  deadline?: number
}

export function generateUploadToken(options: Required<TokenOptions>) {
  const { deadline, bucketName, assessKey, secretKey } = options

  const hmacEncoder = createHmac('sha1', secretKey)
  const putPolicy = JSON.stringify({ scope: bucketName, deadline })
  const encodedPutPolicy = safeEncode(Base64.encode(putPolicy))
  const sign = safeEncode(hmacEncoder.update(encodedPutPolicy).digest('base64'))
  const token = `${assessKey}:${sign}:${encodedPutPolicy}`
  return token
}

function safeEncode(target: string): string {
  return target.replace(/\//g, '_').replace(/\+/g, '-')
}

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)
}

async function getToken(ak: string, sk: string, bucket: string) {
  // 在 portal 上上传文件时建议使用 /api/kodov2/uptoken 获取 token
  const token = generateUploadToken({
    assessKey: ak,
    secretKey: sk,
    bucketName: bucket,
    deadline: Math.floor(Date.now() / 1000) + 3600
  })
  await new Promise(resolve => {
    setTimeout(() => { resolve('') }, 1000)
  })
  return token
}