import { Component, render, createElement } from 'rax';
import "./index.less";
import { handleDrop } from "../Util/DragMgr";
import DragItem from '../DragItem';
import App from '../App';

export let FileType = {
    NewFile: 1,
    OldFile: 2
}


export default class Drag extends Component {
    inst;
    constructor(props) {
        super(props);
        Drag.inst = this;
        this.init();

    }
    init() {
        let lists = [];
        for (let i = 0; i < this.props.fileList; ++i) {
            lists.push({
                type: FileType.OldFile,
                name: this.props.fileList[i].name,
                node: null
            })
        }
        this.state = {
            hoverName: "",
            files: lists
        }
    }

    //Same as $(document).ready();
    ready(fn) {
        if (document.readyState != 'loading') {
            fn();
        } else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }
    //When the page has loaded, run this code
    onListener = () => {
        // prevent default behavior from changing page on dropped file
        window.ondragover = (e) => {
            e.preventDefault();
            return false
        };
        // NOTE: ondrop events WILL NOT WORK if you do not "preventDefault" in the ondragover event!!
        window.ondrop = (e) => {
            e.preventDefault();
            return false
        };
        var holder = this.upbox;
        // holder.ondragstart = (e)=>{
        //     e.dataTransfer.setData("text/plain","holderfile")
        //     e.preventDefault();
        //     return false;
        // }


        holder.ondragover = (e) => {
            e.preventDefault();
            this.setState({ hoverName: " up_box_hover" });
            return false;
        };
        holder.ondragleave = () => {
            this.setState({ hoverName: "" })
            return false;
        };
        holder.ondrop = (e) => {
            e.preventDefault();

            // let msg = e.dataTransfer.getData("text/plain");
            // console.log("msg",msg);
            // console.log(e.dataTransfer);
            // console.log("text/uri-list",event.dataTransfer.getData('text/uri-list'))
            // let formData = new FormData()
            // for (var i = 0; i < e.dataTransfer.files.length; ++i) {
            //     console.log(e.dataTransfer.files[i]);
            //     formData.append('file',  e.dataTransfer.files[i])
            //     this.getFileMsg(e.dataTransfer.files[i]);
            // }
            // console.log("formData",formData)
            let oldFiles = this.state.files.slice();
            for(let i=0;i<oldFiles.length;++i){
                oldFiles[i].type = FileType.OldFile;
            }
            let files = [];
            for (let i = 0; i < e.dataTransfer.files.length; ++i) {
                if(this.isNeedUp(oldFiles,e.dataTransfer.files[i].name)){
                    files.push({
                        type: FileType.NewFile,
                        name: e.dataTransfer.files[i].name,
                        file: e.dataTransfer.files[i],
                        node: null
                    })
                }
                
            }
            console.log("..oldFiles",oldFiles);
            files = oldFiles.concat(files);
            console.log("..files",files);
            this.setState({
                hoverName: "",
                files: files
            })
            return false;
        };
    }

    isNeedUp=(oldFiles,name)=>{
        for(let i= 0;i<oldFiles.length;++i){
            if(oldFiles[i].name === name){
               let result = confirm("已经存在 "+name+" 文件了，确定替换吗");
               if(result) oldFiles.splice(i,1);
               return result;
            }
        }
        return true;
    }




    addUpQueueFile = (msgArr) => {
        handleDrop(msgArr);
    }


    removeChildNode = (node) => {
        let files = this.state.files.slice();
        for (let i = 0; i < files.length; ++i) {
            if (files[i].node === node) {
                files.splice(i, 1);
                this.setState({
                    files: files
                })
                return;
            }
        }
    }

    convertSize = (size) => {
        if (size / (1024 * 1024) > 1) {
            return Math.ceil(size / (1024 * 1024)) + " M"
        }
        if (size / 1024 > 1) {
            return Math.ceil(size / 1024) + " kb"
        }
        return size + " b"
    }

    getFileMsg(file) {
        let reader = new FileReader();
        reader.onload = function (event) {
            console.log(event.target);
        }
        if (file) {
            reader.readAsDataURL(file);
        }
    }


    updateFileList(fileList) {

        let lists = [];
        this.clearAllChecked();
        for (let i = 0; i < fileList.length; ++i) {
            lists.push({
                type: FileType.OldFile,
                name: fileList[i].name,
                node: null
            })
        }
        this.setState({
            hoverName: "",
            files: lists
        })

    }

    clearAllChecked() {
        let files = this.state.files.slice();
        for (let i = 0; i < files.length; ++i) {
            files[i].node && files[i].node.unChecked();
        }
    }

    deleteFiles = () => {
        let folderName = App.inst.getCurFolderName();
        let checkeds = [];
        for (let i = 0; i < this.dragItems.length; ++i) {
            if (this.dragItems[i].isChecked) {
                checkeds.push(this.dragItems[i].getFileName());
            }
        }
        App.inst.deleteFiles({
            folderName: folderName,
            fileNames: checkeds
        })
    }

    configure = () => {
        App.inst.addConfigure()
    }

    appendDragItem(com) {
        if (this.dragItems.indexOf(com) != -1) {
            return;
        }
        this.dragItems.push(com);
    }

    componentWillUnmount() {

    }
    componentDidMount() {
        this.ready(this.onListener);

    }



    render() {
        this.dragItems = [];
        return (
            <div ref={ref => this.upbox = ref} className={"up_box" + this.state.hoverName}>
                <div className={"up_filetitle"}>
                    <div className={"up_titletxt"}>文件管理</div>
                    <input className={"up_deletefiles"} type="button" value="删除选中文件" onClick={this.deleteFiles} />
                </div>
                <div className={"up_filefirst"}>
                    <div className={"up_fileselect"}>选中</div>
                    <div className={"up_filename"}>文件名</div>
                    <div className={"up_fileresult"}>下载</div>
                    <div className={"up_fileconfigure"}>
                        <input value='添加配置' type='button' className={"addconfigure"} onClick={this.configure}></input>
                    </div>
                </div>
                {
                    this.state.files.map((file, index) => {
                        return <DragItem key={index} file={file} />
                    })
                }
            </div>
        )
    }
}