{% extends 'qcg/base.html' %}
{% load staticfiles bootstrap3 %}

{% block extra_css %}
    <link href="{% static 'qcg/selectize/selectize.bootstrap3.css' %}" rel="stylesheet">

    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin-bottom: 0;
        }

        body > .container {
            height: calc(100% - 122px);
            overflow-y: hidden;
        }
    </style>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'qcg/cookie/jquery.cookie.min.js' %}"></script>
    <script src="{% static 'qcg/globals.js' %}"></script>
    {% include 'filex/source.js.html' %}

    <script>
        var filex = filex || {},
            hostArchiveSupport = ['moss.man.poznan.pl', 'ui.plgrid.wcss.wroc.pl'];

        $(function () {
            'use strict';

            filex.initialLoad();

            var statusTimeout;

            String.prototype.endsWith = function(suffix) {
                return this.indexOf(suffix, this.length - suffix.length) !== -1;
            };

            function status(msg) {
                clearTimeout(statusTimeout);
                statusTimeout = setTimeout(function() {
                    $('#status').text('');
                }, 3000);

                $('#status').text(msg);
            }

            function failModal(msg) {
                return function(xhr) {
                    var $errorModal = $('#error-modal');

                    $errorModal.find('#error-modal-label').text('Błąd serwera');
                    $errorModal.find('.modal-body').html($('<h4>', {text: msg}));

                    var error = (xhr.responseJSON || {}).error || undefined;

                    if (typeof error === 'string')
                        $errorModal.find('.modal-body').append($('<pre>', {text: error}));

                    filex.idle();
                    $errorModal.modal();

                    console.error(arguments);
                };
            }

            function conflictingName(name, modal) {
                if (filex.files.some(function(item) { return item.get('name') == name })) {
                    $('<div>', {
                        'class': 'alert alert-danger',
                        html: '<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Plik o podanej nazwie już istnieje!'
                    }).prependTo(modal.find('.modal-body'));

                    return true;
                }

                return false;
            }

            filex.files.on('change:checked reset', function() {
                var selected = filex.selectedFiles().length,
                    supportsArchive = hostArchiveSupport.indexOf(filex.host) != -1;

                $('#btn-rename').toggleClass('disabled', selected != 1);
                $('#btn-delete').toggleClass('disabled', selected == 0);
                $('#btn-compress').toggleClass('disabled', !supportsArchive || selected == 0);

                if (supportsArchive && selected == 1) {
                    var filename = filex.selectedFiles()[0].get('name'),
                        is_archive = _.some(['.zip', '.tar.gz', '.tgz', '.tar.bz2', 'tbz'], function(ext) {
                            return filename.endsWith(ext);
                        });

                    $('#btn-extract').toggleClass('disabled', !is_archive);
                }
                else {
                    $('#btn-extract').addClass('disabled');
                }
            });

            $('form').on('show.bs.modal', function() {
                $(this).find('.alert').remove();
                this.reset();
            }).on('shown.bs.modal', function() {
                $(this).find('input[type="text"]')[0].focus();
            });

            $('#btn-upload').on('click', function() {
                var url = '{% url 'gridftp_upload' %}?' + $.param({host: filex.host, path: filex.path.full()});

                var win = window.open(url, url, 'height=500,width=800');
                win.focus();
            });

            $('#btn-delete').on('click', function() {
                var selected = _.groupBy(filex.selectedFiles(), function(item) { return item.get('type') }),
                    path = filex.path.full() + '/',
                    dirs = _.map(selected.directory || [], function (item) { return path + item.get('name') }),
                    files = _.map(selected.file || [], function (item) { return path + item.get('name') }),
                    data = {
                        host: filex.host,
                        dirs: dirs,
                        files: files
                    },
                    $confirmModal = $('#confirm-modal'),
                    $confirmList = $confirmModal.find('ul').html('');

                _.each(filex.selectedFiles(), function(item) {
                    $('<li>', {text: item.get('name')}).appendTo($confirmList);
                });

                $('#btn-confirm').off().on('click', function() {
                    filex.busy();

                    $.post('{% url 'filex:delete' %}', data, function(response) {
                        var keys = Object.keys(response.fail);

                        if (keys.length) {
                            var $errorModal = $('#error-modal'),
                                $errorBody = $errorModal.find('.modal-body')
                                                        .html($('<h4>', {text: 'Wystąpiły problemy podczas usuwania:'})),
                                $errorList = $('<dl>', {'class': 'dl-horizontal'}).appendTo($errorBody);

                            $errorModal.find('#error-modal-label').text('Błąd');

                            for (var i in keys) {
                                if(keys.hasOwnProperty(i)) {
                                    $('<dt>', {text: keys[i].replace(path, '')}).appendTo($errorList);
                                    $('<dd>', {text: response.fail[keys[i]]}).appendTo($errorList);
                                }
                            }

                            $errorModal.modal();
                            filex.idle();
                        }
                        else {
                            status('Usuwanie zakończone pomyślnie');
                        }

                        if (response.done.length)
                            filex.reloadFiles();

                    }, 'json').fail(failModal('Nie udało się usunąć plików'));

                    $confirmModal.modal('hide');
                });

                $confirmModal.modal();
            });

            $('#mkdir-form').on('submit', function(e) {
                var $this = $(this);

                e.preventDefault();

                if (conflictingName($this.find('#id_name').val(), $this))
                    return;

                filex.busy();
                $this.modal('hide');

                $this.find('#id_host').val(filex.host);
                $this.find('#id_path').val(filex.path.full());

                $.post($this.attr('action'), $this.serialize(), function() {
                    status('Katalog utworzono pomyślnie');
                    filex.reloadFiles();
                }, 'json').fail(failModal('Nie udało się utworzyć katalogu'));
            });

            $('#rename-form').on('show.bs.modal', function() {
                $(this).find('#id_dst').val(filex.selectedFiles()[0].get('name'));
            }).on('submit', function(e) {
                e.preventDefault();

                var $this = $(this),
                    path = filex.path.full() + '/',
                    newName = $this.find('#id_dst').val(),
                    data = {
                        host: filex.host,
                        src: path + filex.selectedFiles()[0].get('name'),
                        dst: path + newName
                    };

                if (conflictingName(newName, $this))
                    return;

                filex.busy();
                $this.modal('hide');

                $.post($this.attr('action'), data, function() {
                    status('Nazwę zmieniono pomyślnie');
                    filex.reloadFiles();
                }, 'json').fail(failModal('Nie udało się zmienić nazwy'));
            });

            $('#compress-form').on('submit', function(e) {
                e.preventDefault();

                var $this = $(this),
                    name = $this.find('#id_archive').val(),
                    type = $this.find('#id_type').val(),
                    path = filex.path.full(),
                    archive = name + (name.endsWith(type) ? '' : type),
                    data = {
                        host: filex.host,
                        path: path,
                        files: _.map(filex.selectedFiles(), function (item) { return item.get('name') }),
                        archive: path  + '/' + archive
                    };

                if (conflictingName(archive, $this))
                    return;

                filex.busy();
                $this.modal('hide');

                $.post($this.attr('action'), data, function() {
                    status('Archiwum utworzono pomyślnie');
                    filex.reloadFiles();
                }, 'json').fail(failModal('Nie udało się utworzyć archiwum'));
            });

            $('#btn-extract').on('click', function() {
                filex.busy();

                var data = {
                    host: filex.host,
                    path: filex.path.full() + '/' + filex.selectedFiles()[0].get('name'),
                    dst: filex.path.full()
                };

                $.post('{% url 'filex:extract' %}', data, function() {
                    status('Archiwum rozpakowano pomyślnie');
                    filex.reloadFiles();
                }, 'json').fail(failModal('Nie udało się rozpakować archiwum'));
            });
        })
    </script>
{% endblock extra_js %}

{% block title %}Zarządzanie plikami GridFTP{% endblock %}

{% block container %}
    {% include 'filex/source.html' %}

    <div id="confirm-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="confirm-modal-label">Usuwanie plików</h4>
                </div>
                <div class="modal-body">
                    <h4>Czy na pewno usunąć następujące elementy?</h4>
                    <ul></ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
                    <button id="btn-confirm" type="button" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>

    <div id="error-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="error-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="error-modal-label"></h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

    <form id="mkdir-form" action="{% url 'filex:mkdir' %}" class="modal fade form-horizontal" tabindex="-1" role="dialog" aria-labelledby="mkdir-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="mkdir-modal-label">Nowy katalog</h4>
                </div>
                <div class="modal-body">
                    {% csrf_token %}
                    {% bootstrap_form new_dir_form layout='horizontal' %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
                    <button type="submit" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </form>

    <form id="rename-form" action="{% url 'filex:move' %}" class="modal fade form-horizontal" tabindex="-1" role="dialog" aria-labelledby="rename-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="rename-modal-label">Zmień nazwę</h4>
                </div>
                <div class="modal-body">
                    {% csrf_token %}
                    {% bootstrap_form rename_form layout='horizontal' %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
                    <button type="submit" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </form>

    <form id="compress-form" action="{% url 'filex:compress' %}" class="modal fade form-horizontal" tabindex="-1" role="dialog" aria-labelledby="compress-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="compress-modal-label">Podaj nazwę archiwum</h4>
                </div>
                <div class="modal-body">
                    {% csrf_token %}
                    {% bootstrap_form archive_form layout='horizontal' %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
                    <button type="submit" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </form>
{% endblock container %}

{% block footer %}
    <footer class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            <div class="btn-toolbar" role="toolbar" style="float: left">
                <div class="btn-group" role="group">
                    <button id="btn-upload" class="btn btn-default navbar-btn">Wgraj plik</button>
                    <button class="btn btn-default navbar-btn" data-toggle="modal" data-target="#mkdir-form">Utwórz katalog</button>
                </div>
                <div class="btn-group" role="group">
                    <button id="btn-rename" class="btn btn-default navbar-btn disabled" data-toggle="modal" data-target="#rename-form">Zmień nazwę</button>
                    <button id="btn-delete" class="btn btn-default navbar-btn disabled">Usuń</button>
                </div>
                <div class="btn-group" role="group">
                    <button id="btn-compress" class="btn btn-default navbar-btn disabled" data-toggle="modal" data-target="#compress-form">Spakuj</button>
                    <button id="btn-extract" class="btn btn-default navbar-btn disabled">Rozpakuj</button>
                </div>
            </div>
            <p id="status" class="navbar-text"></p>
        </div>
    </footer>
{% endblock footer %}