{{define "content"}}
{{if .Text}}
<div class="materialert {{.Type}}">
    <div class="material-icons">{{.Type.Icon}}</div>
    <span>{{.Text}}</span>
    <button type="button" class="close-alert">×</button>
</div>
{{end}}
<div class="row">
    <div class="col s12 m4">
        <h5 class="center">Convert/Edit Captures</h5>
    </div>
    <form class="col s12" action="/captures-convert" method="post" enctype="multipart/form-data">
        <div class="row">
            <div class="file-field input-field col s6">
                <div class="btn">
                    <span>am2 / am2Data file</span>
                    <input type="file" id="input_file" name="data" required>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text">
                </div>
            </div>
        </div>

        <div class="row">
            <p class="range-field col s6">
                <input type="range" id="level" name="level" min="0" max="255" value="100" />
                <label for="level">Level: </label><span id="level_value"></span>
                <script>
                    var levelValue = document.querySelector("#level_value");
                    var levelInput = document.querySelector("#level");
                    levelValue.textContent = levelInput.value;
                    levelInput.addEventListener("input", (event) => {
                        levelValue.textContent = event.target.value;
                    });
                </script>
            </p>
        </div>

        <div class="row">
            <p class="range-field col s6">
                <input type="range" id="mix" name="mix" min="0" max="100" value="100" />
                <label for="mix">Mix: </label><span id="mix_value"></span>
                <script>
                    var mixValue = document.querySelector("#mix_value");
                    var mixInput = document.querySelector("#mix");
                    mixValue.textContent = mixInput.value;
                    mixInput.addEventListener("input", (event) => {
                        mixValue.textContent = event.target.value;
                    });
                </script>
            </p>
        </div>

        <div class="row">
            <div id="gain-slider" class="range-field col s6"></div>
            <br>
            <input type="hidden" name="gain_min" id="gain_min">
            <input type="hidden" name="gain_max" id="gain_max">
            <label>Gain Min: </label><span id="gain_min_value"></span>
            <label>Max: </label><span id="gain_max_value"></span>
            <script>
                setTimeout(function () {
                    var slider = document.getElementById('gain-slider');
                    noUiSlider.create(slider, {
                        start: [30, 60],
                        connect: true,
                        step: 1,
                        orientation: 'horizontal',
                        range: {
                            'min': 0,
                            'max': 100
                        },
                        format: {
                            to: function (value) {
                                return value;
                            },
                            from: function (value) {
                                return Number(value);
                            }
                        }
                    });
                    var gainMin = document.getElementById('gain_min');
                    var gainMax = document.getElementById('gain_max');
                    var gainMinOut = document.getElementById('gain_min_value');
                    var gainMaxOut = document.getElementById('gain_max_value');
                    slider.noUiSlider.on('update', function (values, handle) {
                        gainMinOut.textContent = values[0];
                        gainMin.value = values[0];
                        gainMaxOut.textContent = values[1];
                        gainMax.value = values[1];
                    });
                }, 100);
            </script>
        </div>

        <div class="row">
            <button class="btn waves-effect waves-light" type="submit" name="action">Download
                <i class="material-icons left">download</i>
            </button>
        </div>

    </form>
</div>
<script>

    const getMethods = (obj) => {
        let properties = new Set()
        let currentObj = obj
        do {
            Object.getOwnPropertyNames(currentObj).map(item => properties.add(item))
        } while ((currentObj = Object.getPrototypeOf(currentObj)))
        return [...properties.keys()].filter(item => typeof obj[item] === 'function')
    }

    document.getElementById('input_file').addEventListener('change', function selectedFileChanged() {

        if (this.files.length === 0) {
            return;
        }

        var file = this.files[0]

        const reader = new FileReader();
        reader.onload = function fileReadCompleted() {
            if (reader.result.byteLength !== 6204) {
                // not am2data file, set default initial values
                document.querySelector("#mix").value = 100;
                document.querySelector("#mix_value").textContent = 100;

                document.querySelector("#level").value = 100;
                document.querySelector("#level_value").textContent = 100;

                document.querySelector('#gain-slider').noUiSlider.set([30, 60]);
                return
            }

            var view = new Uint8Array(reader.result.slice(0, 60));
            var mix = view[18];
            document.querySelector("#mix").value = mix;
            document.querySelector("#mix_value").textContent = mix;

            var level = view[19];
            document.querySelector("#level").value = level;
            document.querySelector("#level_value").textContent = level;

            var gainMax = view[20];
            var gainMin = view[21];
            document.querySelector('#gain-slider').noUiSlider.set([gainMin, gainMax]);
            
        };
        reader.readAsArrayBuffer(file);
    });

</script>
{{end}}