@using ProjectSpring.Models.Domain.TeamAssessment
@using ProjectSpring.Services.Helpers
@model TeamAssessmentValueDataViewModel

@{
    const string selectedValuesListId = "selected-values";
    const string allValuesListId = "all-values";
    const string draggableDataValue = "draggable";
    string chooseValueTitle = Model.ValueType == TeamAssessmentUserValueType.MostImportant
        ? "What six values are <strong>most important</strong> to you?"
        : "What six values are <strong>least important</strong> to you?";
    const string valueInfoPopupId = "value-info";
    const string valueInfoPopupTitleType = "value-info-title";
    const string valueInfoPopupContentType = "value-info-content";
    const string buttonNextId = "next-step";
    const string dataValueSelected = "selected";
    const string dataValueNotSelected = "not-selected";
    const string dataStateAvailable = "available";
    const string dataStateNotAvailable = "not-available";
}

<section class="t-team-assessment">

    @Html.Partial("_TeamAssessmentNavigationPartial", new NavigationViewModel(TeamAssessmentState.Values, Model.TeamId))

    <div class="container">
        <br>
        <br>
        <h4 class="text-center">Values</h4>
        <br>
        <p class="text-center">@Html.Raw(chooseValueTitle)</p>
        <br>
        <br>

        <article class="row value-box">
            <aside class="col-xs-12 col-xs-offset-0 col-md-offset-1 col-md-3 connectedSortable" id="@selectedValuesListId">
                @foreach (var value in Model.SelectedValues)
                {
                    <div class="value-box-item value-box-item-yellow m-b-20" data-state="@dataValueSelected">
                        <a onclick="removeSelectedValue(this)" class="close-btn">&times;</a>
                        <input hidden="hidden" data-id="@value.Id" />
                        <h6>@value.Name</h6>
                        <p>@value.ShortDescription</p>
                        <a onclick="showValueInfoPopup('@value.Name', '@value.ShortDescription')">read more</a>
                    </div>
                }
            </aside>

            <div class="value-box-items col-xs-12 col-md-8 connectedSortable" id="@allValuesListId">
                @foreach (var value in Model.AllValues)
                {
                    string isSelectedClass = value.IsSelected ? "disabled" : "blue";
                    string isSelectedDataType = value.IsSelected ? "selected" : "not-selected";

                    <div class="value-box-item value-box-item-@isSelectedClass handle" data-value="@dataValueNotSelected" data-id="@value.Id" data-state="@dataStateAvailable" data-type="@draggableDataValue">
                        <input hidden="hidden" data-id="@value.Id" />
                        <h6>@value.Name</h6>
                        <p>@value.ShortDescription</p>
                        <a onclick="showValueInfoPopup('@value.Name', '@value.ShortDescription')">read more</a>
                    </div>
                }
            </div>
        </article>

        <br>
        <br>

        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

        <div class="nav-step text-center">
            @if (Model.ValueType == TeamAssessmentUserValueType.LeastImportant)
            {
                <a href="@Url.Action("Index", "Value", new { teamId = Model.TeamId, valueType = TeamAssessmentUserValueType.MostImportant})" class="btn btn-gray-medium">Previous</a>
            }
            <button onclick="saveSelectedValues()" id="@buttonNextId" class="btn btn-yellow-medium">Next</button>
        </div>

    </div>
</section>

<div class="popup" id="@valueInfoPopupId">
    <div class="overlay"></div>
    <div class="content">
        <div class="clearfix"></div>
        <h5 data-type="@valueInfoPopupTitleType"></h5>
        <br>
        <p data-type="@valueInfoPopupContentType"></p>
        <br>
        <br>
        <a onclick="closeValueInfoPopup()" class="close-popup-box close-popup-ex clickable">&#x2716;</a>
    </div>
</div>

<script>

    var draggableElement = $('[data-type="@draggableDataValue"]');

    $(document).ready(function () {
        //initializeDrag();
        //initializeDrop();
        //checkThatAllValuesAreSelected();

        $("#@selectedValuesListId, #@allValuesListId").sortable({
            connectWith: ".connectedSortable",
            receive: function (event, ui) {
                    if (ui.item[0].dataset.value == '@dataValueNotSelected') {
                        ui.item[0].dataset.value = '@dataValueSelected';
                        ui.item[0].className = 'value-box-item value-box-item-yellow m-b-20';
                    } else if (ui.item[0].dataset.value == '@dataValueSelected') {
                        ui.item[0].dataset.value = '@dataValueNotSelected';
                        ui.item[0].className = 'value-box-item value-box-item-blue';
                }
            },

            stop: function (event, ui) {
                if ($("#@selectedValuesListId > div").length >= '@AppSettingsHelper.NumberOfSelectedValues') {
                    $(ui.sender).sortable('cancel');
                    $("#@buttonNextId").prop('disabled', false);
                } else {
                    $("#@buttonNextId").prop('disabled', true);
                }

                //checkThatAllValuesAreSelected();
            }
        }).disableSelection();

        @*$("#@selectedValuesListId").on("sortreceive", function (event, ui) {
            if ($("#@selectedValuesListId > div").length > '@AppSettingsHelper.NumberOfSelectedValues') {
                $(ui.sender).sortable('cancel');
            }
        });*@
    });



    function initializeDrag() {
        draggableElement.draggable({
            //helper: "clone",
            stop: function(event, ui) {
                if (ui.helper.data('dropped')) {
                    checkThatAllValuesAreSelected();
                    $(this).removeClass('value-box-item-blue').addClass('value-box-item-disabled');
                    $(this).draggable("disable");
                    $(this).data("type", "selected");
    }
            }
        });
    }

    function initializeDrop() {
        $("#@selectedValuesListId").droppable({
            drop: function (event, ui) {
                /*var element = "<div class='value-box-item value-box-item-yellow m-b-20'><a onclick='removeSelectedValue(this)' class='close-btn'>&times;</a>" + $(ui.helper).html() + "</div>";
                $(this).append(element);*/
                ui.helper.data('dropped', true);
            }
        });
    }

    function removeSelectedValue(element) {
        var selectedValue = $(element).closest("div");
        var valueId = selectedValue.find("input").data('id');
        var valueInAllValuesList = $("#@allValuesListId").find("[data-id='" + valueId + "']");

        valueInAllValuesList.removeClass('value-box-item-disabled').addClass('value-box-item-blue');
        valueInAllValuesList.data("type", "not-selected");
        selectedValue.remove();

        checkThatAllValuesAreSelected();
    }

    function checkThatAllValuesAreSelected() {
        if ($("#@selectedValuesListId > div").length >= '@AppSettingsHelper.NumberOfSelectedValues') {
            draggableElement.draggable({ disabled: true });
            $("#@buttonNextId").prop('disabled', false);
        } else {
            for (var i = 0; i < draggableElement.length; i++) {
                if ($(draggableElement[i]).data("type") == "not-selected") {
                    $(draggableElement[i]).draggable({ disabled: false });
                }
            }
            //draggableElement.draggable({ disabled: false });
            $("#@buttonNextId").prop('disabled', true);
        }
    }

    function getSelectedValues() {
        var selectedValues = [];
        $("#@selectedValuesListId > div").each(function() {
            selectedValues.push($(this).find("input").data('id'));
        });

        return selectedValues;
    }

    function saveSelectedValues() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("Save")',
            data: { teamId: '@Model.TeamId', type: '@Model.ValueType', selectedValues: getSelectedValues() },
            error: function (xhr, status, error) {
                window.location.href = '@Url.Action("Error500", "Errors")';
            },
            success: function (data) {
                window.location.href = data.redirectToAction;
            }
        });
    }

    function showValueInfoPopup(title, content) {
        $('[data-type="@valueInfoPopupTitleType"]').text(title);
        $('[data-type="@valueInfoPopupContentType"]').text(content);

        $("#@valueInfoPopupId").addClass('is-active');
    }

    function closeValueInfoPopup() {
        $("#@valueInfoPopupId").removeClass('is-active');
    }

    // close popup on ESC
    document.addEventListener('keyup',
        function(e) {
            if (e.which == 27) {
                $("#@valueInfoPopupId").removeClass('is-active');
            }
        });

</script>