class ExpFormatView extends BasicView {
    constructor(controller) {
        super(controller);
    }

    bindEvents() {
        super.bindEvents();

        $(".format-grid").on("change", "input", this.controller.changeName.bind(this.controller));
        $(".format-grid").on("change", "select", this.controller.changeFormat.bind(this.controller));
        $("#distribution-enable").on("click", this.controller.enableDistribution.bind(this.controller));
    }

    update(model) {
        $('#distribution-enable').prop('checked', model.enableDistribution);

        $(".format-grid").empty();

        $(".format-grid").append(
                '<h2>Expedition Channel</h2>'
            +   '<h2>Format</h2>'
            +   '<h2>Name for Display</h2>'
        );

        for (var i = 0; i < model.expeditionChannels.length; i++) {
            var channel = model.expeditionChannels[i].channel;
            var formatData = new Object();

            // Don't include alternating channels
            if (channel >= 117 && channel <= 126) {
                continue;
            }

            if (model.formatData.hasOwnProperty(channel)) {
                formatData = model.formatData[channel];
            } else {
                formatData = { format: 0, name: ""};
            }

            $(".format-grid").append(
                    '<div data-channel="' + channel + '">' + model.expeditionChannels[i].name + '</div>'
                +   '<select>'
                +   '<option value="0" ' + ((formatData.format==0)?"selected":"") + '>Integer 0 d.p.</option>'
                +   '<option value="1" ' + ((formatData.format==1)?"selected":"") + '>Integer 1 d.p.</option>'
                +   '<option value="2" ' + ((formatData.format==2)?"selected":"") + '>Integer 2 d.p.</option>'
                +   '<option value="3" ' + ((formatData.format==3)?"selected":"") + '>Angle +/- 180</option>'
                +   '<option value="5" ' + ((formatData.format==5)?"selected":"") + '>Bearing 0/360</option>'
                +   '<option value="6" ' + ((formatData.format==6)?"selected":"") + '>Time HH:MM:SS</option>'
                +   '</select>'
                +   '<input type="text" value="' + formatData.name + '">'
            );
        }
    }
}
