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


export let FileType = { // 控制 文件夹 是否是 新的
  NewFile: 1,
  OldFile: 2
};

// 右侧
export default class Drag extends Component {
    inst;
    constructor(props) {
      super(props);
      Drag.inst = this;
      this.init();
    }
    // 初始化 state
    init() {
      let lists = [];
      for (let i = 0; i < this.props.fileList; ++i) {
        lists.push({
          type: FileType.OldFile,
          name: this.props.fileList[i].name,
          size: '',
          node: null
        });
      }
      console.log(lists, 'Draglists');
      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 files = [];
        for (let i = 0; i < e.dataTransfer.files.length; ++i) {
          let size = showsize(e.dataTransfer.files[i].size);
          files.push({
            type: FileType.NewFile,
            name: e.dataTransfer.files[i].name,
            file: e.dataTransfer.files[i],
            size,
            node: null
          });
        }
        files = this.state.files.slice().concat(files);
        this.setState({
          hoverName: '',
          files: files
        });
        return false;
      };
    }

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

    // 点击事件改变当前渲染的fileList
    updateFileList(fileList) {
      let lists = [];
      this.clearAllChecked();
      for (let i = 0; i < fileList.length; ++i) {
        let size = showsize(fileList[i].size);
        lists.push({
          type: FileType.OldFile,
          name: fileList[i].name,
          size,
          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 = (name) => {
      const isSure = confirm('确定删除选中项吗？');
      let folderName = name;
      if (isSure && folderName) {
        let checkeds = [];
        for (let i = 0; i < this.dragItems.length; ++i) {
          if (this.dragItems[i].isChecked) {
            checkeds.push(this.dragItems[i].getFileName());
          }
        }
        console.log(checkeds);
        App.inst.deleteFiles({
          folderName: folderName,
          fileNames: checkeds
        });
      }
    }
    // 子组件 点击时 传入 filename 进行删除
    deleteSingleFiles = (fileNames) => {
      let folderName = this.props.currentName;
      App.inst.deleteFiles({
        folderName: folderName,
        fileNames: fileNames
      });
    }

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

    componentDidMount() {
      console.log('我是Drog组件----------------:', this.state.files, this.props);
      this.ready(this.onListener);
    }

    delete = () => {
      let isDelete = confirm('确定删除:' + this.props.msg.folderName + '文件吗？');
      if (isDelete) {
        App.inst.deleteFolder(this.props.msg.folderName, () => {
          console.log(App.inst.checked);
        });
      }
    }

    render() {
      this.dragItems = [];
      return (
        <div ref={ref => this.upbox = ref} className={'up_box' + this.state.hoverName}>
          <div className={'up_filetitle'}>
            <div className={'up_titletxt'}>文件操作 -&gt; {this.props.currentName}</div>
            <div className={'up_f_btns_box'}>
              <input className={'up_deletefiles'} type="button" value="删除选中文件" onClick={() => {
                let checkeds = [];
                for (let i = 0; i < this.dragItems.length; ++i) {
                  if (this.dragItems[i].isChecked) {
                    checkeds.push(this.dragItems[i].getFileName());
                  }
                }
                console.log(checkeds);
                if (checkeds <= 0) {
                  alert('请先选中待删除项！');
                  return;
                };
                this.deleteFiles(this.props.currentName);
              }} />
              <input type="button" className={'up_delete_currentfiles'} onClick={() => {
                this.delete();
              }} value="删除当前打开文件夹" />
            </div>
          </div>
          <div className={'up_filefirst'}>
            <div className={'up_fileselect up_f_line'}>选中</div>
            <div className={'up_filename up_f_line'}>文件名</div>
            <div className={'up_filesize up_f_line'}>大小</div>
            <div className={'up_filecontrol'}>操作</div>
          </div>

          {
            this.state.files.map((file, index) => {
              return <DragItem key={index} file={file} de={this.deleteFiles} currentName={this.props.currentName} />;
            })
          }
        </div>
      );
    }
}