import React, {Component} from "react";
import Dropzone from "../../";

export class TestReactDragEvt extends Component {
  getFiles = async (event: React.DragEvent<HTMLDivElement>) => {
    const files = Array.from(event.dataTransfer.files);
    return files;
  }

  render() {
    return (
      <div>
        <Dropzone getFilesFromEvent={this.getFiles}>
          {({getRootProps}) => (
            <div {...getRootProps()} />
          )}
        </Dropzone>
      </div>
    );
  }
}

export class TestDataTransferItems extends Component {
  getFiles = async (event: React.DragEvent<HTMLDivElement>) => {
    const items = Array.from(event.dataTransfer.items);
    return items;
  }

  render() {
    return (
      <div>
        <Dropzone getFilesFromEvent={this.getFiles}>
          {({getRootProps}) => (
            <div {...getRootProps()} />
          )}
        </Dropzone>
      </div>
    );
  }
}

export class TestNativeDragEventEvt extends Component {
  getFiles = async (event: DragEvent) => {
    const files = Array.from(event.dataTransfer.files);
    return files;
  }

  render() {
    return (
      <div>
        <Dropzone getFilesFromEvent={this.getFiles}>
          {({getRootProps}) => (
            <div {...getRootProps()} />
          )}
        </Dropzone>
      </div>
    );
  }
}

export class TestChangeEvt extends Component {
  getFiles = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files);
    return files;
  }

  render() {
    return (
      <div>
        <Dropzone getFilesFromEvent={this.getFiles}>
          {({getRootProps}) => (
            <div {...getRootProps()} />
          )}
        </Dropzone>
      </div>
    );
  }
}


export class TestNativeEvt extends Component {
  getFiles = async (event: Event) => {
    const files = Array.from((event.target as HTMLInputElement).files);
    return files;
  }

  render() {
    return (
      <div>
        <Dropzone getFilesFromEvent={this.getFiles}>
          {({getRootProps}) => (
            <div {...getRootProps()} />
          )}
        </Dropzone>
      </div>
    );
  }
}