{% extends "support.html" %}
{% load static %}

{% block head %}
    {{ block.super }}
    <script src="{% static 'js/monaco-editor/vs/loader.js' %}"></script>
    <script>
        let delete_lookup_id = 0;
        function get_lookup_id(field, field_name) {
            var lookupid = field.attr("id");
            lookupid = lookupid.replace(field_name, "");
            return lookupid;
        }

        function jump_to_item(){
            if (window.location.hash !== ''){
                let data_translation = $(window.location.hash + '-row');
                data_translation.children().css('background-color', 'lightblue');

                let targetOffset = data_translation.offset().top - $('thead').outerHeight();
                $('html, body').animate({ scrollTop: targetOffset }, 100);
            }
        }

        // force a reload on a page to prevent saved values from being shown again
        window.addEventListener('pageshow', (event) => {
            if (event.persisted) {
                $('body').hide();
                location.reload(true);
            }
        });

        $(function () {
            let monaco_editor = null;
            $(document).tooltip();
            $(".chosen-select").chosen({
                search_contains: true
            })
            jump_to_item();

            $(".copyable").click(function (event) {
                const copiedSpan = $(this).find("span");
                const id = $(this).parent().attr('id').replace('-row', '');

                const textArea = document.createElement("textarea");
                textArea.value = window.location.protocol + '//' + location.host + location.pathname + '#' + id;
                history.pushState({}, '', '#' + id);
                document.body.appendChild(textArea);
                textArea.select();

                try {
                    document.execCommand('copy');
                    copiedSpan.css('display', 'inline');
                    setTimeout( function() {
                        copiedSpan.css('display', 'none');
                    }, 1000)
                } catch (err) {
                    console.error('Unable to copy to clipboard', err);
                }
                document.body.removeChild(textArea);
            });

            $("input[id$='-active']").click(function () {
                $.post("{% url 'support:support-update-pms-data-translation-lookup-active' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            lookup_id: get_lookup_id($(this), "-active"),
                            field_val: $(this).prop("checked")}
                );

                // show/hide delete button depending upon if active, only items that are inactive start with them visible
                const id = get_lookup_id($(this), "-active");

                if (!$('#' + id + '-active').prop("checked") && !$('#' + id + '-testing').prop("checked")){
                    $('#btn-delete-translation-' + id).show();
                } else {
                    $('#btn-delete-translation-' + id).hide();
                }
            });

            $("input[id$='-testing']").click(function () {
                $.post("{% url 'support:support-update-pms-data-translation-lookup-testing' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            lookup_id: get_lookup_id($(this), "-testing"),
                            field_val: $(this).prop("checked")}
                );
                // show/hide delete button depending upon if active, only items that are inactive start with them visible
                const id = get_lookup_id($(this), "-testing");

                if (!$('#' + id + '-active').prop("checked") && !$('#' + id + '-testing').prop("checked")){
                    $('#btn-delete-translation-' + id).show();
                } else {
                    $('#btn-delete-translation-' + id).hide();
                }
            });

            $("#edit-pms-data-translation-lookup").dialog({
                {% if showAddEdit == 'Y' %}
                    autoOpen: true,
                {% else %}
                    autoOpen: false,
                {% endif %}
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1300,
                open: function (event, ui) {
                    $(this).closest('.ui-dialog').find('.ui-dialog-content').on('mousedown', '#monaco-return-value', function (event) {
                        event.stopPropagation();
                    });
                    if (monaco_editor) {
                        monaco_editor.layout();
                    }
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                            window.location.href = "{% url 'support:support-manage-pms-data-translation-lookup' pms.id %}?sort={{ current_sort }}";
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            $("#editDataTranslationLookupForm").validate();
                            if ($("#editDataTranslationLookupForm").valid()) {
                                document.editDataTranslationLookupForm.submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

            $("#btn-add-translation-lookup").click(function () {
                window.location.href = "{% url 'support:support-add-pms-data-translation-lookup' pms.id %}";
            });

            $("#btn-import-translation-lookup").click(function () {
                const required_keys = ['for_data_tag', 'for_group_tag', 'for_instance', 'data_tag', 'group_tag', 'instance', 'search_order', 'test_value', 'active', 'action', 'return_value', 'testing'];
                let data = $('#clipboardInput').val();

                try {
                    let json_data = JSON.parse(data);
                    if (required_keys.every(key => Object.keys(json_data).includes(key))) {
                        let baseURL = "{% url 'support:support-import-pms-data-translation-lookup'%}";
                        let queryParams = { pms_id: {{pms.id}} };
                        let url = baseURL + '?' + $.param(queryParams);
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: {
                                json_data: JSON.stringify(json_data),
                                csrfmiddlewaretoken: '{{csrf_token}}'
                            },
                            success: function(response) {
                                let baseURL = "{% url 'support:support-load-import-pms-data-translation-lookup'%}";
                                let queryParams = { pms_id: {{pms.id}} };
                                let url = baseURL + '?' + $.param(queryParams);
                                window.location.href = url;
                            },
                            error: function(xhr, status, error) {
                                console.error(error);
                            }
                        });
                    }
                } catch (exceptionVar) {
                    console.log(exceptionVar)
                    console.log('invalid json provided')
                    $('#invalid_json').css('display', 'inline');
                    setTimeout( function() {
                        $('#invalid_json').css('display', 'none');
                    }, 2500)
                }
            });


            $("#pms-data-translation-confirm-delete").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 400,
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            $.ajax({
                                url: "{% url 'support:support-delete-pms-data-translation-lookup' %}",
                                type: "POST",
                                data: {
                                    csrfmiddlewaretoken: '{{csrf_token}}',
                                    current_lookup_id: delete_lookup_id
                                },
                                success: function (data, status, jqXHR) {
                                    window.location.reload();
                                }
                            })
                        }
                    }
                ]
            });


            $("button[name^='btn-delete-translation']").click(function (event) {
                delete_lookup_id = $(this).val()
                $("#pms-data-translation-confirm-delete").dialog("open");
            });


            $("button[name^='btn-export']").click(function (event) {
                const copiedSpan = $(this).find("span");
                $.ajax({
                    url: "{% url 'support:support-export-pms-data-translation-lookup' %}",
                    type: "POST",
                    dataType: "json",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        current_lookup_id: $(this).val()
                    },
                    success: function (data, status, jqXHR) {
                        const textArea = document.createElement("textarea");
                        textArea.value = JSON.stringify(data);
                        document.body.appendChild(textArea);
                        textArea.select();
                        try {
                            document.execCommand('copy');
                            copiedSpan.css('display', 'inline');
                            setTimeout( function() {
                                copiedSpan.css('display', 'none');
                            }, 1000)
                        } catch (err) {
                            console.error('Unable to copy to clipboard', err);
                        }
                        document.body.removeChild(textArea);

                    }
                })
            });

            {% if showAddEdit == 'Y' %}
                $("#editDataTranslationLookupForm").validate({
                    onkeyup: false,
                    errorContainer: $("#edit-data-translation-lookup-validation-alert"),
                    errorLabelContainer: $("ul", $("#edit-data-translation-lookup-validation-alert")),
                    wrapper: 'li'
                });

            {% endif %}

            require.config({
                paths: {
                    vs: "{% static 'js/monaco-editor/vs' %}"
                }
            });

            require(['vs/editor/editor.main'], function () {
                let hidden_field = $('#id_return_value');
                monaco_editor = monaco.editor.create(document.getElementById('monaco-return-value'), {
                    value: hidden_field.val(),
                    language: 'sql',
                    theme: 'vs',
                    minimap: { enabled: false },
                    automaticLayout: true,
                    wordWrap: 'on',
                    scrollBeyondLastLine: false,
                    folding: false,
                    showFoldingControls: 'never',
                    stickyScroll: { enabled: false },
                });

                monaco_editor.onDidChangeModelContent(function () {
                    hidden_field.val(monaco_editor.getValue());
                });
            });

        });
    </script>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
    <p><a href="{% url 'support:support-manage-interface' %}">Back To Manage PMIS Interface</a></p>
    {% if not req_rule_allow_tag_variables %}
        {% if uses_tag_variables %}
            <div class="alert alert-error">Interface Attribute <a href="/support/pms_attribute_settings/{{pms.id}}/manage#REQ_RULE_ALLOW_TAG_VARIABLES">REQ_RULE_ALLOW_TAG_VARIABLES</a> is turned off, but a data translation uses a tag variable</div>
        {% endif %}
    {% endif %}
    <form id="pmsDataTranslationLookupForm" name="pmsDataTranslationLookupForm" method="POST">
    {% csrf_token %}
    <input type="hidden" name="current_lookup_id" id="current_lookup_id" value=""/>
    <div>
        <table class="table table-bordered table-striped">
            <thead style="position: sticky; top: 0;">
            <tr class="dosis-report-header">
                {% include 'report-table-header.html' %}
                <th><i class="icon-th-list"></i></th>
            </tr>
            </thead>
            <tbody>
            {% for lookup in lookup_list %}
                <tr id="{{ lookup.id }}-row">
                    <td style="padding-bottom: 2px;" class="copyable">{{ lookup.lookup_type }}<span style="display: none; margin-left: -70px; padding: 5px 12px; background-color: #000000df; border-radius: 4px; color: #fff; position: absolute;">Link to Data Translation Copied!</span></td>
                    <td style="padding-bottom: 2px;">{{ lookup.data_tag }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.group_tag }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.instance }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.for_data_tag }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.for_group_tag }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.for_instance }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.test_value }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.search_order }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.action }}</td>
                    <td style="padding-bottom: 2px;"><input type="checkbox" id="{{ lookup.id }}-active" name="{{ lookup.id }}-active" {% if lookup.active %}checked{% endif %}/></td>
                    <td style="padding-bottom: 2px;"><input type="checkbox" id="{{ lookup.id }}-testing" name="{{ lookup.id }}-testing" {% if lookup.testing %}checked{% endif %}/></td>
                    <td nowrap><a href="{% url 'support:support-edit-pms-data-translation-lookup' pms.id lookup.id %}?sort={{ current_sort }}">
                        <i title="Edit Data Translation Lookup" class="icon-pencil"></i></a>&nbsp;&nbsp;&nbsp;
                    <a href="{% url 'support:support-copy-pms-data-translation-lookup' pms.id lookup.id %}?sort={{ current_sort }}">
                        <i title="Copy Data Translation Lookup" class="icon-plus"></i></a>&nbsp;&nbsp;&nbsp;
                    {% if lookup.lookup_type_id == 0 %}
                        <button id="btn-export-{{ lookup.id }}" name="btn-export-{{ lookup.id }}" type="button"
                                value="{{ lookup.id }}" title="Copy to Clipboard" class="btn btn-small btn-link" style="padding-left: 0; padding-right: 0;">
                            <span style="display: none; margin-left: -70px; padding: 5px 12px; background-color: #000000df; border-radius: 4px; color: #fff; position: absolute;">Copied!</span>
                            <i class="icon-copy"></i></button>&nbsp;&nbsp;&nbsp;
                        <button id="btn-delete-translation-{{ lookup.id }}" name="btn-delete-translation-{{ lookup.id }}" type="button"
                                    value="{{ lookup.id }}" title="Delete Translation" class="btn btn-small btn-link" style="padding-left: 0; padding-right: 0; {% if lookup.active or lookup.testing %}display: none;{% endif %}"><i
                                    class="icon-trash"></i></button>&nbsp;&nbsp;&nbsp;
                    {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div>
            <span><button type="button" name="btn-add-translation-lookup" id="btn-add-translation-lookup" class="btn">Add Data Translation Lookup</button></span>
            <span>&nbsp;&nbsp;&nbsp;</span>
            <span><button type="button" name="btn-import-translation-lookup" id="btn-import-translation-lookup" class="btn">Import Data Translation Lookup</button></span>
            <span id="invalid_json" style="display: none; margin-left: -100px; padding: 5px 12px; background-color: #000000df; border-radius: 4px; color: #fff; position: absolute;">Invalid Data on Clipboard</span>
            <input type="text" id="clipboardInput" style="margin-bottom: 0; width: 220px;" placeholder="Paste copied data translation here">
    </div>
    </form>
    <div id="edit-pms-data-translation-lookup" title="{% if do_copy %}Copy{% else %}Edit{% endif %} PMIS Data Translation Lookup"
         style="margin-left: 2px;{% if do_copy %} background-color: {% if warning %} red; {% else %} yellow;{% endif %} {% endif %}">
        <form id="editDataTranslationLookupForm" name="editDataTranslationLookupForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="edit-data-translation-lookup-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-data-translation-lookup-validation-error-list">
                </ul>
            </div>
            <table style="width: 100%;">
                {% if warning %}
                <tr>
                  <td>
                     <span style="font-size: 30px; font-weight: bolder;">WARNING:    {{warning_message}}</span>
                  </td>
                </tr>
                {% endif %}
                <tr>
                    <td class="site-drug-edit-td">{{ edit_form.interface }}{{ edit_form.lookup_type }}From Data Tag: {{ edit_form.data_tag }}&nbsp;&nbsp;&nbsp;
                    From Group Tag: {{ edit_form.group_tag }}&nbsp;&nbsp;&nbsp;
                    From Instance: {{ edit_form.instance }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">To Data Tag: {{ edit_form.for_data_tag }}&nbsp;&nbsp;&nbsp;
                    To Group Tag: {{ edit_form.for_group_tag }}&nbsp;&nbsp;&nbsp;
                    To Instance: {{ edit_form.for_instance }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Search Order: {{ edit_form.search_order }}&nbsp;&nbsp;&nbsp;
                    Test Value: {{ edit_form.test_value }}&nbsp;&nbsp;&nbsp;
                    {{ edit_form.active }} Active?&nbsp;&nbsp;&nbsp;
                    {{ edit_form.testing }} Testing?</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Action: {{ edit_form.action }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">
                        Return Value:
                        {{ edit_form.return_value.as_hidden }}
                        <div style="position: relative; width: 100%; height: 500px;">
                            <div id="monaco-return-value" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #ccc;"></div>
                        </div>
                    </td>
                </tr>
                <tr>

                </tr>
            </table>
        </form>
    </div>
    <div id="pms-data-translation-confirm-delete" title="Delete Translation?" style="margin-left: 2px;">
        <div id="pms-data-translation-confirm-delete-content">
            Permanently Delete Translation?
        </div>
    </div>
{% endblock %}