package com.travelex.tgbp.geo.common.inf.client.control;

import com.smartgwt.client.core.Function;
import com.smartgwt.client.types.TitleOrientation;
import com.smartgwt.client.widgets.HTMLFlow;
import com.smartgwt.client.widgets.form.fields.CanvasItem;


/**
 * Native smart gwt component to wrap HTML Drag and Drop files.
 */
public class NativeDragDropItem extends CanvasItem  {

    private HTMLFlow htmlFlow;


    public NativeDragDropItem() {
        initWidget();
    }

    public void setTitle(String title){
        super.setTitle(title);
        htmlFlow.setTitle(title);
    }



    private void initWidget() {
        htmlFlow = new HTMLFlow();
        htmlFlow.setContents(generateHTMLForDragDrop());
        setCanvas(htmlFlow);
         htmlFlow.doOnRender(new Function() {
            @Override
            public void execute() {
                initHTMLJS();
            }
        });
    }



    /*
    All the javascript will execute here.
     */
    private native void initHTMLJS() /*-{
        $doc.getElementById('drop_zone').addEventListener('dragover', handleDragOver, false);
        $doc.getElementById('drop_zone').addEventListener('drop', handleFileSelect, false);
        $doc.getElementById('upload_input').addEventListener('change',handleChange,false);
        function handleFileSelect(evt) {
            evt.stopPropagation();
            evt.preventDefault();

            var files = evt.dataTransfer.files; // FileList object.
            handleFiles(files);


        };

        function handleChange(event){
            files =$doc.getElementById('upload_input').files
            handleFiles(files);

        };

        function handleFiles(files){

            // files is a FileList of File objects. List some properties.

            for (var i = 0, f; f = files[i]; i++) {
                var output = [];
                output.push('<li><strong>', escape(f.name), '</strong></li>');
                $doc.getElementById('fileDragData').value = f.slice();
                reader = new FileReader();
                reader.onload = function(event) {
                    $doc.getElementById('fileDragData').value = event.target.result;
                }
                reader.readAsDataURL(f);
                $doc.getElementById('drop_zone').innerHTML = '<ul>' + output.join('') + '</ul>';


            }

        };

        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
        };



    }-*/;

    /*
    Method to generate HTML for setting it as a content.
     */
    private String generateHTMLForDragDrop() {

        StringBuilder html = new StringBuilder();
        html.append("<div style='width: 400px;height:200px;'>");
        html.append("<div style='min-height:150px;width:250px;margin:10px;padding:10px;border: 1px solid black;float:left;' id='drop_zone'>Drop files here</div>");
        html.append("<input id='fileDragData' type ='hidden'>");
        html.append("<div style='display: block; width: 100px; height: 30px; overflow: hidden;margin:10px;padding:15px;'>");
        html.append(" <button style='width: 110px; height: 30px; position: relative; top: -5px; left: -5px;'><a href='javascript: void(0)'>Browse</a></button>");
        html.append("<input type='file' id='upload_input' name='upload' style='font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px;; left: -20px' />" );
        html.append( "</div>");
        html.append( "</div>");
        return html.toString();

    }


}
