{% extends "pagetemplate.j2.html" %}

{% set traceback = imp0rt('traceback') %}
{% set json = imp0rt('json') %}
{% set os = imp0rt('os') %}
{% set unitsofmeasure = imp0rt('kaithem.src.unitsofmeasure') %}
{% set tagpoints = imp0rt('kaithem.src.tagpoints') %}
{% set modules_state = imp0rt('kaithem.src.modules_state') %}
{% set auth = imp0rt('kaithem.src.auth') %}
{% set pages = imp0rt('kaithem.src.pages') %}
{% set devices = imp0rt('kaithem.src.devices') %}
{% set devices_interface = imp0rt('kaithem.src.devices_interface') %}

{% block body %}

<style>
    .inputtable {
        width: 100%;
    }

    .tagbox {
        text-align: center;
    }
    .je-textarea {
        height: 8rem;
    }
</style>
<script type="module" src="/static/js/widget.mjs?"></script>


<script src="/static/js/thirdparty/showdown.min.js"></script>


<link rel="stylesheet" href="/static/js/thirdparty/editTable/editTable.min.css">

<datalist id="k_modules">
    {% for i in modules_state.ActiveModules %}
    <option>{{ i| escape }}</option>
    {% endfor %}
</datalist>

<datalist id="k_perms">
    <option>write_devices</option>
    <option>view_devices</option>

    {% for i in pages.sorted(auth.Permissions.keys()) %}
    <option>{{ i| escape }}</option>
    {% endfor %}
</datalist>

<h1 style="text-align: center;">Device Inspector:
    {% if obj and obj.device and obj.device.title %}
    {{ obj.device.title }}
    {% else %}
    {{ name }}
    {% endif %}
</h1>


<main>
    <div style="flex-basis: 20%; text-align: center;">
        <div class="decorative-image-settings decorative-image"
            style="height: 22em; min-width: 22em; max-width: 45vw; margin: auto;"></div>
    </div>

    <section class="window padding w-full">
        {%if not obj %}
        <div class="error">This device is incorrectly configured and does
            not exist.</div>
            {%endif %}

        {% if not hasattr(obj,'_kaithem_is_subdevice') %}
        <form method="post" action="/devices/discoveryStep/{{ url(data.get('type','')) }}/{{ url(name) }}">
            <button type="submit">Search for auto-setup configurations</button>
        </form>
        {% endif %}
        <form method="POST" action="/devices/updateDevice/{{ url(name) }}" id="mainform">
            <details>
                <summary>
                    <b>Save Location</b>
                </summary>

                <table border="1" class="w-full">

                    <tr>
                        <td>Store settings in Module</td>
                        <td><input type="text" required list="k_modules" name="temp.kaithem.store_in_module"
                                value="{{ module | escape }}"></td>
                    </tr>
                    <tr>
                        <td>Resource Name(blank=use device name)</td>
                        <td><input type="text" name="temp.kaithem.store_in_resource"
                                value="{{ resource | escape }}">
                        </td>
                    </tr>
                </table>
            </details>

            <input type="hidden" name="type" value="{{ data.get('type','') }}">

            <details>
                <summary>
                    <b><i class="mdi mdi-help-circle-outline"></i>Help</b>
                </summary>
                {% if obj and hasattr(obj.device,'description') and obj.device.description %}

                <p id="desc">{{ pages.str(obj.device.description)[:8192]| escape }}</p>

                <script>
                    showdown.setFlavor('github');
                    var c = document.querySelector("#desc").innerHTML;
                    var converter = new showdown.Converter();
                    document.querySelector("#desc").innerHTML = converter.makeHtml(c);
                </script>

                {% endif %}

                {% if obj and hasattr(obj.device,'readme') and obj.device.readme %}
                <h3>Readme</h3>

                <div class="max-h-12rem scroll border" id='readme'>
                    {{ obj.device.readme| escape }}
                </div>

                <script>
                    showdown.setFlavor('github');
                    var c = document.querySelector("#readme").innerHTML;
                    var converter = new showdown.Converter();
                    document.querySelector("#readme").innerHTML = converter.makeHtml(c);
                </script>
                {% endif %}
            </details>


            <title>{{ name| escape }}</title>

            <details>

                <summary data-testid="expand_settings">
                    <b><i class="mdi mdi-cog-outline"></i>Settings</b>
                </summary>



                <input id="jsoninput" type="hidden" name="json">
                <script src="/static/js/thirdparty/jsoneditor.min.js"></script>
                <div id="editor-container"></div>

               <script>
                const config = {
                    schema: {{json.dumps(obj.device.get_full_schema() if (obj and obj.device) else {'type':'object'})}},
                    disable_array_delete_all_rows: true,
                    array_controls_top: true,
                    disable_array_delete_last_row: true,
                    disable_edit_json: true,
                    ajax: true,
                    theme: "barebones",
               }
                var editor = new JSONEditor(document.querySelector('#editor-container'), config)
                window.editor = editor

                const v= async () => {
                    await editor.promise
                    editor.setValue({{data|tojson}})
                }
                v()
              </script>
            </details>


            {% if obj.alerts %}

            <details open>
                <summary>
                    <b><i class="mdi mdi-text-chat"></i>Alerts</b>
                </summary>


                <table border="1" style="width:100%">
                    <tr>
                        <th>Name</th>
                        <th>Priority</th>
                        <th>Status</th>
                    </tr>

                    {% for i in obj.alerts %}
                    {% if obj.alerts[i].sm.state=='normal' %}
                    <tr class="success">
                    {% else %}
                    <tr class="error">
                    {% endif %}
                        <td>{{ i| escape }}</td>
                        <td>
                            {{ obj.alerts[i].priority }}
                        </td>
                        <td>
                            {% if obj.alerts[i].sm.state=='normal' %}

                            <i class="mdi mdi-check"></i>{{obj.alerts[i].sm.state }}

                            {% else %}

                            <i class="mdi mdi-alert"></i>{{obj.alerts[i].sm.state }}
                            {% endif %}

                        </td>
                    </tr>
                    {% endfor %}
                </table>

                {% endif %}
            </details>

            {% if obj and obj.device and obj.device.get_config_folder(create=False) %}
            <details>
                <summary>
                    <b><i class="mdi mdi-file-alt"></i>Config Folder</b>
                </summary>
                <a class="button" href="/settings/files/{{ url(obj.device.get_config_folder()) }}"><i
                        class="mdi mdi-folder"></i>Browse</a>
            </details>
            {% endif %}


            {% if obj and hasattr(obj,'metadata') and obj.metadata %}
            <details>
                <summary>
                    <b><i class="mdi mdi-text-chat"></i>Metadata</b>
                </summary>
                <table border="1" style="width:100%">
                    <tr>
                        <th>Name</th>
                        <th>Value</th>
                    </tr>
                    {% if obj.device %}
                    {% for i in obj.device.metadata %}
                    <tr>
                        <td>
                            {{ i| escape }}
                        </td>
                        <td>
                            {{ obj.device.metadata[i]| escape }}
                        </td>
                    </tr>
                    {% endfor %}
                    {% endif %}
                </table>

                {% endif %}
            </details>

            <b><i class="mdi mdi-chart-flow-2"></i>Tag Points</b>

            <script>

                triggerCounters = {}
            </script>
            <div class="flex-row gaps">
                {% if obj %}
                {% for i in obj.tagpoints %}
                {{devices_interface.render_device_tag(obj,i) | safe}}
                {% endfor %}
                {% endif %}
            </div>


            <h2>Messages</h2>
            {% if hasattr(obj,'logWindow') %}
            {{ obj.logWindow.render() }}
            {% endif %}



            <hr>
            <input type="submit" value="Save settings">

        </form>



    </section>




    <div style="flex-basis: 20%; min-width: 12em;"></div>
</main>

{% if obj %}
<script type="module">
    import { APIWidget } from '/static/js/widget.mjs?'

    let _generic_ws_channel = new APIWidget("{{obj._generic_ws_channel.uuid}}")

    globalThis._generic_ws_channel = _generic_ws_channel

    var fakesOn = false;
    function setFake(k, v) {
        if (!fakesOn) {
            fakesOn = confirm("Enable faking input values?");
        }
        if (fakesOn) {
            _generic_ws_channel.send(['fake', k, v])
        }

    }

    globalThis.setFake = setFake
</script>
{% endif %}




<script type="text/javascript">
    // lets do some fun


    function startEVM(video, canvas) {

        canvas.style.display = "block"

        var alpha = 10,
            lambda_c = 16,
            r1 = 0.4,
            r2 = 0.05,
            chromAttenuation = 1;

        var exaggeration_factor = 2;

        try {
            var attempts = 0;
            var readyListener = function (event) {
                findVideoSize();
            };
            var findVideoSize = function () {
                // demo_app(width, height);
                var s = Math.min(640 / video.videoWidth, 480 / video.videoHeight)

                var w = Math.floor(video.videoWidth * s >> 3) << 3,
                    h = Math.floor(video.videoHeight * s >> 3) << 3;
                // video.style.width = w + 'px'
                // demo_app(Math.max(480, w), Math.max(480, h))
                // demo_app(640, 480)
                demo_app(Math.max(480, w), h)
                canvas.width = w
                canvas.height = h

                compatibility.requestAnimationFrame(tick);
            };

            setTimeout(readyListener, 300);
        } catch (error) {
            console.log(error)
        }

        var current_frame = 0;
        var frames_processed = 0;

        function tick() {
            compatibility.requestAnimationFrame(tick);
            // stat.new_frame();
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                // ctx.drawImage(video, 0, 0, 640, 480);
                ctx.fillRect(0, 0, 640, 480)
                var s = Math.min(640 / video.videoWidth, 480 / video.videoHeight)
                // var s = 0.01 // call this number for fun times
                ctx.drawImage(video, 0, 0, video.videoWidth * s, video.videoHeight * s)

                evm()
                if (frames_processed == 0) {
                    lowpass1.iirFilter(img_pyr, 1);
                    lowpass2.iirFilter(img_pyr, 1);
                }
                frames_processed++

            }
        }
    }
</script>

<script>
    let mainform = document.querySelector("#mainform")
    mainform.addEventListener("submit", function (e) {
        document.querySelector('#jsoninput').value = JSON.stringify(globalThis.editor.getValue())
    })
</script>

{% endblock %}