import React, { useState, useEffect, memo } from 'react';
import { Progress, Input } from 'antd'
import { getUrl2, isDev, CBreadcrumb, ActionBtn } from 'educoder'
import axios from 'axios'


const MAX_LENGTH = 30

/**
name: file.name,
size: file.size,
type: file.type,

fileHash: uploadInfo.fileHash, // "ba1bbc53fdecd9eaaae479fbd9518442"
state: uploadInfo.state, //  "Uploading"
videoId: uploadInfo.videoId, //   "719b82c875c34ac39f94feb145d25ad2"
loaded: 0

 */
function VideoUpload (props) {
    const { className, index, name, loaded, state, cancelUpload, onTitleChange, title } = props;
    // const [title, setTitle] = useState('')
    const username = props.match.params.username

    function titleChange (e) {
        onTitleChange(e.target.value, index)
    }
    return (
        <div className={`videoUpload ${className}`}>
            <div className="filename">{index+1}. {name}</div>
            <div className="progress df">
                <Progress percent={loaded} 
                    status={loaded == '100' ? "" : 'active'}
                />
                <div className="cancelUpload">
                    <ActionBtn className="" onClick={() => cancelUpload(index, loaded == '100' )}>{loaded == '100' ? "删除" : "取消上传"}</ActionBtn>
                </div>
            </div>
            
            <div>
                <span className="titleLabel">标题：</span>
                <Input placeholder={`标题支持最多${MAX_LENGTH}个字符`} onInput={titleChange} maxLength={MAX_LENGTH} suffix={
                        <span className="color-grey-6 font-13">{String(title.length)}/{MAX_LENGTH}</span>
                    }
                    className="titleInput"
                ></Input>
            </div>
        </div>
    )
}

export default VideoUpload